feat: Update the design for dropdown buttons (#5625)

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 {

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;
+  right: $space-small;
-  top: $space-micro;
+  top: $space-small;
 
   &:hover {
     background: $color-background;

app/javascript/dashboard/components/Modal.vue

@@ -7,9 +7,13 @@
       @click="onBackDropClick"
     >
       <div :class="modalContainerClassName" @click.stop>
-        <button class="modal--close" @click="close">
+        <woot-button
-          <fluent-icon icon="dismiss" />
+          color-scheme="secondary"
-        </button>
+          icon="dismiss"
+          variant="clear"
+          class="modal--close"
+          @click="close"
+        />
         <slot />
       </div>
     </div>

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">
+      <div class="dropdown__header">
-        {{ multiselectorTitle }}
+        <h4 class="text-block-title text-truncate">
-      </h4>
+          {{ 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>

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);
+    background-color: var(--w-25);
-    color: var(--w-900);
+    color: var(--w-800);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-medium);
   }
 
   &:focus {
-    background-color: var(--color-background);
+    background-color: var(--color-background-light);
   }
 }
 

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);