From 4cbdbbe4bdc9d99b3f7e6bf16275f07630aac9ca Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+sivin-git@users.noreply.github.com>
Date: Mon, 22 Feb 2021 10:52:50 +0530
Subject: [PATCH] chore: Changes the dropdown ui  (#1813)

* Changes the dropdown ui
---
 .../assets/scss/plugins/_multiselect.scss     | 79 ++++++++++++-------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 480e31c61..b7a27dff6 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -13,17 +13,16 @@
 }
 
 .multiselect {
-  margin-bottom: $space-normal;
-  min-height: 38px;
+  margin-bottom: var(--space-normal);
 
-  &.multiselect--active {
-    >.multiselect__tags {
+  .multiselect--active {
+    > .multiselect__tags {
       border-color: $color-woot;
     }
   }
 
   .multiselect__select {
-    min-height: 44px;
+    min-height: 4.6rem;
     padding: 0;
     right: 0;
     top: 0;
@@ -39,16 +38,51 @@
     font-weight: $font-weight-normal;
 
     &.multiselect__option--highlight {
-      font-weight: $font-weight-medium;
+      background: var(--white);
+      color: var(--color-body);
+    }
+
+    &.multiselect__option--highlight:hover {
+      background: var(--w-50);
+      color: var(--color-body);
+
+      &::after {
+        background: var(--w-50);
+        color: var(--s-600);
+      }
+    }
+
+    &.multiselect__option--highlight::after {
+      background: transparent;
+    }
+
+    &.multiselect__option--selected {
+      background: var(--w-400);
+      color: var(--white);
+
+      &.multiselect__option--highlight:hover {
+        background: var(--w-600);
+        color: var(--white);
+
+        &::after {
+          background: transparent;
+          color: var(--white);
+
+          &:hover {
+            color: var(--color-body);
+          }
+        }
+      }
     }
   }
-}
 
-.multiselect>.multiselect__tags {
-  @include margin(0);
-  border: 1px solid $color-border;
-  min-height: 44px;
-  padding-top: $zero;
+  .multiselect__tags {
+    @include margin(0);
+    border: 1px solid $color-border;
+    border-color: $color-border;
+    min-height: 4.4rem;
+    padding-top: $zero;
+  }
 
   .multiselect__tags-wrap {
     display: inline-block;
@@ -59,7 +93,7 @@
   .multiselect__placeholder {
     color: $color-gray;
     font-weight: $font-weight-normal;
-    padding-top: $space-small;
+    padding-top: var(--space-slab);
   }
 
   .multiselect__tag {
@@ -79,14 +113,13 @@
     @include ghost-input;
     @include padding($zero);
     font-size: $font-size-small;
-
+    height: 4.4rem;
     margin-bottom: $zero;
   }
 
   .multiselect__single {
-    @include padding($space-one);
-
     margin-bottom: 0;
+    padding: var(--space-slab) var(--space-one);
   }
 }
 
@@ -96,26 +129,18 @@
     .multiselect {
       cursor: pointer;
     }
-
-    .multiselect>.multiselect__tags {
-      border-color: $color-border;
-    }
-
-    .multiselect>.multiselect__select {
-      visibility: visible;
-    }
   }
 
   .multiselect {
-    >.multiselect__select {
+    > .multiselect__select {
       visibility: hidden;
     }
 
-    >.multiselect__tags {
+    > .multiselect__tags {
       border-color: transparent;
     }
 
-    &.multiselect--active>.multiselect__tags {
+    &.multiselect--active > .multiselect__tags {
       border-color: $color-woot;
     }
   }