Fix dropdown notification color

Author: Blari

src/components/Notifications/Notifications.vue

@@ -5,42 +5,56 @@
         <strong>You have 13 notifications</strong>
       </div>
       <b-button-group id="notification-b-buttons">
-        <b-button variant="default" @click="changeNotificationsTab(1)">Notifications</b-button>
-        <b-button variant="default" @click="changeNotificationsTab(2)">Messages</b-button>
-        <b-button variant="default" @click="changeNotificationsTab(3)">Progress</b-button>
+        <b-button variant="default" @click="changeNotificationsTab(1)"
+          >Notifications</b-button
+        >
+        <b-button variant="default" @click="changeNotificationsTab(2)"
+          >Messages</b-button
+        >
+        <b-button variant="default" @click="changeNotificationsTab(3)"
+          >Progress</b-button
+        >
       </b-button-group>
     </header>
     <NewNotifictionsList v-if="newNotifications" />
     <NotifictionsList v-else-if="notificationsTabSelected === 1" />
     <Messages v-else-if="notificationsTabSelected === 2" />
     <Progress v-else-if="notificationsTabSelected === 3" />
-    <NotifictionsList v-else/>
+    <NotifictionsList v-else />
     <footer class="cardFooter text-sm card-footer">
       <span class="fs-mini">Synced at: 21 Apr 2014 18:36</span>
       <b-button
         variant="link"
         @click="loadNotifications"
-        :class="{disabled: isLoad, 'btnNotificationsReload btn-xs float-right py-0': true}"
+        :class="{
+          disabled: isLoad,
+          'btnNotificationsReload btn-xs float-right py-0': true,
+        }"
       >
-        <span v-if="isLoad"><i class="la la-refresh la-spin" /> Loading...</span>
+        <span v-if="isLoad"
+          ><i class="la la-refresh la-spin" /> Loading...</span
+        >
         <i v-else class="la la-refresh" />
       </b-button>
     </footer>
   </section>
 </template>
 
 <script>
-import Vue from 'vue';
+import Vue from "vue";
 
