diff --git a/web/modals/chat/message-reactions-list-item.react.js b/web/modals/chat/message-reactions-list-item.react.js --- a/web/modals/chat/message-reactions-list-item.react.js +++ b/web/modals/chat/message-reactions-list-item.react.js @@ -6,6 +6,7 @@ import css from './message-reactions-modal.css'; import UserAvatar from '../../avatars/user-avatar.react.js'; +import { usePushUserProfileModal } from '../user-profile/user-profile-utils.js'; type Props = { +messageReactionUser: MessageReactionListInfo, @@ -14,9 +15,11 @@ function MessageReactionsListItem(props: Props): React.Node { const { messageReactionUser } = props; + const pushUserProfileModal = usePushUserProfileModal(messageReactionUser.id); + const messageReactionsListItem = React.useMemo( () => ( -
+
{messageReactionUser.username}
@@ -28,6 +31,7 @@ messageReactionUser.id, messageReactionUser.reaction, messageReactionUser.username, + pushUserProfileModal, ], ); diff --git a/web/modals/chat/message-reactions-modal.css b/web/modals/chat/message-reactions-modal.css --- a/web/modals/chat/message-reactions-modal.css +++ b/web/modals/chat/message-reactions-modal.css @@ -1,12 +1,11 @@ div.modalContentContainer { - padding: 24px 32px 32px 32px; + padding: 16px 24px 24px 24px; color: var(--fg); background-color: var(--modal-bg); flex: 1; display: flex; flex-direction: column; font-size: var(--l-font-18); - gap: 16px; overflow-y: auto; } @@ -14,6 +13,13 @@ display: flex; flex-direction: row; justify-content: space-between; + padding: 8px; +} + +div.userRowContainer:hover { + cursor: pointer; + background-color: var(--drawer-open-community-bg); + border-radius: 8px; } div.userInfoContainer {