Use neutral badge for drafts

src/App.scss

@@ -703,6 +703,13 @@ option {
     color: white;
     color: var(--badgeNotificationText, white);
   }
+
+  &.badge-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+    color: white;
+    color: var(--badgeNeutralText, white);
+  }
 }
 
 .alert {

src/components/navigation/navigation.js

@@ -56,6 +56,7 @@ export const ROOT_ITEMS = {
     route: 'chats',
     icon: 'comments',
     label: 'nav.chats',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadChatCount',
     criteria: ['chats']
   },
@@ -63,6 +64,7 @@ export const ROOT_ITEMS = {
     route: 'friend-requests',
     icon: 'user-plus',
     label: 'nav.friend_requests',
+    badgeStyle: 'notification',
     criteria: ['lockedUser'],
     badgeGetter: 'followRequestCount'
   },
@@ -76,6 +78,7 @@ export const ROOT_ITEMS = {
     route: 'announcements',
     icon: 'bullhorn',
     label: 'nav.announcements',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
   },
@@ -83,6 +86,7 @@ export const ROOT_ITEMS = {
     route: 'drafts',
     icon: 'file-pen',
     label: 'nav.drafts',
+    badgeStyle: 'neutral',
     badgeGetter: 'draftCount'
   }
 }

src/components/navigation/navigation_entry.vue

@@ -35,7 +35,8 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge"
+        :class="[`badge-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>

src/components/navigation/navigation_pins.vue

@@ -19,6 +19,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="alert-dot"
+        :class="[`alert-dot-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -42,8 +43,16 @@
     position: absolute;
     right: calc(50% - 0.75em);
     top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
+
-    background-color: var(--badgeNotification, $fallback--cRed);
+    &.alert-dot-notification {
+      background-color: $fallback--cRed;
+      background-color: var(--badgeNotification, $fallback--cRed);
+    }
+
+    &.alert-dot-neutral {
+      background-color: $fallback--cGreen;
+      background-color: var(--badgeNeutral, $fallback--cGreen);
+    }
   }
 
   .pinned-item {

src/components/side_drawer/side_drawer.vue

@@ -225,7 +225,7 @@
             /> {{ $t('nav.drafts') }}
             <span
               v-if="draftCount"
-              class="badge badge-notification"
+              class="badge badge-neutral"
             >
               {{ draftCount }}
             </span>