diff --git a/web/chat/chat-thread-list-item-menu.css b/web/chat/chat-thread-list-item-menu.css --- a/web/chat/chat-thread-list-item-menu.css +++ b/web/chat/chat-thread-list-item-menu.css @@ -48,7 +48,10 @@ display: block; background-color: var(--chat-thread-list-menu-bg); } - +.menuContent.active { + color: var(--chat-thread-list-menu-active-color); + background: var(--chat-thread-list-menu-active-bg); +} .menuSidebar { padding-right: 2px; } @@ -59,6 +62,6 @@ padding: 8px; font-size: var(--xs-font-12); line-height: var(--line-height-text); + background: var(--chat-thread-list-menu-bg); color: var(--chat-thread-list-menu-color); - background-color: var(--chat-thread-list-menu-bg); } diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js --- a/web/chat/chat-thread-list-item-menu.react.js +++ b/web/chat/chat-thread-list-item-menu.react.js @@ -6,6 +6,7 @@ import useToggleUnreadStatus from 'lib/hooks/toggle-unread-status'; import type { ThreadInfo } from 'lib/types/thread-types'; +import { useThreadIsActive } from '../selectors/nav-selectors'; import SWMansionIcon from '../SWMansionIcon.react'; import css from './chat-thread-list-item-menu.css'; @@ -16,6 +17,7 @@ }; function ChatThreadListItemMenu(props: Props): React.Node { const { renderStyle = 'chat', threadInfo, mostRecentNonLocalMessage } = props; + const active = useThreadIsActive(threadInfo.id); const [menuVisible, setMenuVisible] = React.useState(false); const toggleMenu = React.useCallback(() => { setMenuVisible(!menuVisible); @@ -40,6 +42,7 @@ }); const btnCls = classNames(css.menuContent, { [css.menuContentVisible]: menuVisible, + [css.active]: active, }); return (