badge, alert(dot) improvements

src/components/alert.style.js

@@ -17,9 +17,16 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.8
+        opacity: 0.5
       }
     },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      textColor: '--parent'
+    },
     {
       variant: 'error',
       directives: {

src/components/badge.style.js

@@ -6,8 +6,7 @@ export default {
     'Icon'
   ],
   variants: {
-    normal: '.neutral',
-    notification: '.notification'
+    notification: '.-notification'
   },
   defaultRules: [
     {

src/components/chat/chat.vue

@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>

src/components/chat_list_item/chat_list_item.vue

@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>

src/components/menu_item.style.js

@@ -6,7 +6,8 @@ export default {
     'Icon',
     'Input',
     'Border',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge'
   ],
   states: {
     hover: ':hover',

src/components/mobile_nav/mobile_nav.vue

@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,14 +37,14 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="panel mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
@@ -54,7 +54,7 @@
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
-            class="badge badge-notification unseen-count"
+            class="badge -notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
         </span>
         <span class="spacer" />
@@ -165,19 +165,6 @@
     display: flex;
   }
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .mobile-notifications-drawer {
     width: 100%;
     height: 100vh;
@@ -238,10 +225,6 @@
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
 
     .notifications {
       padding: 0;

src/components/navigation/navigation_entry.vue

@@ -34,7 +34,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -100,5 +100,9 @@
       margin-right: -0.8em;
     }
   }
+
+  .badge {
+     margin: 0 0.8em;
+  }
 }
 </style>

src/components/navigation/navigation_pins.vue

@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge alert-dot"
+        class="badge -dot -notification"
       />
     </router-link>
   </span>
@@ -36,17 +36,6 @@
   overflow: hidden;
   height: 100%;
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 0.5em;
-    width: 0.5em;
-    position: absolute;
-    right: calc(50% - 0.75em);
-    top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .pinned-item {
     position: relative;
     flex: 1 0 3em;

src/components/notifications/notifications.vue

@@ -18,7 +18,7 @@
             {{ $t('notifications.notifications') }}
             <span
               v-if="unseenCountBadgeText"
-              class="badge badge-notification unseen-count"
+              class="badge -notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
           </div>
           <div

src/components/settings_modal/tabs/theme_tab/preview.vue

@@ -5,7 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
         </div>

src/components/side_drawer/side_drawer.vue

@@ -82,7 +82,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -111,7 +111,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ followRequestCount }}
             </span>
@@ -205,7 +205,7 @@
             /> {{ $t("nav.announcements") }}
             <span
               v-if="unreadAnnouncementCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadAnnouncementCount }}
             </span>

src/components/timeline/timeline.scss

@@ -1,17 +1,6 @@
 @import "../../variables";
 
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-  }
-
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;