diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss index 49fa27684..78ebdc9a5 100644 --- a/src/components/middle/message/CommentButton.scss +++ b/src/components/middle/message/CommentButton.scss @@ -111,6 +111,22 @@ } } + &.as-action-button { + position: static; + background-color: transparent; + + &:hover { + background-color: rgba(255, 255, 255, 0.08); + backdrop-filter: none; + filter: none; + } + + &::after { + top: 1.5rem; + bottom: auto; + } + } + &:hover { background: var(--hover-color); diff --git a/src/components/middle/message/CommentButton.tsx b/src/components/middle/message/CommentButton.tsx index 22a278c71..0d67c2b64 100644 --- a/src/components/middle/message/CommentButton.tsx +++ b/src/components/middle/message/CommentButton.tsx @@ -24,6 +24,7 @@ type OwnProps = { disabled?: boolean; isLoading?: boolean; isCustomShape?: boolean; + asActionButton?: boolean; }; const SHOW_LOADER_DELAY = 450; @@ -33,6 +34,7 @@ const CommentButton: FC = ({ threadInfo, disabled, isLoading, + asActionButton, }) => { const { openThread } = getActions(); @@ -100,6 +102,7 @@ const CommentButton: FC = ({ disabled && 'disabled', isCustomShape && 'CommentButton-custom-shape', isLoading && 'loading', + asActionButton && 'as-action-button', )} dir={lang.isRtl ? 'rtl' : 'ltr'} onClick={handleClick} diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 7f4059c42..c8228e9c1 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -1625,6 +1625,15 @@ const Message: FC = ({ isLoadingComments && 'message-action-buttons-shown', )} > + {withCommentButton && isCustomShape && ( + + )} {canForward && (