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;
-  top: $space-micro;
+  right: $space-small;
+  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">
-          <fluent-icon icon="dismiss" />
-        </button>
+        <woot-button
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="modal--close"
+          @click="close"
+        />
         <slot />
       </div>
     </div>