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

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>

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

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