diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 12391f4ce3..bd21623a05 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -4501,7 +4501,8 @@ button.module-image__border-overlay:focus { @include dark-theme { background-color: $color-ultramarine-dawn; } - &--unread-messages { + &--unread-messages, + &--marked-unread { @include font-caption-bold; text-align: center; word-break: normal; diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx index cfbdd4f1e3..62bc87b00c 100644 --- a/ts/components/conversationList/BaseConversationListItem.tsx +++ b/ts/components/conversationList/BaseConversationListItem.tsx @@ -182,7 +182,9 @@ export const BaseConversationListItem: FunctionComponent = variant={UnreadIndicatorVariant.UNREAD_MESSAGES} count={unreadCount} /> - ) : null} + ) : ( + + )} ); })(); @@ -337,11 +339,15 @@ function Timestamp({ } enum UnreadIndicatorVariant { + MARKED_UNREAD = 'marked-unread', UNREAD_MESSAGES = 'unread-messages', UNREAD_MENTIONS = 'unread-mentions', } type UnreadIndicatorPropsType = + | { + variant: UnreadIndicatorVariant.MARKED_UNREAD; + } | { variant: UnreadIndicatorVariant.UNREAD_MESSAGES; count: number; @@ -352,6 +358,9 @@ function UnreadIndicator(props: UnreadIndicatorPropsType) { let content: React.ReactNode; switch (props.variant) { + case UnreadIndicatorVariant.MARKED_UNREAD: + content = null; + break; case UnreadIndicatorVariant.UNREAD_MESSAGES: content = props.count > 0 && props.count; break;