Show unread marker for extra notifications

1 files changed, 32 insertions, 26 deletions

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 7e09e5cc..4f32c04f 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,30 +1,39 @@
 <template>
   <div class="ExtraNotifications">
-    <router-link
-      v-if="shouldShowChats"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
-    >
-      {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
-    </router-link>
-    <router-link
-      v-if="shouldShowAnnouncements"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'announcements' }"
-    >
-      {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
-    </router-link>
-    <router-link
-      v-if="shouldShowFollowRequests"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'friend-requests' }"
-    >
-      {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
-    </router-link>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowChats"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+      >
+        {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+      </router-link>
+    </div>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowAnnouncements"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'announcements' }"
+      >
+        {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+      </router-link>
+    </div>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowFollowRequests"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'friend-requests' }"
+      >
+        {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+      </router-link>
+    </div>
     <i18n-t
       v-if="shouldShowCustomizationTip"
       tag="span"
-      class="extra-notification tip"
+      class="notification tip"
       keypath="notifications.configuration_tip"
     >
       <template #theSettings>
@@ -58,12 +67,9 @@
   flex-direction: column;
   align-items: stretch;
 
-  .extra-notification {
+  .notification {
     width: 100%;
     padding: 1em;
-  }
-
-  .extra-notification {
     border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);