badge, alert(dot) improvements

src/App.scss

@@ -634,11 +634,21 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.badge-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-    color: white;
-    color: var(--badgeNotificationText, white);
+  &.-dot {
+    border-radius: 100%;
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    line-height: 0;
+    margin: 0;
+    font-size: 0;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
   }
 }
 
@@ -646,39 +656,7 @@ option {
   margin: 0 0.35em;
   padding: 0 0.25em;
   border-radius: var(--roundness);
-
-  &.error {
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertErrorPanelText, $fallback--text);
-    }
-  }
-
-  &.warning {
-    background-color: $fallback--alertWarning;
-    background-color: var(--alertWarning, $fallback--alertWarning);
-    color: $fallback--text;
-    color: var(--alertWarningText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertWarningPanelText, $fallback--text);
-    }
-  }
-
-  &.success {
-    background-color: var(--alertSuccess, $fallback--alertWarning);
-    color: var(--alertSuccessText, $fallback--text);
-
-    .panel-heading & {
-      color: var(--alertSuccessPanelText, $fallback--text);
-    }
-  }
+  border: 1px solid var(--border);
 }
 
 .faint {

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

 @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;

src/services/style_setter/style_setter.js

@@ -24,9 +24,6 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css(themes3.eager).forEach(rule => {
     styleSheet.insertRule(rule, 'index-max')