diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css --- a/web/chat/chat-message-list.css +++ b/web/chat/chat-message-list.css @@ -144,7 +144,7 @@ display: flex; justify-content: flex-end; flex-shrink: 0; - margin-right: 30px; + margin-right: 45px; padding-bottom: 6px; } diff --git a/web/chat/inline-engagement.css b/web/chat/inline-engagement.css --- a/web/chat/inline-engagement.css +++ b/web/chat/inline-engagement.css @@ -17,7 +17,7 @@ justify-content: flex-end; position: relative; top: -10px; - right: 31px; + right: 30px; margin-left: 31px; } @@ -62,3 +62,28 @@ svg.inlineEngagementIcon { color: #666666; } + +div.messageLabel { + display: flex; + flex-shrink: 0; +} + +div.messageLabel > span { + font-size: 12px; + padding: 0 3px; + color: var(--message-label-color); +} + +div.messageLabelLeft { + margin-left: 8px; + margin-right: 4px; +} + +div.messageLabelRight { + margin-right: 12px; + margin-left: 4px; +} + +div.onlyMessageLabel { + margin-top: 8px; +} diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js --- a/web/chat/inline-engagement.react.js +++ b/web/chat/inline-engagement.react.js @@ -18,9 +18,10 @@ +threadInfo: ?ThreadInfo, +reactions?: ReactionInfo, +positioning: 'left' | 'center' | 'right', + +label?: ?string, }; function InlineEngagement(props: Props): React.Node { - const { threadInfo, reactions, positioning } = props; + const { threadInfo, reactions, positioning, label } = props; const { pushModal, popModal } = useModalContext(); const repliesText = useInlineEngagementText(threadInfo); @@ -87,10 +88,32 @@ ); }, [reactions, onClickReactions, reactionsContainerClasses]); + const isLeft = positioning === 'left'; + const messageLabel = React.useMemo(() => { + if (!label) { + return null; + } + + const labelClasses = classNames({ + [css.messageLabel]: true, + [css.messageLabelLeft]: isLeft, + [css.messageLabelRight]: !isLeft, + [css.onlyMessageLabel]: !sidebarItem && !reactionsList, + }); + + return ( +