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 @@ -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 ( +
+ {label} +
+ ); + }, [isLeft, label, reactionsList, sidebarItem]); + return (
+ {isLeft && messageLabel} {sidebarItem} {reactionsList} + {!isLeft && messageLabel}
); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -206,4 +206,5 @@ --topbar-button-bg: var(--shades-black-90); --topbar-button-bg-hover: var(--shades-black-80); --topbar-button-fg: var(--shades-white-60); + --message-label-color: var(--shades-white-60); }