diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js --- a/web/chat/composed-message.react.js +++ b/web/chat/composed-message.react.js @@ -141,7 +141,7 @@ inlineEngagement = ( <div className={css.sidebarMarginBottom}> <InlineEngagement - threadInfo={item.threadCreatedFromMessage} + sidebarThreadInfo={item.threadCreatedFromMessage} reactions={item.reactions} positioning={positioning} label={label} 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 @@ -21,8 +21,8 @@ margin-left: 31px; } -a.threadsContainer, -a.threadsSplitContainer, +a.sidebarContainer, +a.sidebarSplitContainer, a.reactionsContainer, a.reactionsSplitContainer { background: var(--inline-engagement-bg); @@ -37,19 +37,19 @@ align-items: center; } -a.threadsContainer, +a.sidebarContainer, a.reactionsContainer { border-radius: 16px; } -a.threadsSplitContainer { +a.sidebarSplitContainer { border-radius: 16px 0 0 16px; } a.reactionsSplitContainer { border-radius: 0 16px 16px 0; } -a.threadsContainer:hover, -a.threadsSplitContainer:hover, +a.sidebarContainer:hover, +a.sidebarSplitContainer:hover, a.reactionsContainer:hover, a.reactionsSplitContainer:hover { background: var(--inline-engagement-bg-hover); 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 @@ -15,15 +15,15 @@ import { useOnClickThread } from '../selectors/thread-selectors.js'; type Props = { - +threadInfo: ?ThreadInfo, + +sidebarThreadInfo: ?ThreadInfo, +reactions?: ReactionInfo, +positioning: 'left' | 'center' | 'right', +label?: ?string, }; function InlineEngagement(props: Props): React.Node { - const { threadInfo, reactions, positioning, label } = props; + const { sidebarThreadInfo, reactions, positioning, label } = props; const { pushModal, popModal } = useModalContext(); - const repliesText = getInlineEngagementSidebarText(threadInfo); + const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo); const containerClasses = classNames([ css.inlineEngagementContainer, @@ -36,38 +36,38 @@ const reactionsExist = reactions && Object.keys(reactions).length > 0; - const threadsContainerClasses = classNames({ - [css.threadsContainer]: threadInfo && !reactionsExist, - [css.threadsSplitContainer]: threadInfo && reactionsExist, + const sidebarContainerClasses = classNames({ + [css.sidebarContainer]: sidebarThreadInfo && !reactionsExist, + [css.sidebarSplitContainer]: sidebarThreadInfo && reactionsExist, }); const reactionsContainerClasses = classNames({ - [css.reactionsContainer]: reactionsExist && !threadInfo, - [css.reactionsSplitContainer]: reactionsExist && threadInfo, + [css.reactionsContainer]: reactionsExist && !sidebarThreadInfo, + [css.reactionsSplitContainer]: reactionsExist && sidebarThreadInfo, }); - const onClickThreadInner = useOnClickThread(threadInfo); + const onClickSidebarInner = useOnClickThread(sidebarThreadInfo); - const onClickThread = React.useCallback( + const onClickSidebar = React.useCallback( (event: SyntheticEvent<HTMLElement>) => { popModal(); - onClickThreadInner(event); + onClickSidebarInner(event); }, - [popModal, onClickThreadInner], + [popModal, onClickSidebarInner], ); const sidebarItem = React.useMemo(() => { - if (!threadInfo || !repliesText) { + if (!sidebarThreadInfo || !repliesText) { return null; } return ( - <a onClick={onClickThread} className={threadsContainerClasses}> + <a onClick={onClickSidebar} className={sidebarContainerClasses}> <CommIcon size={14} icon="sidebar-filled" /> {repliesText} </a> ); - }, [threadInfo, repliesText, onClickThread, threadsContainerClasses]); + }, [sidebarThreadInfo, repliesText, onClickSidebar, sidebarContainerClasses]); const onClickReactions = React.useCallback( (event: SyntheticEvent<HTMLElement>) => { @@ -103,7 +103,7 @@ [css.messageLabelRight]: !isLeft, [css.onlyMessageLabel]: !sidebarItem && !reactionsList, }); - const messageLabel = React.useMemo(() => { + const editedLabel = React.useMemo(() => { if (!label) { return null; } @@ -118,7 +118,7 @@ if (isLeft) { body = ( <> - {messageLabel} + {editedLabel} {sidebarItem} {reactionsList} </> @@ -128,7 +128,7 @@ <> {sidebarItem} {reactionsList} - {messageLabel} + {editedLabel} </> ); } diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js --- a/web/chat/robotext-message.react.js +++ b/web/chat/robotext-message.react.js @@ -43,7 +43,7 @@ inlineEngagement = ( <div className={css.sidebarMarginTop}> <InlineEngagement - threadInfo={threadCreatedFromMessage} + sidebarThreadInfo={threadCreatedFromMessage} reactions={reactions} positioning="center" />