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 (
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -28,7 +28,7 @@ background: var(--thread-active-bg); } -div.activeThread :is(div.dark, button, .lastMessage span.light, .title) { +div.activeThread :is(div.dark, .lastMessage span.light, .title) { color: var(--fg); } @@ -202,7 +202,6 @@ .menuContentVisible { display: block; } - button.menuContent { border: none; cursor: pointer; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -115,5 +115,7 @@ --account-settings-label: var(--shades-black-60); --account-button-color: var(--violet-dark-100); --chat-thread-list-menu-color: var(--shades-white-60); - --chat-thread-list-menu-bg: var(--shades-black-90); + --chat-thread-list-menu-bg: var(--shades-black-80); + --chat-thread-list-menu-active-color: var(--shades-white-60); + --chat-thread-list-menu-active-bg: var(--shades-black-90); }