From 554ca1a4f4ba64a19fe3f89fc12c7156abca2f6b Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Mon, 11 Jan 2021 10:43:39 -0500
Subject: [PATCH] two digits and up smaller notif bubble txt

---
 ui/component/notificationBubble/view.jsx | 8 +++++++-
 ui/scss/component/_notification.scss     | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/component/notificationBubble/view.jsx b/ui/component/notificationBubble/view.jsx
index c228b0397..63f646c5a 100644
--- a/ui/component/notificationBubble/view.jsx
+++ b/ui/component/notificationBubble/view.jsx
@@ -22,7 +22,13 @@ export default function NotificationHeaderButton(props: Props) {
         'notification__bubble--inline': inline,
       })}
     >
-      <span className="notification__count">{unreadCount > 20 ? '20+' : unreadCount}</span>
+      <span
+        className={classnames('notification__count', {
+          'notification__bubble--small': unreadCount > 9,
+        })}
+      >
+        {unreadCount > 20 ? '20+' : unreadCount}
+      </span>
     </span>
   );
 }
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index 1a20a32f6..8fcde069f 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -175,6 +175,10 @@ $contentMaxWidth: 35rem;
   justify-content: center;
 }
 
+.notification__bubble--small {
+  font-size: var(--font-xsmall);
+}
+
 .notification__bubble--inline {
   @extend .notification__bubble;
   top: 0.75rem;