From 9d27ba6c104b2b93ae83f16de1128d7295eedbab Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 1 Sep 2018 13:24:02 -0700
Subject: [PATCH] tweak design of notification digits (#528)

---
 routes/_components/NavItem.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/routes/_components/NavItem.html b/routes/_components/NavItem.html
index 3c2ba00..d5166d2 100644
--- a/routes/_components/NavItem.html
+++ b/routes/_components/NavItem.html
@@ -10,7 +10,7 @@
         <use xlink:href={svg} />
       </svg>
       {#if $hasNotifications}
-      <span class="nav-link-notifications" aria-hidden="true">
+      <span class="nav-link-notifications nav-link-notifications-digits-{notificationDigits}" aria-hidden="true">
           {$numberOfNotifications}
         </span>
       {/if}
@@ -70,8 +70,13 @@
     background: var(--nav-svg-fill);
     color: var(--nav-bg);
     border-radius: 100%;
-    font-size: 0.9em;
-    margin: 3px 0;
+    font-size: 0.8em;
+    margin: 0 0 3px;
+    font-weight: 600;
+  }
+
+  .nav-link-notifications-digits-2, .nav-link-notifications-digits-3 {
+    font-size: 0.7em;
   }
 
   .main-nav-link.selected {
@@ -144,7 +149,7 @@
     }
     .nav-link-notifications {
       transform: translate(15px, 7px);
-      margin: 3px 1px 4px;
+      margin: 2px 1px 4px;
     }
   }
 </style>
@@ -201,7 +206,10 @@
           res += ` (${$numberOfNotifications})`
         }
         return res
-      }
+      },
+      notificationDigits: ({ $numberOfNotifications }) => (
+        $numberOfNotifications.toString().length
+      )
     },
     methods: {
       onClick (e) {