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 @@ -101,24 +101,6 @@ margin-left: 4px; } -div.messageActionContainer { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - padding: 0 6px; - background-color: var(--message-action-tooltip-bg); - border-radius: 8px; -} - -div.messageActionContainer svg { - padding: 10px 6px 6px; - color: var(--fg); -} -div.messageActionContainer svg:hover { - cursor: pointer; -} - div.messageActionLinkIcon:hover { cursor: pointer; } 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 @@ -150,11 +150,7 @@ }); messageActionLinks = ( -
-
- {messageActionButtons} -
-
+
{messageActionButtons}
); } diff --git a/web/chat/message-action-buttons.css b/web/chat/message-action-buttons.css --- a/web/chat/message-action-buttons.css +++ b/web/chat/message-action-buttons.css @@ -1,11 +1,23 @@ +div.messageActionContainer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 0 6px; + background-color: var(--message-action-tooltip-bg); + border-radius: 8px; +} + div.messageActionButtons { display: flex; font-size: 16px; } div.messageActionButtons svg { + padding: 10px 6px 6px; color: var(--color-disabled); } div.messageActionButtons svg:hover { + cursor: pointer; color: var(--fg); } div.messageActionButtonsViewer { diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js --- a/web/chat/message-action-buttons.js +++ b/web/chat/message-action-buttons.js @@ -189,13 +189,14 @@ } const { isViewer } = messageInfo.creator; - const messageActionButtonsContainer = classNames({ + const messageActionButtonsContainerClassName = classNames({ + [css.messageActionContainer]: true, [css.messageActionButtons]: true, [css.messageActionButtonsViewer]: isViewer, [css.messageActionButtonsNonViewer]: !isViewer, }); return ( -
+
{sidebarButton} {replyButton}