From 755b5492711da5bf33d1e81043945d36e8c045d0 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Tue, 19 Oct 2021 08:53:30 -0500
Subject: [PATCH] More chat list unread count tweaks

---
 stylesheets/_modules.scss                                | 7 ++++++-
 ts/components/ConversationList.stories.tsx               | 2 +-
 .../conversationList/BaseConversationListItem.tsx        | 9 +++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 125d0dde89e7..5242981f7af9 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5832,7 +5832,12 @@ button.module-image__border-overlay:focus {
           background-color: $color-ultramarine-light;
         }
 
-        &--big {
+        &--multiple-digits {
+          padding-left: 4px;
+          padding-right: 4px;
+        }
+
+        &--many {
           font-size: 9px;
           padding-right: 2px;
 
diff --git a/ts/components/ConversationList.stories.tsx b/ts/components/ConversationList.stories.tsx
index 609c8e3449db..fc64b1dd8f16 100644
--- a/ts/components/ConversationList.stories.tsx
+++ b/ts/components/ConversationList.stories.tsx
@@ -327,7 +327,7 @@ story.add('Contact checkboxes: disabled', () => (
   story.add('Conversations: unread count', () => (
     <ConversationList
       {...createProps(
-        [4, 10, 250].map(unreadCount => ({
+        [4, 10, 34, 250].map(unreadCount => ({
           type: RowType.Conversation,
           conversation: createConversation({
             lastMessage: {
diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
index 8dacfca16e91..cdadcb291853 100644
--- a/ts/components/conversationList/BaseConversationListItem.tsx
+++ b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -234,10 +234,11 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
 function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
   return (
     <div
-      className={classNames(
-        `${BASE_CLASS_NAME}__unread-count`,
-        count > 99 && `${BASE_CLASS_NAME}__unread-count--big`
-      )}
+      className={classNames(`${BASE_CLASS_NAME}__unread-count`, {
+        [`${BASE_CLASS_NAME}__unread-count--multiple-digits`]:
+          count > 9 && count <= 99,
+        [`${BASE_CLASS_NAME}__unread-count--many`]: count > 99,
+      })}
     >
       {Boolean(count) && Math.min(count, 99)}
     </div>