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 @@ -1,6 +1,5 @@ // @flow -import classNames from 'classnames'; import * as React from 'react'; import { @@ -17,6 +16,7 @@ useDispatchActionPromise, } from 'lib/utils/action-utils'; +import Button from '../components/button.react'; import SWMansionIcon from '../SWMansionIcon.react'; import css from './chat-thread-list.css'; @@ -74,19 +74,22 @@ }`; const menuIconSize = renderStyle === 'chat' ? 24 : 16; - const btnCls = classNames(css.menuContent, { - [css.menuContentVisible]: menuVisible, - }); + + let btn = null; + if (menuVisible) { + btn = ( + + ); + } + return (
-
- -
+
{btn}
); } 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 @@ -160,6 +160,7 @@ .menu { position: relative; display: flex; + padding: 5px; justify-content: flex-end; } .menu > button { diff --git a/web/components/button.css b/web/components/button.css --- a/web/components/button.css +++ b/web/components/button.css @@ -32,3 +32,16 @@ border-radius: 50%; padding: 0; } + +.unread { + background: var(--unread-btn-bg); + color: var(--fg); + position: absolute; + z-index: 1; + font-size: var(--xs-font-12); + font-weight: var(--semi-bold); + top: 0; + right: 25px; + width: max-content; + padding: 10px; +} diff --git a/web/components/button.react.js b/web/components/button.react.js --- a/web/components/button.react.js +++ b/web/components/button.react.js @@ -8,7 +8,7 @@ type Props = { +onClick: (event: SyntheticEvent) => void, +children: React.Node, - +variant?: 'primary' | 'secondary' | 'danger' | 'round', + +variant?: 'primary' | 'secondary' | 'danger' | 'round' | 'unread', +type?: string, +disabled?: boolean, +className?: string, diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -96,4 +96,5 @@ --disconnected-bar-connecting-bg: var(--shades-white-70); --disconnected-bar-connecting-color: var(--shades-black-100); --permission-color: var(--shades-white-60); + --unread-btn-bg: var(--shades-black-80); }