From afa234a207cb7a8a4aba6f1840e6f95194c0240f Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 4 Nov 2020 12:23:44 +0530
Subject: [PATCH] feat: Add status color for items in availability status menu
 (#1380)

---
 .../components/layout/AvailabilityStatus.vue  | 53 +++++++++++--------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index b60932c5f..6ab70b79f 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -2,9 +2,7 @@
   <div class="status">
     <div class="status-view">
       <div
-        :class="
-          `status-view--badge status-view--badge__${currentUserAvailabilityStatus}`
-        "
+        :class="`status-badge status-badge__${currentUserAvailabilityStatus}`"
       />
 
       <div class="status-view--title">
@@ -20,7 +18,13 @@
           class="dropdown-pane top"
         >
           <ul class="vertical dropdown menu">
-            <li v-for="status in availabilityStatuses" :key="status.value">
+            <li
+              v-for="status in availabilityStatuses"
+              :key="status.value"
+              class="status-items"
+            >
+              <div :class="`status-badge status-badge__${status.value}`" />
+
               <button
                 class="button clear status-change--dropdown-button"
                 :disabled="status.disabled"
@@ -112,24 +116,6 @@ export default {
   display: flex;
   align-items: baseline;
 
-  & &--badge {
-    width: $space-one;
-    height: $space-one;
-    border-radius: 50%;
-
-    &__online {
-      background: $success-color;
-    }
-
-    &__offline {
-      background: $color-gray;
-    }
-
-    &__busy {
-      background: $warning-color;
-    }
-  }
-
   & &--title {
     color: $color-gray;
     font-size: $font-size-small;
@@ -147,6 +133,11 @@ export default {
     top: -130px;
   }
 
+  .status-items {
+    display: flex;
+    align-items: baseline;
+  }
+
   & &--change-button {
     color: $color-gray;
     font-size: $font-size-small;
@@ -166,4 +157,22 @@ export default {
     width: 100%;
   }
 }
+
+.status-badge {
+  width: $space-one;
+  height: $space-one;
+  border-radius: 50%;
+
+  &__online {
+    background: $success-color;
+  }
+
+  &__offline {
+    background: $color-gray;
+  }
+
+  &__busy {
+    background: $warning-color;
+  }
+}
 </style>