diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index b0f6f4d7e5..e6e2d78ab1 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -4607,17 +4607,13 @@ button.module-image__border-overlay:focus { @include dark-theme { border-color: $color-gray-80; } - - &--two-digits, - &--many { - right: -(7px + $border-width); - } } } // We want this to just be the unread indicator selector, not a child of the parent. @at-root #{$unread-indicator-selector} { $size: 18px; + flex-shrink: 0; @include font-caption-bold; border-radius: 10px; @@ -4628,8 +4624,8 @@ button.module-image__border-overlay:focus { margin-left: 10px; margin-top: 1px; min-width: $size; - padding-left: 3px; - padding-right: 3px; + padding-left: 4px; + padding-right: 4px; text-align: center; word-break: normal; display: flex; @@ -4646,22 +4642,6 @@ button.module-image__border-overlay:focus { @include dark-theme { background-color: $color-ultramarine-dawn; } - - &--two-digits, - &--many { - padding-left: 4px; - padding-right: 4px; - } - - &--many { - font-size: 10px; - - &::after { - content: '+'; - display: inline-block; - font-size: 9px; - } - } } &__content { diff --git a/ts/components/ConversationList.stories.tsx b/ts/components/ConversationList.stories.tsx index 682a457318..ec2412c6af 100644 --- a/ts/components/ConversationList.stories.tsx +++ b/ts/components/ConversationList.stories.tsx @@ -398,7 +398,7 @@ ConversationMessageRequest.story = { export function ConversationsUnreadCount(): JSX.Element { return ( ({ + rows={[4, 10, 34, 250, 2048].map(unreadCount => ({ type: RowType.Conversation, conversation: createConversation({ lastMessage: { diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx index 9ab75160fb..097e504307 100644 --- a/ts/components/conversationList/BaseConversationListItem.tsx +++ b/ts/components/conversationList/BaseConversationListItem.tsx @@ -310,22 +310,9 @@ function UnreadIndicator({ return null; } - let classModifier: undefined | string; - if (count > 99) { - classModifier = 'many'; - } else if (count > 9) { - classModifier = 'two-digits'; - } - return ( -
- {Boolean(count) && Math.min(count, 99)} +
+ {Boolean(count) && count}
); }