From 220a8f304496b6c0743e0462fee3f598bad70743 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Tue, 24 Oct 2023 08:50:36 +0530 Subject: [PATCH] fix message avatar hover & cursor --- src/app/components/message/layout/layout.css.ts | 2 +- src/app/organisms/room/message/Message.tsx | 8 +++++++- src/app/organisms/room/message/styles.css.ts | 4 ++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts index ff31baa5..7b1a267d 100644 --- a/src/app/components/message/layout/layout.css.ts +++ b/src/app/components/message/layout/layout.css.ts @@ -118,8 +118,8 @@ export const CompactHeader = style([ export const AvatarBase = style({ paddingTop: toRem(4), - cursor: 'pointer', transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)', + alignSelf: 'start', selectors: { '&:hover': { diff --git a/src/app/organisms/room/message/Message.tsx b/src/app/organisms/room/message/Message.tsx index e26f3662..14996a9a 100644 --- a/src/app/organisms/room/message/Message.tsx +++ b/src/app/organisms/room/message/Message.tsx @@ -654,7 +654,13 @@ export const Message = as<'div', MessageProps>( const avatarJSX = !collapse && messageLayout !== 1 && ( <AvatarBase> - <Avatar as="button" size="300" data-user-id={senderId} onClick={onUserClick}> + <Avatar + className={css.MessageAvatar} + as="button" + size="300" + data-user-id={senderId} + onClick={onUserClick} + > {senderAvatarMxc ? ( <AvatarImage src={mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? senderAvatarMxc} diff --git a/src/app/organisms/room/message/styles.css.ts b/src/app/organisms/room/message/styles.css.ts index 23615709..9cb0f2ef 100644 --- a/src/app/organisms/room/message/styles.css.ts +++ b/src/app/organisms/room/message/styles.css.ts @@ -56,6 +56,10 @@ export const MessageOptionsBar = style([ }, ]); +export const MessageAvatar = style({ + cursor: 'pointer', +}); + export const MessageQuickReaction = style({ minWidth: toRem(32), });