diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js --- a/web/modals/threads/subchannels/subchannel.react.js +++ b/web/modals/threads/subchannels/subchannel.react.js @@ -1,5 +1,6 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react'; @@ -26,6 +27,13 @@ lastUpdatedTimeIncludingSidebars, } = chatThreadItem; + const { unread } = threadInfo.currentUser; + + const subchannelTitleClassName = classNames({ + [css.subchannelInfo]: true, + [css.unread]: unread, + }); + const timeZone = useSelector(state => state.timeZone); const { popModal } = useModalContext(); @@ -65,7 +73,7 @@ return ( <Button className={css.subchannelContainer} onClick={onClickThread}> <SWMansionIcon icon="message-square" size={22} /> - <div className={css.subchannelInfo}> + <div className={subchannelTitleClassName}> <div className={css.longTextEllipsis}>{threadInfo.uiName}</div> <div className={css.lastMessage}>{lastMessage}</div> </div> diff --git a/web/modals/threads/subchannels/subchannels-modal.css b/web/modals/threads/subchannels/subchannels-modal.css --- a/web/modals/threads/subchannels/subchannels-modal.css +++ b/web/modals/threads/subchannels/subchannels-modal.css @@ -32,6 +32,11 @@ overflow: hidden; } +div.unread { + color: var(--fg); + font-weight: var(--semi-bold); +} + div.longTextEllipsis { align-self: flex-start; text-overflow: ellipsis;