From 08e6e6664218d20cf3dd1b00823720505fb08fe7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 2 Nov 2020 20:51:38 +0200
Subject: [PATCH 1/5] fix chat badge and unify styles across all badges
 including follow request count.

---
 src/App.scss                                  | 21 ++++++++++-------
 .../chat_list_item/chat_list_item.vue         | 12 +++++-----
 src/components/nav_panel/nav_panel.vue        | 23 +++----------------
 src/components/side_drawer/side_drawer.vue    | 11 ++-------
 4 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1800d816..ca7d33cd 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -603,19 +603,24 @@ nav {
     flex-grow: 0;
   }
 }
+
 .badge {
+  box-sizing: border-box;
   display: inline-block;
   border-radius: 99px;
-  min-width: 22px;
-  max-width: 22px;
-  min-height: 22px;
-  max-height: 22px;
-  font-size: 15px;
-  line-height: 22px;
-  text-align: center;
+  max-width: 10em;
+  min-width: 1.7em;
+  height: 1.3em;
+  padding: 0.15em 0.15em;
   vertical-align: middle;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 0.9em;
+  line-height: 1;
+  text-align: center;
   white-space: nowrap;
-  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &.badge-notification {
     background-color: $fallback--cRed;
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 1f8ecdf6..cd3f436e 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -21,6 +21,12 @@
           />
         </span>
         <span class="heading-right" />
+        <div class="time-wrapper">
+          <Timeago
+            :time="chat.updated_at"
+            :auto-update="60"
+          />
+        </div>
       </div>
       <div class="chat-preview">
         <StatusContent
@@ -35,12 +41,6 @@
         </div>
       </div>
     </div>
-    <div class="time-wrapper">
-      <Timeago
-        :time="chat.updated_at"
-        :auto-update="60"
-      />
-    </div>
   </div>
 </template>
 
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0f02a681..0c83d0fe 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -27,7 +27,7 @@
           <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
             <div
               v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
             >
               {{ unreadChatCount }}
             </div>
@@ -47,7 +47,7 @@
             />{{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
             >
               {{ followRequestCount }}
             </span>
@@ -84,12 +84,6 @@
     padding: 0;
   }
 
-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
-  }
-
   li {
     position: relative;
     border-bottom: 1px solid;
@@ -156,21 +150,10 @@
     margin-right: 0.8em;
   }
 
-  .unread-chat-count {
-    font-size: 0.9em;
-    font-weight: bolder;
-    font-style: normal;
+  .badge {
     position: absolute;
     right: 0.6rem;
     top: 1.25em;
-    padding: 0 0.3em;
-    min-width: 1.3rem;
-    min-height: 1.3rem;
-    max-height: 1.3rem;
-    line-height: 1.3rem;
-    max-width: 10em;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }
 </style>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index ed1ccb7d..149f11cb 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -70,7 +70,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -99,7 +99,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
             >
               {{ followRequestCount }}
             </span>
@@ -271,13 +271,6 @@
   --faintLink: var(--popoverFaintLink, $fallback--faint);
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
-
-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
-  }
-
 }
 
 .side-drawer-logo-wrapper {

From bdf2f36f11a0768dd21c28ba149de4d5e4cc2ad5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 2 Nov 2020 20:57:56 +0200
Subject: [PATCH 2/5] fix chat heading not being aligned and using wrong styles

---
 src/components/chat/chat.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 787514c8..4abd94a1 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -138,11 +138,15 @@
     }
 
     .chat-view-heading {
+      box-sizing: border-box;
       position: static;
       z-index: 9999;
       top: 0;
       margin-top: 0;
       border-radius: 0;
+      background: linear-gradient(to top, var(--panel), var(--panel)),
+                  linear-gradient(to top, var(--bg), var(--bg));
+      height: 50px;
     }
 
     .scrollable-message-list {

From b6a8ca44ef84b6fb78958a2af3bffd467804a061 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 2 Nov 2020 21:08:22 +0200
Subject: [PATCH 3/5] added comment

---
 src/components/chat/chat.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 4abd94a1..aef58495 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -144,8 +144,14 @@
       top: 0;
       margin-top: 0;
       border-radius: 0;
-      background: linear-gradient(to top, var(--panel), var(--panel)),
-                  linear-gradient(to top, var(--bg), var(--bg));
+
+      /* This practically overlays the panel heading color over panel background
+       * color. This is needed because we allow transparent panel background and
+       * it doesn't work well in this "disjointed panel header" case
+       */
+      background:
+        linear-gradient(to top, var(--panel), var(--panel)),
+        linear-gradient(to top, var(--bg), var(--bg));
       height: 50px;
     }
 

From 979efb301a4bfdd1c120b2a764430f7388503fc0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 3 Nov 2020 11:35:55 +0200
Subject: [PATCH 4/5] fix mobile navbar hitboxes

---
 src/components/mobile_nav/mobile_nav.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6651fc8e..5304a500 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -110,12 +110,23 @@
   }
 
   .mobile-nav-button {
+    display: inline-block;
     text-align: center;
-    margin: 0 1em;
+    padding: 0 1em;
     position: relative;
     cursor: pointer;
   }
 
+  .site-name {
+    padding: 0 .3em;
+    display: inline-block;
+  }
+
+  .item {
+    /* moslty just to get rid of extra whitespaces */
+    display: flex;
+  }
+
   .alert-dot {
     border-radius: 100%;
     height: 8px;

From 4e4b258c547fd4dba2be02aa66a1fd3aa2bb58ef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 3 Nov 2020 18:45:23 +0200
Subject: [PATCH 5/5] fix mobile badge alignment

---
 src/components/side_drawer/side_drawer.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 149f11cb..28c888fe 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -271,6 +271,12 @@
   --faintLink: var(--popoverFaintLink, $fallback--faint);
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
+
+  .badge {
+    position: absolute;
+    right: 0.7rem;
+    top: 1em;
+  }
 }
 
 .side-drawer-logo-wrapper {