add template for critical logs

1 files changed, 69 insertions, 28 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index b24fef86..3cb7adb0 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -126,7 +126,7 @@
               <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
             </b-button>
           </li>
-          <li class="nav-item">
+          <li class="nav-item notifications">
             <b-dropdown id="app-notifications" variant="link" right>
               <template #button-content>
                 <icon-notification :title="$t('appHeader.titleNotification')" />
@@ -135,8 +135,18 @@
                 id="dropdown-group-1"
                 :header="$t('appHeader.titleCritical')"
               >
-                <b-dropdown-item v-for="(log, index) in okLogs" :key="index"
-                  >{{ log.name }}
+                <b-dropdown-item v-for="(log, index) in okLogs" :key="index">
+                  <img
+                    class="status-icon"
+                    src="@/assets/images/notifications/critical.svg"
+                  />
+                  <div class="notification-item">
+                    <span>{{ log.name | truncate(28, '...') }}</span>
+                    <span class="notification-desc">{{
+                      log.description | truncate(28, '...')
+                    }}</span>
+                  </div>
+                  <img src="@/assets/images/notifications/right-arrow.svg" />
                 </b-dropdown-item>
               </b-dropdown-group>
               <b-dropdown-divider></b-dropdown-divider>
@@ -485,33 +495,64 @@ export default {
   }
 }
 
-.dropdown-toggle::after {
-  display: none;
-}
+.notifications {
+  .dropdown-toggle::after {
+    display: none;
+  }
 
-.dropdown-menu {
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-}
+  .dropdown-menu {
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    width: 256px;
+  }
 
-.dropdown-header {
-  font-style: normal;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
-  text-transform: uppercase;
-  color: #0c1c29;
-  padding: 15px;
-}
-#dropdown-group-1 {
-  padding: 15px;
-}
+  .dropdown-header {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: #0c1c29;
+    padding: 15px 15px 0 15px;
+  }
+  #dropdown-group-1 {
+    padding: 15px;
+  }
 
-.dropdown-item {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  color: #0c1c29;
+  .notification-item {
+    display: flex;
+    flex-direction: column;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    color: #0c1c29;
+    white-space: normal;
+  }
+
+  .notification-desc {
+    font-style: normal;
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 16px;
+    color: rgba(12, 28, 41, 0.6);
+  }
+
+  .dropdown-item {
+    display: flex;
+    padding: 0.25rem;
+  }
+
+  .list-unstyled {
+    li {
+      margin-bottom: 5px;
+    }
+  }
+
+  .status-icon {
+    align-self: self-start;
+    padding-top: 3px;
+    margin-right: 6px;
+  }
 }
 </style>