-import NotifictionsList from './NotificationsDemo/NotificationsList';
-import NewNotifictionsList from './NotificationsDemo/NewNotificationsList';
-import Messages from './NotificationsDemo/Messages';
-import Progress from './NotificationsDemo/Progress';
+import NotifictionsList from "./NotificationsDemo/NotificationsList";
+import NewNotifictionsList from "./NotificationsDemo/NewNotificationsList";
+import Messages from "./NotificationsDemo/Messages";
+import Progress from "./NotificationsDemo/Progress";
 
 export default {
-  name: 'Notification',
+  name: "Notification",
   components: {
-    NotifictionsList, NewNotifictionsList, Messages, Progress,
+    NotifictionsList,
+    NewNotifictionsList,
+    Messages,
+    Progress,
   },
   data() {
     return {
@@ -51,15 +65,16 @@ export default {
   },
   methods: {
     changeNotificationsTab(tab) {
-      Vue.set(this, 'notificationsTabSelected', tab);
-      Vue.set(this, 'newNotifications', null);
+      Vue.set(this, "notificationsTabSelected", tab);
+      Vue.set(this, "newNotifications", null);
     },
     loadNotifications() {
-      Vue.set(this, 'isLoad', true);
+      Vue.set(this, "isLoad", true);
 
       setTimeout(() => {
-        Vue.set(this, 'newNotifications', 'new notifications component');
-        Vue.set(this, 'isLoad', false);
+        Vue.set(this, "newNotifications", "new notifications component");
+        Vue.set(this, "isLoad", false);
+        this.changeNotificationsTab(1);
       }, 1500);
     },
   },

src/components/Notifications/NotificationsDemo/Messages.vue

@@ -1,17 +1,27 @@
 <template>
   <b-list-group class="listGroup thin-scroll">
-    <b-list-group-item class="listGroupItem bg-warning-light">
+    <b-list-group-item class="listGroupItem bg-primary-light">
       <span class="notificationIcon thumb-sm">
-        <img class="rounded-circle" src="../../../assets/people/a2.jpg" alt="..." />
+        <img
+          class="rounded-circle"
+          src="../../../assets/people/a2.jpg"
+          alt="..."
+        />
         <i class="status status-bottom bg-success" />
       </span>
       <time class="text-link help float-right">10 sec ago</time>
       <h6 class="m-0 fw-bold mb-1">Chris Gray</h6>
-      <p class="deemphasize text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
+      <p class="deemphasize text-ellipsis m-0">
+        Hey! What&apos;s up? So many times since we
+      </p>
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
       <span class="notificationIcon thumb-sm">
-        <img class="rounded-circle" src="../../../assets/people/a5.jpg" alt="..." />
+        <img
+          class="rounded-circle"
+          src="../../../assets/people/a5.jpg"
+          alt="..."
+        />
         <i class="status status-bottom bg-success" />
       </span>
       <time class="text-link help float-right">2 min ago</time>
@@ -22,16 +32,26 @@
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
       <span class="notificationIcon thumb-sm">
-        <img class="rounded-circle" src="../../../assets/people/a1.jpg" alt="..." />
+        <img
+          class="rounded-circle"
+          src="../../../assets/people/a1.jpg"
+          alt="..."
+        />
         <i class="status status-bottom bg-warning" />
       </span>
       <time class="text-link help float-right">9 min ago</time>
       <h6 class="m-0 mb-1">Livia Walsh</h6>
-      <p class="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
+      <p class="deemphasize text-ellipsis m-0">
+        Check out my latest email plz!
+      </p>
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
       <span class="notificationIcon thumb-sm">
-        <img class="rounded-circle" src="../../../assets/people/a6.jpg" alt="..." />
+        <img
+          class="rounded-circle"
+          src="../../../assets/people/a6.jpg"
+          alt="..."
+        />
         <i class="status status-bottom bg-danger" />
       </span>
       <time class="text-link help float-right">12:56 AM</time>
@@ -40,7 +60,11 @@
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
       <span class="notificationIcon thumb-sm">
-        <img class="rounded-circle" src="../../../assets/people/a4.jpg" alt="..." />
+        <img
+          class="rounded-circle"
+          src="../../../assets/people/a4.jpg"
+          alt="..."
+        />
         <i class="status status-bottom bg-gray-light" />
       </span>
       <time class="text-link help float-right">Yesterday</time>
@@ -51,21 +75,26 @@
     </b-list-group-item>
     <b-list-group-item class="listGroupItem">
       <span class="notificationIcon thumb-sm">
-        <img class="rounded-circle" src="../../../assets/people/a6.jpg" alt="..." />
+        <img
+          class="rounded-circle"
+          src="../../../assets/people/a6.jpg"
+          alt="..."
+        />
         <i class="status status-bottom bg-success" />
       </span>
       <time class="text-link help float-right">Apr 23</time>
       <h6 class="m-0 mb-1">Freda Edison</h6>
       <p class="deemphasize text-ellipsis m-0">
-        Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna join?
+        Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna
+        join?
       </p>
     </b-list-group-item>
   </b-list-group>
 </template>
 
 <script>
 export default {
-  name: 'Messages',
+  name: "Messages",
 };
 </script>
 

src/styles/_utils.scss

@@ -314,11 +314,11 @@ $z-index-variants: (more: 1, less: -1, '10': 10, '-10': -10);
 
 @include keyframes('bg-attention') {
   0% {
-    background-color: lighten(theme-color('warning'), 43%);
+    background-color: lighten(theme-color('primary'), 63%);
   }
 
   5% {
-    background-color: lighten(theme-color('warning'), 33%);
+    background-color: lighten(theme-color('primary'), 53%);
   }
 
   0% {