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({