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,12 +88,43 @@ ); }, [reactions, onClickReactions, reactionsContainerClasses]); - return ( -