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 ( -
- {sidebarItem} - {reactionsList} -
- ); + const isLeft = positioning === 'left'; + const labelClasses = classNames({ + [css.messageLabel]: true, + [css.messageLabelLeft]: isLeft, + [css.messageLabelRight]: !isLeft, + [css.onlyMessageLabel]: !sidebarItem && !reactionsList, + }); + const messageLabel = React.useMemo(() => { + if (!label) { + return null; + } + return ( +
+ {label} +
+ ); + }, [label, labelClasses]); + + let body; + if (isLeft) { + body = ( + <> + {messageLabel} + {sidebarItem} + {reactionsList} + + ); + } else { + body = ( + <> + {sidebarItem} + {reactionsList} + {messageLabel} + + ); + } + return
{body}
; } export default InlineEngagement; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -210,5 +210,6 @@ --filter-panel-bg: #0d0d0d; --topbar-button-bg-hover: var(--shades-black-80); --topbar-button-fg: var(--shades-white-60); + --message-label-color: var(--shades-black-60); --topbar-lines: rgba(255, 255, 255, 0.08); }