From 1f271356ca065e6a9a0169503cababad240cd3bc Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 14 Oct 2022 02:06:42 +0530
Subject: [PATCH] feat: Update the design for dropdown buttons (#5625)

---
 .../assets/scss/widgets/_buttons.scss         | 17 +++++++++++-
 .../dashboard/assets/scss/widgets/_modal.scss | 10 ++-----
 app/javascript/dashboard/components/Modal.vue | 10 ++++---
 .../components/ui/MultiselectDropdown.vue     | 26 ++++++++++++++++---
 .../ui/MultiselectDropdownItems.vue           | 13 +++++-----
 .../components/ui/dropdown/DropdownItem.vue   |  8 ++----
 6 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 9d3f84b25..478045000 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -113,9 +113,22 @@ $default-button-height: 4.0rem;
   }
 
   &.clear {
+    color: var(--w-700);
+
+    &.secondary {
+      color: var(--s-700)
+    }
+
+    &.success {
+      color: var(--g-700)
+    }
+
+    &.alert {
+      color: var(--r-700)
+    }
 
     &.warning {
-      color: var(--y-600);
+      color: var(--y-700)
     }
 
     &:hover {
@@ -146,6 +159,8 @@ $default-button-height: 4.0rem;
 
   &.small {
     height: var(--space-large);
+    padding-bottom: var(--space-smaller);
+    padding-top: var(--space-smaller);
   }
 
   &.large {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index fc497f069..543a60797 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -14,15 +14,9 @@
 }
 
 .modal--close {
-  border-radius: 50%;
-  color: $color-heading;
-  cursor: pointer;
-  font-size: $font-size-big;
-  line-height: $space-normal;
-  padding: $space-normal;
   position: absolute;
-  right: $space-micro;
-  top: $space-micro;
+  right: $space-small;
+  top: $space-small;
 
   &:hover {
     background: $color-background;
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index f4cad844a..d5dd55ffa 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -7,9 +7,13 @@
       @click="onBackDropClick"
     >
       <div :class="modalContainerClassName" @click.stop>
-        <button class="modal--close" @click="close">
-          <fluent-icon icon="dismiss" />
-        </button>
+        <woot-button
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="modal--close"
+          @click="close"
+        />
         <slot />
       </div>
     </div>
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 76908c380..1636ca252 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -41,9 +41,18 @@
       :class="{ 'dropdown-pane--open': showSearchDropdown }"
       class="dropdown-pane"
     >
-      <h4 class="text-block-title text-truncate">
-        {{ multiselectorTitle }}
-      </h4>
+      <div class="dropdown__header">
+        <h4 class="text-block-title text-truncate">
+          {{ multiselectorTitle }}
+        </h4>
+        <woot-button
+          icon="dismiss"
+          size="tiny"
+          color-scheme="secondary"
+          variant="clear"
+          @click="onCloseDropdown"
+        />
+      </div>
       <multiselect-dropdown-items
         v-if="showSearchDropdown"
         :options="options"
@@ -172,4 +181,15 @@ export default {
     width: 100%;
   }
 }
+
+.dropdown__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-smaller);
+
+  .text-block-title {
+    margin: 0;
+  }
+}
 </style>
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 8aadcb7cb..96aa99323 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -20,6 +20,7 @@
             <woot-button
               class="multiselect-dropdown--item"
               variant="clear"
+              color-scheme="secondary"
               :class="{
                 active: option.id === (selectedItem && selectedItem.id),
               }"
@@ -129,7 +130,7 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  max-height: 16rem;
+  max-height: 20rem;
 }
 
 .search-wrap {
@@ -162,7 +163,7 @@ export default {
 
 .multiselect-dropdown--list {
   width: 100%;
-  max-height: 12rem;
+  max-height: 16rem;
 }
 
 .multiselect-dropdown--item {
@@ -170,13 +171,13 @@ export default {
   width: 100%;
 
   &.active {
-    background-color: var(--w-50);
-    color: var(--w-900);
-    font-weight: var(--font-weight-bold);
+    background-color: var(--w-25);
+    color: var(--w-800);
+    font-weight: var(--font-weight-medium);
   }
 
   &:focus {
-    background-color: var(--color-background);
+    background-color: var(--color-background-light);
   }
 }
 
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index 34ec42f27..c4da84234 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -29,19 +29,15 @@ export default {
 <style lang="scss" scoped>
 .dropdown-menu__item {
   list-style: none;
+  margin-bottom: var(--space-micro);
 
   ::v-deep {
     a,
     .button {
+      display: inline-flex;
       width: 100%;
       text-align: left;
       color: var(--s-700);
-      white-space: nowrap;
-      display: inline-flex;
-      padding: var(--space-small);
-      padding-top: var(--space-small);
-      padding-bottom: var(--space-small);
-      border-radius: var(--border-radius-normal);
 
       &:hover {
         background: var(--color-background);