chore: Update styles in settings pages (#11070)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/shared/components/GreetingsEditor.vue

@@ -19,16 +19,15 @@ const greetingsMessage = computed({
 </script>
 
 <template>
-  <section class="w-3/4">
+  <section>
     <div
       v-if="richtext"
-      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+      class="px-4 py-0 mx-0 mt-0 mb-4 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2"
     >
       <WootMessageEditor
         v-model="greetingsMessage"
         is-format-mode
         enable-variables
-        class="bg-white input dark:bg-slate-900"
         :placeholder="placeholder"
         :min-height="4"
       />

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -3,6 +3,7 @@ import { computed, defineEmits } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useToggle } from '@vueuse/core';
 
+import Button from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
@@ -57,41 +58,38 @@ const hasValue = computed(() => {
 <template>
   <OnClickOutside @trigger="onCloseDropdown">
     <div class="relative w-full mb-2" @keyup.esc="onCloseDropdown">
-      <woot-button
-        variant="hollow"
-        color-scheme="secondary"
-        class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
+      <Button
+        slate
+        outline
+        trailing-icon
+        :icon="
+          showSearchDropdown ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+        "
+        class="w-full !px-2"
         @click="
           () => toggleDropdown() // ensure that the event is not passed to the button
         "
       >
-        <div class="flex gap-1">
-          <Thumbnail
-            v-if="hasValue && hasThumbnail"
-            :src="selectedItem.thumbnail"
-            size="24px"
-            :status="selectedItem.availability_status"
-            :username="selectedItem.name"
-          />
-          <div class="flex items-center justify-between w-full min-w-0">
-            <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
-              {{ multiselectorPlaceholder }}
-            </h4>
-            <h4
-              v-else
-              class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-n-slate-12"
-              :title="selectedItem.name"
-            >
-              {{ selectedItem.name }}
-            </h4>
-            <i
-              v-if="showSearchDropdown"
-              class="mr-1 icon i-lucide-chevron-up text-n-slate-10"
-            />
-            <i v-else class="mr-1 icon i-lucide-chevron-down text-n-slate-10" />
-          </div>
+        <div class="flex items-center justify-between w-full min-w-0">
+          <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
+            {{ multiselectorPlaceholder }}
+          </h4>
+          <h4
+            v-else
+            class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-n-slate-12"
+            :title="selectedItem.name"
+          >
+            {{ selectedItem.name }}
+          </h4>
         </div>
-      </woot-button>
+        <Thumbnail
+          v-if="hasValue && hasThumbnail"
+          :src="selectedItem.thumbnail"
+          size="24px"
+          :status="selectedItem.availability_status"
+          :username="selectedItem.name"
+        />
+      </Button>
       <div
         :class="{ 'dropdown-pane--open': showSearchDropdown }"
         class="dropdown-pane"
@@ -102,13 +100,7 @@ const hasValue = computed(() => {
           >
             {{ multiselectorTitle }}
           </h4>
-          <woot-button
-            icon="dismiss"
-            size="tiny"
-            color-scheme="secondary"
-            variant="clear"
-            @click="onCloseDropdown"
-          />
+          <Button ghost slate xs icon="i-lucide-x" @click="onCloseDropdown" />
         </div>
         <MultiselectDropdownItems
           v-if="showSearchDropdown"

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -2,12 +2,14 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
     Thumbnail,
+    NextButton,
   },
 
   props: {
@@ -85,37 +87,33 @@ export default {
       <div class="w-full max-h-[10rem]">
         <WootDropdownMenu>
           <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
-            <woot-button
-              class="multiselect-dropdown--item"
-              :variant="isActive(option) ? 'hollow' : 'clear'"
-              color-scheme="secondary"
-              :class="{
-                active: isActive(option),
-              }"
+            <NextButton
+              slate
+              :variant="isActive(option) ? 'faded' : 'ghost'"
+              trailing-icon
+              :icon="isActive(option) ? 'i-lucide-check' : ''"
+              class="w-full !px-2.5"
               @click="() => onclick(option)"
             >
-              <div class="flex items-center gap-1.5">
-                <Thumbnail
-                  v-if="hasThumbnail"
-                  :src="option.thumbnail"
-                  size="24px"
-                  :username="option.name"
-                  :status="option.availability_status"
-                  has-border
-                />
-                <div
-                  class="flex items-center justify-between w-full min-w-0 gap-2"
+              <div
+                class="flex items-center justify-between w-full min-w-0 gap-2"
+              >
+                <span
+                  class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
+                  :title="option.name"
                 >
-                  <span
-                    class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
-                    :title="option.name"
-                  >
-                    {{ option.name }}
-                  </span>
-                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
-                </div>
+                  {{ option.name }}
+                </span>
               </div>
-            </woot-button>
+              <Thumbnail
+                v-if="hasThumbnail"
+                :src="option.thumbnail"
+                size="24px"
+                :username="option.name"
+                :status="option.availability_status"
+                has-border
+              />
+            </NextButton>
           </WootDropdownItem>
         </WootDropdownMenu>
         <h4

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -135,7 +135,7 @@ export default {
     <div
       class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
     >
-      <div class="w-full">
+      <div class="w-full my-1">
         <woot-dropdown-menu>
           <LabelDropdownItem
             v-for="label in filteredActiveLabels"

app/javascript/shared/components/ui/label/LabelDropdownItem.vue

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     title: {
       type: String,
@@ -26,60 +31,29 @@ export default {
 
 <template>
   <woot-dropdown-item>
-    <div class="item-wrap">
-      <woot-button variant="clear" @click="onClick">
-        <div class="button-wrap">
-          <div class="name-label-wrap">
-            <div
-              v-if="color"
-              class="label-color--display"
-              :style="{ backgroundColor: color }"
-            />
-            <span class="label-text" :title="title">{{ title }}</span>
-          </div>
-          <div>
-            <i v-if="selected" class="i-lucide-circle-check" />
-          </div>
-        </div>
-      </woot-button>
-    </div>
+    <NextButton
+      slate
+      ghost
+      blue
+      trailing-icon
+      :icon="selected ? 'i-lucide-circle-check' : ''"
+      class="w-full !px-2.5 justify-between"
+      :class="{ '!flex-row': !selected }"
+      @click="onClick"
+    >
+      <div class="flex items-center min-w-0 gap-2">
+        <div
+          v-if="color"
+          class="size-3 flex-shrink-0 rounded-full outline outline-1 outline-n-weak"
+          :style="{ backgroundColor: color }"
+        />
+        <span
+          class="overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1]"
+          :title="title"
+        >
+          {{ title }}
+        </span>
+      </div>
+    </NextButton>
   </woot-dropdown-item>
 </template>
-
-<style lang="scss" scoped>
-.item-wrap {
-  @apply flex;
-
-  ::v-deep .button__content {
-    @apply w-full;
-  }
-
-  .button-wrap {
-    @apply flex justify-between w-full;
-
-    &.active {
-      @apply flex font-semibold text-woot-700 dark:text-woot-600;
-    }
-
-    .name-label-wrap {
-      @apply flex min-w-0 w-full;
-
-      .label-color--display {
-        @apply mr-2 rtl:mr-0 rtl:ml-2;
-      }
-
-      .label-text {
-        @apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
-      }
-
-      .icon {
-        @apply text-sm;
-      }
-    }
-  }
-
-  .label-color--display {
-    @apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
-  }
-}
-</style>