From 29e6ba8f10fb3ebeed9467e4b943bbb96fb2047b Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Thu, 14 Oct 2021 15:21:10 -0500
Subject: [PATCH] Left pane spacing tweaks

---
 stylesheets/_modules.scss                     | 38 +++++++++++++++----
 ts/components/LeftPane.tsx                    |  2 +-
 .../BaseConversationListItem.tsx              | 25 ++++++------
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 4f1a03ee2..52f861e15 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5628,6 +5628,11 @@ button.module-image__border-overlay:focus {
   padding-left: 10px;
   padding-right: 10px;
 
+  &--width-narrow {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
   &--scroll-behavior {
     &-default {
       @include smooth-scroll;
@@ -5646,8 +5651,8 @@ button.module-image__border-overlay:focus {
       line-height: $normal-row-height;
       text-align: center;
       width: 100%;
-      padding-left: 14px;
-      padding-right: 14px;
+      padding-left: 18px;
+      padding-right: 18px;
       display: flex;
 
       @include light-theme {
@@ -5745,7 +5750,8 @@ button.module-image__border-overlay:focus {
       width: 100%;
 
       .module-conversation-list--width-narrow & {
-        padding-right: 8px;
+        padding-left: 18px;
+        padding-right: 0;
       }
 
       &--is-button {
@@ -5795,11 +5801,13 @@ button.module-image__border-overlay:focus {
       }
 
       &__unread-count {
-        $size: 18px;
+        $size: 16px;
 
         @include font-caption-bold;
         border-radius: 10px;
         color: $color-white;
+        font-size: 10px;
+        font-weight: 500;
         height: $size;
         line-height: $size;
         margin-left: 10px;
@@ -5809,9 +5817,12 @@ button.module-image__border-overlay:focus {
         padding-right: 3px;
         text-align: center;
         word-break: normal;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         .module-conversation-list--width-narrow & {
-          margin-left: 0;
+          margin-left: 6px;
         }
 
         @include light-theme {
@@ -5820,6 +5831,18 @@ button.module-image__border-overlay:focus {
         @include dark-theme {
           background-color: $color-ultramarine-light;
         }
+
+        &--big {
+          font-size: 9px;
+          padding-right: 2px;
+
+          &::after {
+            content: '+';
+            display: inline-block;
+            font-size: 8px;
+            margin-bottom: 3px;
+          }
+        }
       }
 
       &__content {
@@ -5926,6 +5949,7 @@ button.module-image__border-overlay:focus {
 
           .module-conversation-list--width-narrow & {
             align-items: center;
+            justify-content: flex-start;
           }
 
           &__text {
@@ -6167,9 +6191,9 @@ button.module-image__border-overlay:focus {
         @include rounded-corners;
         display: block;
         height: 2px;
-        margin: 19px 0 19px 10px;
+        margin: 19px 0 19px 17px;
         padding-bottom: 0;
-        width: 56px;
+        width: 48px;
 
         // Hide the text, but keep it for screen readers.
         color: transparent;
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index d117b9b54..10609ebbd 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -51,7 +51,7 @@ import {
   SaveAvatarToDiskActionType,
 } from '../types/Avatar';
 
-const MIN_WIDTH = 119;
+const MIN_WIDTH = 109;
 const MIN_SNAP_WIDTH = 280;
 const MIN_FULL_WIDTH = 320;
 const MAX_WIDTH = 380;
diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
index 1b6d2e1b2..8dacfca16 100644
--- a/ts/components/conversationList/BaseConversationListItem.tsx
+++ b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -173,11 +173,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
                 </div>
               )}
               {messageStatusIcon}
-              {isUnread && (
-                <div className={`${BASE_CLASS_NAME}__unread-count`}>
-                  {formatUnreadCount(unreadCount)}
-                </div>
-              )}
+              {isUnread && <UnreadCount count={unreadCount} />}
             </div>
           ) : null}
         </div>
@@ -235,12 +231,15 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
   }
 );
 
-function formatUnreadCount(count: undefined | number): string {
-  if (!count) {
-    return '';
-  }
-  if (count >= 99) {
-    return '99+';
-  }
-  return String(count);
+function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
+  return (
+    <div
+      className={classNames(
+        `${BASE_CLASS_NAME}__unread-count`,
+        count > 99 && `${BASE_CLASS_NAME}__unread-count--big`
+      )}
+    >
+      {Boolean(count) && Math.min(count, 99)}
+    </div>
+  );
 }