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 {
-  transition: all .15s $ease-in-cubic;
+.menu-slide-enter-active,
+.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,27 +1,42 @@
-.dropdown-pane.sleek {
+.dropdown-pane {
   @include elegant-card;
   @include border-light;
-  padding-left: 0;
-  padding-right: 0;
-  right: -12px;
-  top: 48px;
-  width: auto;
+  z-index: 999;
 
-  &::before {
-    @include arrow(top, var(--color-border-light), 14px);
-    position: absolute;
-    right: 6px;
-    top: -14px;
+  &.dropdown-pane--open {
+    display: block;
+    visibility: visible;
   }
 
-  &::after {
-    @include arrow(top, $color-white, var(--space-slab));
-    position: absolute;
-    right: var(--space-small);
-    top: -12px;
+  &.dropdowm--bottom {
+    &::before {
+      @include arrow(top, var(--color-border-light), 14px);
+      position: absolute;
+      right: 6px;
+      top: -14px;
+    }
+
+    &::after {
+      @include arrow(top, $color-white, var(--space-slab));
+      position: absolute;
+      right: var(--space-small);
+      top: -12px;
+    }
   }
 
-  .dropdown>li>a:hover {
-    background: var(--color-background);
+  &.dropdowm--top {
+    &::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 {