Chore: Hover color for status dropdown (#1906)

app/javascript/dashboard/assets/scss/_animations.scss

@@ -54,8 +54,10 @@
   opacity: 0;
 }
 
-.menu-slide-enter-active, .menu-slide-leave-active {
+.menu-slide-enter-active,
-  transition: all .15s $ease-in-cubic;
+.menu-slide-leave-active {
+  transform: translateY(0);
+  transition: transform 0.25s $ease-in-cubic, opacity 0.15s $ease-in-cubic;
 }
 
 .menu-slide-enter, .menu-slide-leave-to

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -1,12 +1,14 @@
-.dropdown-pane.sleek {
+.dropdown-pane {
   @include elegant-card;
   @include border-light;
-  padding-left: 0;
+  z-index: 999;
-  padding-right: 0;
-  right: -12px;
-  top: 48px;
-  width: auto;
 
+  &.dropdown-pane--open {
+    display: block;
+    visibility: visible;
+  }
+
+  &.dropdowm--bottom {
     &::before {
       @include arrow(top, var(--color-border-light), 14px);
       position: absolute;
@@ -20,8 +22,21 @@
       right: var(--space-small);
       top: -12px;
     }
+  }
 
-  .dropdown>li>a:hover {
+  &.dropdowm--top {
-    background: var(--color-background);
+    &::before {
+      @include arrow(bottom, var(--color-border-light), 14px);
+      bottom: -14px;
+      position: absolute;
+      right: 6px;
+    }
+
+    &::after {
+      @include arrow(bottom, $color-white, var(--space-slab));
+      bottom: -12px;
+      position: absolute;
+      right: var(--space-small);
+    }
   }
 }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -68,21 +68,11 @@
   position: relative;
 
   .dropdown-pane {
-    @include elegant-card;
-    @include border-light;
     bottom: 6rem;
     display: block;
     left: 5rem;
     visibility: visible;
     width: 80%;
-    z-index: 999;
-
-    &::before {
-      @include arrow(bottom, $color-white, $space-slab);
-      bottom: -$space-slab;
-      position: absolute;
-      right: $space-slab;
-    }
   }
 
   .active {

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -15,25 +15,24 @@
         <div
           v-if="isStatusMenuOpened"
           v-on-clickaway="closeStatusMenu"
-          class="dropdown-pane top"
+          class="dropdown-pane dropdowm--top"
         >
-          <ul class="vertical dropdown menu">
+          <woot-dropdown-menu>
-            <li
+            <woot-dropdown-item
               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"
                 @click="changeAvailabilityStatus(status.value)"
               >
+                <span :class="`status-badge status-badge__${status.value}`" />
                 {{ status.label }}
               </button>
-            </li>
+            </woot-dropdown-item>
-          </ul>
+          </woot-dropdown-menu>
         </div>
       </transition>
 
@@ -47,9 +46,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+
 const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
 
 export default {
+  components: {
+    WootDropdownMenu,
+    WootDropdownItem,
+  },
+
   mixins: [clickaway],
 
   data() {
@@ -121,7 +128,7 @@ export default {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: $space-micro $space-smaller;
+  padding: var(--space-micro) var(--space-smaller);
 }
 
 .status-view {
@@ -129,10 +136,10 @@ export default {
   align-items: baseline;
 
   & &--title {
-    color: $color-gray;
+    color: var(--b-600);
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
-    font-weight: $font-weight-medium;
+    font-weight: var(--font-weight-medium);
-    margin-left: $space-small;
+    margin-left: var(--space-small);
 
     &:first-letter {
       text-transform: capitalize;
@@ -140,51 +147,44 @@ export default {
   }
 }
 
+.status-badge {
+  width: var(--space-one);
+  height: var(--space-one);
+  margin-right: var(--space-micro);
+  display: inline-block;
+  border-radius: 50%;
+
+  &__online {
+    background: var(--g-400);
+  }
+
+  &__offline {
+    background: var(--b-600);
+  }
+
+  &__busy {
+    background: var(--y-700);
+  }
+}
+
 .status-change {
   .dropdown-pane {
-    top: -130px;
+    top: -132px;
   }
 
   .status-items {
     display: flex;
     align-items: baseline;
   }
-
   & &--change-button {
-    color: $color-gray;
+    color: var(--b-600);
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
-    border-bottom: 1px solid $color-gray;
     cursor: pointer;
+    outline: none;
 
     &:hover {
-      border-bottom: none;
+      color: var(--w-600);
     }
   }
-
-  & &--dropdown-button {
-    font-weight: $font-weight-normal;
-    font-size: $font-size-small;
-    padding: $space-small $space-one;
-    text-align: left;
-    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>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -270,14 +270,6 @@ export default {
   padding: $space-small $space-one;
 }
 
-.dropdown-pane {
-  li {
-    a {
-      padding: $space-small $space-one !important;
-    }
-  }
-}
-
 .account-selector {
   cursor: pointer;
   padding: $space-small $space-large;

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -3,36 +3,36 @@
     <div
       v-if="show"
       v-on-clickaway="() => $emit('close')"
-      class="dropdown-pane top"
+      class="dropdown-pane dropdowm--top"
     >
-      <ul class="vertical dropdown menu">
+      <woot-dropdown-menu>
-        <li v-if="showChangeAccountOption">
+        <woot-dropdown-item v-if="showChangeAccountOption">
           <button
             class="button clear change-accounts--button"
             @click="$emit('toggle-accounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </button>
-        </li>
+        </woot-dropdown-item>
-        <li v-if="globalConfig.chatwootInboxToken">
+        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
           <button
             class="button clear change-accounts--button"
             @click="$emit('show-support-chat-window')"
           >
             Contact Support
           </button>
-        </li>
+        </woot-dropdown-item>
-        <li>
+        <woot-dropdown-item>
           <router-link :to="`/app/accounts/${accountId}/profile/settings`">
             {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
           </router-link>
-        </li>
+        </woot-dropdown-item>
-        <li>
+        <woot-dropdown-item>
           <a href="#" @click.prevent="logout">
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
           </a>
-        </li>
+        </woot-dropdown-item>
-      </ul>
+      </woot-dropdown-menu>
     </div>
   </transition>
 </template>
@@ -41,8 +41,14 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
 export default {
+  components: {
+    WootDropdownMenu,
+    WootDropdownItem,
+  },
   mixins: [clickaway],
   props: {
     show: {

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -12,31 +12,26 @@
     <div
       v-if="showConversationActions"
       v-on-clickaway="hideConversationActions"
-      class="dropdown-pane"
+      class="dropdown-pane dropdowm--bottom"
       :class="{ 'dropdown-pane--open': showConversationActions }"
     >
-      <button
+      <woot-dropdown-menu>
-        v-if="!currentChat.muted"
+        <woot-dropdown-item v-if="!currentChat.muted">
-        class="button small clear row alert small-6 action--button"
+          <button class="button clear alert " @click="mute">
-        @click="mute"
-      >
             <span>{{ $t('CONTACT_PANEL.MUTE_CONTACT') }}</span>
           </button>
-
+        </woot-dropdown-item>
-      <button
+        <woot-dropdown-item v-else>
-        v-else
+          <button class="button clear alert" @click="unmute">
-        class="button small clear row alert small-6 action--button"
-        @click="unmute"
-      >
             <span>{{ $t('CONTACT_PANEL.UNMUTE_CONTACT') }}</span>
           </button>
-
+        </woot-dropdown-item>
-      <button
+        <woot-dropdown-item>
-        class="button small clear row small-6 action--button"
+          <button class="button clear" @click="toggleEmailActionsModal">
-        @click="toggleEmailActionsModal"
-      >
             {{ $t('CONTACT_PANEL.SEND_TRANSCRIPT') }}
           </button>
+        </woot-dropdown-item>
+      </woot-dropdown-menu>
     </div>
     <email-transcript-modal
       v-if="showEmailActionsModal"
@@ -52,9 +47,13 @@ import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal';
 import ResolveAction from '../../buttons/ResolveAction';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
 export default {
   components: {
+    WootDropdownMenu,
+    WootDropdownItem,
     EmailTranscriptModal,
     ResolveAction,
   },
@@ -117,43 +116,13 @@ export default {
 }
 
 .dropdown-pane {
-  @include elegant-card;
-  @include border-light;
   right: -12px;
   top: 48px;
   width: auto;
-
-  &::before {
-    @include arrow(top, var(--color-border-light), 14px);
-    top: -14px;
-    position: absolute;
-    right: 6px;
 }
 
-  &::after {
-    @include arrow(top, white, var(--space-slab));
-    top: -12px;
-    position: absolute;
-    right: var(--space-small);
-  }
-}
-
-.dropdown-pane--open {
-  display: block;
-  visibility: visible;
-}
-
-.action--button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  white-space: nowrap;
-  padding: var(--space-small) var(--space-smaller);
-  font-size: var(--font-size-small);
-
 .icon {
   margin-right: var(--space-smaller);
   min-width: var(--space-normal);
 }
-}
 </style>

app/javascript/shared/components/ui/dropdown/DropdownItem.vue

@@ -0,0 +1,46 @@
+<template>
+  <li
+    class="dropdown-menu__item"
+    :class="{
+      'is-disabled': disabled,
+    }"
+    :tabindex="disabled ? null : -1"
+    :aria-disabled="disabled"
+  >
+    <slot></slot>
+  </li>
+</template>
+<script>
+export default {
+  name: 'WootDropdownItem',
+  componentName: 'WootDropdownMenu',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dropdown-menu__item ::v-deep {
+  a,
+  .button {
+    font-weight: var(--font-size-normal);
+    font-size: var(--font-size-small);
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+    padding: var(--space-small) var(--space-one);
+
+    &:hover {
+      background: var(--color-background);
+      border-radius: var(--border-radius-normal);
+    }
+  }
+}
+</style>

app/javascript/shared/components/ui/dropdown/DropdownMenu.vue

@@ -0,0 +1,21 @@
+<template>
+  <ul
+    class="dropdown menu vertical"
+    :class="[placement && `dropdown--${placement}`]"
+  >
+    <slot></slot>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'WootDropdownMenu',
+  componentName: 'WootDropdownMenu',
+
+  props: {
+    placement: {
+      type: String,
+      default: 'top',
+    },
+  },
+};
+</script>