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 @@ -22,36 +22,21 @@ } a.sidebarContainer, -a.sidebarSplitContainer, -a.reactionsContainer, -a.reactionsSplitContainer { +a.reactionsContainer { background: var(--inline-engagement-bg); color: var(--inline-engagement-color); font-size: var(--s-font-14); line-height: var(--line-height-text); transition: background 0.2s ease-in-out; - padding: 8px; - gap: 4px; - flex-direction: row; + padding: 4px 8px; + border-radius: 8px; display: flex; align-items: center; -} - -a.sidebarContainer, -a.reactionsContainer { - border-radius: 16px; -} -a.sidebarSplitContainer { - border-radius: 16px 0 0 16px; -} -a.reactionsSplitContainer { - border-radius: 0 16px 16px 0; + gap: 4px; } a.sidebarContainer:hover, -a.sidebarSplitContainer:hover, -a.reactionsContainer:hover, -a.reactionsSplitContainer:hover { +a.reactionsContainer: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 @@ -34,18 +34,6 @@ }, ]); - const reactionsExist = reactions && Object.keys(reactions).length > 0; - - const sidebarContainerClasses = classNames({ - [css.sidebarContainer]: sidebarThreadInfo && !reactionsExist, - [css.sidebarSplitContainer]: sidebarThreadInfo && reactionsExist, - }); - - const reactionsContainerClasses = classNames({ - [css.reactionsContainer]: reactionsExist && !sidebarThreadInfo, - [css.reactionsSplitContainer]: reactionsExist && sidebarThreadInfo, - }); - const onClickSidebarInner = useOnClickThread(sidebarThreadInfo); const onClickSidebar = React.useCallback( @@ -62,12 +50,12 @@ } return ( - + {repliesText} ); - }, [sidebarThreadInfo, repliesText, onClickSidebar, sidebarContainerClasses]); + }, [sidebarThreadInfo, repliesText, onClickSidebar]); const onClickReactions = React.useCallback( (event: SyntheticEvent) => { @@ -90,11 +78,11 @@ const reactionText = stringForReactionList(reactions); return ( - + {reactionText} ); - }, [reactions, onClickReactions, reactionsContainerClasses]); + }, [reactions, onClickReactions]); const isLeft = positioning === 'left'; const labelClasses = classNames({