diff --git a/web/chat/inline-engagement.css b/web/chat/inline-engagement.css index 35f812450..db7082bed 100644 --- a/web/chat/inline-engagement.css +++ b/web/chat/inline-engagement.css @@ -1,74 +1,73 @@ div.inlineEngagementContainer { display: flex; flex-direction: row; align-items: center; } div.centerContainer { justify-content: center; } div.leftContainer { justify-content: flex-start; position: relative; top: -10px; left: 44px; margin-right: 44px; } div.rightContainer { justify-content: flex-end; position: relative; top: -10px; right: 30px; margin-left: 31px; } a.sidebarContainer, 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: 4px 8px; border-radius: 8px; display: flex; align-items: center; gap: 4px; } a.sidebarContainer:hover, a.reactionsContainer:hover { background: var(--inline-engagement-bg-hover); } div.unread { font-weight: bold; } svg.inlineEngagementIcon { color: #666666; } div.messageLabel { display: flex; flex-shrink: 0; + /* This is the height of the sidebar/reaction pills */ + height: 29px; } div.messageLabel > span { font-size: 12px; padding: 0 3px; color: var(--message-label-color); + align-self: center; } div.messageLabelLeft { margin-left: 8px; margin-right: 4px; } div.messageLabelRight { margin-right: 12px; margin-left: 4px; } - -div.onlyMessageLabel { - margin-top: 8px; -} diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js index c9eb02bc9..e1e785aa2 100644 --- a/web/chat/inline-engagement.react.js +++ b/web/chat/inline-engagement.react.js @@ -1,126 +1,126 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; import { getInlineEngagementSidebarText } from 'lib/shared/inline-engagement-utils.js'; import { stringForReactionList } from 'lib/shared/reaction-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import css from './inline-engagement.css'; import CommIcon from '../CommIcon.react.js'; import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js'; import { useOnClickThread } from '../selectors/thread-selectors.js'; type Props = { +sidebarThreadInfo: ?ThreadInfo, +reactions?: ReactionInfo, +positioning: 'left' | 'center' | 'right', +label?: ?string, }; function InlineEngagement(props: Props): React.Node { const { sidebarThreadInfo, reactions, positioning, label } = props; const { pushModal, popModal } = useModalContext(); const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo); - const containerClasses = classNames([ - css.inlineEngagementContainer, - { - [css.leftContainer]: positioning === 'left', - [css.centerContainer]: positioning === 'center', - [css.rightContainer]: positioning === 'right', - }, - ]); + const isLeft = positioning === 'left'; + + const labelClasses = classNames({ + [css.messageLabel]: true, + [css.messageLabelLeft]: isLeft, + [css.messageLabelRight]: !isLeft, + }); + const editedLabel = React.useMemo(() => { + if (!label) { + return null; + } + return ( +
+ {label} +
+ ); + }, [label, labelClasses]); const onClickSidebarInner = useOnClickThread(sidebarThreadInfo); const onClickSidebar = React.useCallback( (event: SyntheticEvent) => { popModal(); onClickSidebarInner(event); }, [popModal, onClickSidebarInner], ); const sidebarItem = React.useMemo(() => { if (!sidebarThreadInfo || !repliesText) { return null; } return ( {repliesText} ); }, [sidebarThreadInfo, repliesText, onClickSidebar]); const onClickReactions = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); if (!reactions) { return; } pushModal( , ); }, [popModal, pushModal, reactions], ); const reactionsList = React.useMemo(() => { if (!reactions || Object.keys(reactions).length === 0) { return null; } const reactionText = stringForReactionList(reactions); return ( {reactionText} ); }, [reactions, onClickReactions]); - const isLeft = positioning === 'left'; - const labelClasses = classNames({ - [css.messageLabel]: true, - [css.messageLabelLeft]: isLeft, - [css.messageLabelRight]: !isLeft, - [css.onlyMessageLabel]: !sidebarItem && !reactionsList, - }); - const editedLabel = React.useMemo(() => { - if (!label) { - return null; - } - return ( -
- {label} -
- ); - }, [label, labelClasses]); + const containerClasses = classNames([ + css.inlineEngagementContainer, + { + [css.leftContainer]: positioning === 'left', + [css.centerContainer]: positioning === 'center', + [css.rightContainer]: positioning === 'right', + }, + ]); let body; if (isLeft) { body = ( <> {editedLabel} {sidebarItem} {reactionsList} ); } else { body = ( <> {sidebarItem} {reactionsList} {editedLabel} ); } return
{body}
; } export default InlineEngagement;