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 @@ -14,3 +14,13 @@ flex-direction: row; justify-content: space-between; } + +div.userInfoContainer { + display: flex; + flex-direction: row; + align-items: center; +} + +div.username { + margin-left: 8px; +} diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js --- a/web/modals/chat/message-reactions-modal.react.js +++ b/web/modals/chat/message-reactions-modal.react.js @@ -3,9 +3,11 @@ import * as React from 'react'; import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; +import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; import { useMessageReactionsList } from 'lib/shared/reaction-utils.js'; import css from './message-reactions-modal.css'; +import Avatar from '../../components/avatar.react.js'; import Modal from '../modal.react.js'; type Props = { @@ -20,12 +22,19 @@ const reactionsList = React.useMemo( () => - messageReactionsList.map(messageReactionUser => ( -