Improve readability of unread indicator

signalapp · Oct 26, 2021 · 0f635af · 0f635af
1 parent d92911f
commit 0f635af
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -5166,18 +5166,18 @@ button.module-image__border-overlay:focus {
         }
       }
 
-      &__unread-count {
-        $size: 16px;
+      &__unread-indicator {
+        $size: 18px;
 
         @include font-caption-bold;
         border-radius: 10px;
+        box-sizing: content-box;
         color: $color-white;
-        font-size: 10px;
         font-weight: 500;
         height: $size;
         line-height: $size;
         margin-left: 10px;
-        margin-top: 2px;
+        margin-top: 1px;
         min-width: $size;
         padding-left: 3px;
         padding-right: 3px;
@@ -5189,6 +5189,7 @@ button.module-image__border-overlay:focus {
 
         .module-conversation-list--width-narrow & {
           margin-left: 6px;
+          box-sizing: border-box;
         }
 
         @include light-theme {
@@ -5198,22 +5199,26 @@ button.module-image__border-overlay:focus {
           background-color: $color-ultramarine-dawn;
         }
 
-        &--multiple-digits {
+        &--two-digits,
+        &--many {
           padding-left: 4px;
           padding-right: 4px;
         }
 
         &--many {
-          font-size: 9px;
-          padding-right: 2px;
+          font-size: 10px;
 
           &::after {
             content: '+';
             display: inline-block;
-            font-size: 8px;
-            margin-bottom: 3px;
+            font-size: 9px;
           }
         }
+
+        &--marked-unread {
+          padding-left: 0;
+          padding-right: 0;
+        }
       }
 
       &__content {

diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -175,7 +175,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
                 </div>
               )}
               {messageStatusIcon}
-              {isUnread && <UnreadCount count={unreadCount} />}
+              {isUnread && <UnreadIndicator count={unreadCount} />}
             </div>
           ) : null}
         </div>
@@ -233,14 +233,23 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
   }
 );
 
-function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
+function UnreadIndicator({ count = 0 }: Readonly<{ count?: number }>) {
+  let classModifier: undefined | string;
+  if (count > 99) {
+    classModifier = 'many';
+  } else if (count > 9) {
+    classModifier = 'two-digits';
+  } else if (count === 0) {
+    classModifier = 'marked-unread';
+  }
+
   return (
     <div
-      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,
-      })}
+      className={classNames(
+        `${BASE_CLASS_NAME}__unread-indicator`,
+        classModifier &&
+          `${BASE_CLASS_NAME}__unread-indicator--${classModifier}`
+      )}
     >
       {Boolean(count) && Math.min(count, 99)}
     </div>