Merge branch 'develop' into feat/conversation-screen

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -1,7 +1,7 @@
 .dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
+  @apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
 
   &.dropdown-pane--open {
-    @apply bg-white absolute dark:bg-slate-800 block visible;
+    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -31,7 +31,7 @@ button {
 }
 
 .button {
-  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-n-brand px-2.5 text-white inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
     @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -43,7 +43,7 @@ button {
   }
 
   &:hover {
-    @apply bg-woot-600 dark:bg-woot-600;
+    @apply bg-n-brand/80 dark:bg-n-brand/80;
   }
 
   &:disabled,
@@ -52,23 +52,23 @@ button {
   }
 
   &.success {
-    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
+    @apply dark:bg-n-teal-7 bg-n-teal-10 text-white hover:bg-n-teal-11 dark:hover:bg-n-teal-8;
   }
 
   &.secondary {
-    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
+    @apply dark:bg-n-solid-3 hover:bg-n-slate-3 dark:hover:bg-n-solid-2 bg-n-slate-5 text-n-slate-12;
   }
 
   &.primary {
-    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
+    @apply bg-n-brand text-white hover:brightness-110;
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
+    @apply text-n-blue-text bg-transparent dark:bg-transparent;
   }
 
   &.alert {
-    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
+    @apply bg-n-ruby-9 dark:bg-n-ruby-9 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -76,7 +76,7 @@ button {
   }
 
   &.warning {
-    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
+    @apply bg-n-amber-9 dark:bg-n-amber-6 text-white hover:bg-n-amber-10 dark:hover:bg-n-amber-7;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -115,114 +115,114 @@ button {
   }
 
   &.hollow {
-    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-n-brand bg-transparent dark:bg-transparent dark:border-n-brand text-n-blue-text dark:text-n-brand;
 
     &.secondary {
-      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-n-slate-12 border-n-strong dark:text-n-slate-12 hover:bg-n-slate-4 dark:hover:bg-n-solid-3;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-n-teal-8 dark:text-n-teal-9 border-n-teal-8 hover:bg-n-teal-3 dark:hover:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-n-ruby-11 dark:text-n-ruby-11 border-n-ruby-8 hover:bg-n-ruby-4 dark:hover:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+      @apply text-n-amber-10 dark:text-n-amber-10 border-n-amber-9 dark:border-n-amber-8 hover:bg-n-amber-4 dark:hover:bg-n-amber-4;
     }
 
     &:hover {
-      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
+      @apply hover:bg-n-brand/20 dark:hover:bg-n-brand/30 border-n-brand dark:border-n-brand/60;
 
       &.secondary {
-        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
+        @apply border-n-strong text-n-slate-12 dark:text-n-slate-12 hover:bg-n-slate-4 dark:hover:bg-n-solid-2;
       }
 
       &.success {
-        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
+        @apply border-n-teal-8 dark:border-n-teal-7 text-n-teal-8 dark:text-n-teal-9;
       }
 
       &.alert {
-        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
+        @apply border-n-ruby-8 text-n-ruby-11 dark:text-n-ruby-11;
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
+        @apply border-n-amber-9 dark:border-n-amber-8 text-n-amber-10 dark:text-n-amber-10;
       }
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;
+    @apply bg-n-brand/10 dark:bg-n-brand/50 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/60;
 
     &.secondary {
-      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
+      @apply bg-n-alpha-1 dark:bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12;
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+      @apply bg-n-teal-9/10 text-n-teal-10 hover:bg-n-teal-9/20;
     }
 
     &.alert {
-      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
+      @apply bg-n-ruby-9/20 text-n-ruby-11 hover:bg-n-ruby-9/30;
     }
 
     &.warning {
-      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
+      @apply bg-n-amber-9/20 text-n-amber-10 hover:bg-n-amber-9/30;
     }
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500;
+    @apply text-n-blue-text;
 
     &.secondary {
-      @apply text-slate-700 dark:text-slate-100;
+      @apply text-n-slate-12 dark:text-n-slate-12;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100;
+      @apply text-n-teal-10 dark:text-n-teal-9;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-100;
+      @apply text-n-ruby-11 dark:text-n-ruby-11;
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-600;
+      @apply text-n-amber-11 dark:text-n-amber-11;
     }
 
     &:hover {
-      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
+      @apply hover:bg-n-brand/10 dark:hover:bg-n-brand/30 hover:text-n-brand;
 
       &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
+        @apply hover:bg-n-slate-4 dark:hover:bg-n-solid-3 hover:text-n-slate-12 dark:hover:text-n-slate-12;
       }
 
       &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+        @apply hover:bg-n-teal-4 dark:hover:bg-n-teal-4 hover:text-n-teal-11 dark:hover:text-n-teal-9;
       }
 
       &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
+        @apply hover:bg-n-ruby-4 dark:hover:bg-n-ruby-4 hover:text-n-ruby-11 dark:hover:text-n-ruby-11;
       }
 
       &.warning {
-        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
+        @apply hover:bg-n-amber-3 dark:hover:bg-n-amber-2 hover:text-n-amber-11 dark:hover:text-n-amber-11;
       }
     }
 
     &:active {
       &.secondary {
-        @apply active:bg-slate-100 dark:active:bg-slate-900;
+        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
       }
     }
 
     &:focus {
       &.secondary {
-        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
+        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
       }
     }
   }

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-slate-50 dark:border-slate-800/50;
+  @apply border-b border-n-weak dark:border-n-weak;
 }
 
 .tabs {
@@ -34,7 +34,7 @@
   @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
-    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
   }
 
   &:first-child {
@@ -59,11 +59,11 @@
 
   &.is-active {
     a {
-      @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
+      @apply border-b border-n-brand text-n-blue-text dark:text-n-blue-text;
     }
 
     .badge {
-      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
+      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text dark:text-n-blue-text dark:bg-opacity-40;
     }
   }
 }

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -35,13 +35,13 @@ const onToggle = () => {
 <template>
   <div class="-mt-px text-sm">
     <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center justify-between w-full px-4 py-2 m-0 border border-l-0 border-r-0 border-solid rounded-none select-none bg-n-slate-3 dark:bg-n-solid-2 border-n-weak dark:border-n-weak cursor-grab drag-handle"
       @click.stop="onToggle"
     >
       <div class="flex justify-between mb-0.5">
         <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
         <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
+          class="py-0 pl-0 pr-2 mb-0 text-sm text-slate-800 dark:text-slate-100"
         >
           {{ title }}
         </h5>

app/javascript/dashboard/components/ChatList.vue

@@ -782,18 +782,18 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-n-weak dark:border-n-weak"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[360px]',
     ]"
   >
-    <slot />
     <ChatListHeader
       :page-title="pageTitle"
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"

app/javascript/dashboard/components/ChatListHeader.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import wootConstants from 'dashboard/constants/globals';
+
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
 
 const props = defineProps({
   pageTitle: {
@@ -19,6 +23,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -29,6 +37,8 @@ const emit = defineEmits([
   'filtersModal',
 ]);
 
+const { uiSettings, updateUISettings } = useUISettings();
+
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -36,11 +46,26 @@ const onBasicFilterChange = (value, type) => {
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
+
+const toggleConversationLayout = () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  const {
+    conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+  } = uiSettings.value;
+  const newViewType =
+    conversationDisplayType === LAYOUT_TYPES.CONDENSED
+      ? LAYOUT_TYPES.EXPANDED
+      : LAYOUT_TYPES.CONDENSED;
+  updateUISettings({
+    conversation_display_type: newViewType,
+    previously_used_conversation_display_type: newViewType,
+  });
+};
 </script>
 
 <template>
   <div
-    class="flex items-center justify-between px-4 py-0"
+    class="flex items-center justify-between px-4 pt-3 pb-0"
     :class="{
       'pb-3 border-b border-slate-75 dark:border-slate-700':
         hasAppliedFiltersOrActiveFolders,
@@ -55,7 +80,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
+        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
@@ -71,7 +96,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
             icon="save"
             @click="emit('addFolders')"
           />
-          <div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
+          <div id="saveFilterTeleportTarget" class="absolute z-40 mt-2" />
         </div>
 
         <woot-button
@@ -96,7 +121,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute mt-2 z-40"
+            class="absolute z-40 mt-2"
           />
         </div>
         <woot-button
@@ -118,12 +143,16 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           size="tiny"
           @click="emit('filtersModal')"
         />
-        <div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
+        <div id="conversationFilterTeleportTarget" class="absolute z-40 mt-2" />
       </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @change-filter="onBasicFilterChange"
       />
+      <SwitchLayout
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
     </div>
   </div>
 </template>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -273,13 +273,13 @@ export default {
           :href="hrefURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ urlValue }}
         </a>
         <p
           v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ displayValue || '---' }}
         </p>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -15,6 +15,8 @@ import {
   CMD_RESOLVE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();
@@ -41,13 +43,6 @@ const isSnoozed = computed(
   () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
 );
 
-const buttonClass = computed(() => {
-  if (isPending.value) return 'primary';
-  if (isOpen.value) return 'success';
-  if (isResolved.value) return 'warning';
-  return '';
-});
-
 const showAdditionalActions = computed(
   () => !isPending.value && !isSnoozed.value
 );
@@ -138,53 +133,51 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
-    <div class="button-group">
-      <woot-button
+    <div
+      class="rounded-lg shadow button-group outline-1 outline"
+      :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
+    >
+      <Button
         v-if="isOpen"
-        class-names="resolve"
-        color-scheme="success"
-        icon="checkmark"
-        emoji="✅"
+        :label="t('CONVERSATION.HEADER.RESOLVE_ACTION')"
+        size="sm"
+        color="slate"
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
         v-else-if="isResolved"
-        class-names="resolve"
-        color-scheme="warning"
-        icon="arrow-redo"
-        emoji="👀"
+        :label="t('CONVERSATION.HEADER.REOPEN_ACTION')"
+        size="sm"
+        color="slate"
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
-      >
-        {{ t('CONVERSATION.HEADER.REOPEN_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
         v-else-if="showOpenButton"
-        class-names="resolve"
-        color-scheme="primary"
-        icon="person"
+        :label="t('CONVERSATION.HEADER.OPEN_ACTION')"
+        size="sm"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
-      >
-        {{ t('CONVERSATION.HEADER.OPEN_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
         v-if="showAdditionalActions"
         ref="arrowDownButtonRef"
-        :color-scheme="buttonClass"
+        icon="i-lucide-chevron-down"
         :disabled="isLoading"
-        icon="chevron-down"
-        emoji="🔽"
+        size="sm"
+        class="ltr:rounded-l-none rtl:rounded-r-none !outline-0"
+        color="slate"
+        trailing-icon
         @click="openDropdown"
       />
     </div>
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
       <WootDropdownMenu class="mb-0">
         <WootDropdownItem v-if="!isPending">

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -34,9 +34,9 @@ export default {
 <template>
   <div class="mb-4">
     <button
-      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+        'dark:bg-n-solid-3 bg-n-brand/10 text-n-blue-text hover:!bg-n-brand/15 hover:dark:!bg-n-brand/10':
           isNotificationPanelActive,
       }"
       @click="openNotificationPanel"

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
+    class="flex flex-col justify-between w-16 h-full border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak border-n-weak rtl:border-l rtl:border-r-0"
   >
     <div class="flex flex-col items-center">
       <Logo
@@ -95,7 +95,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         v-tooltip.right="$t(`SIDEBAR.DOCS`)"
         :href="helpDocsURL"
-        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
         rel="noopener noreferrer nofollow"
         target="_blank"
       >

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -95,9 +95,9 @@ export default {
   <OnClickOutside v-if="isHelpCenter" @trigger="showHelpCenterMenu = false">
     <button
       v-tooltip.top="$t(`SIDEBAR.${name}`)"
-      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+        'bg-n-brand/10 dark:bg-slate-800 text-n-blue-text hover:!bg-n-brand/20 hover:dark:!bg-n-brand/10':
           isHelpCenterSelected,
       }"
       @click="toggleHelpCenterMenu"
@@ -121,9 +121,9 @@ export default {
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+        'dark:bg-n-solid-3 bg-n-brand/10 text-n-blue-text hover:!bg-n-brand/15 hover:dark:!bg-n-brand/10':
           isActive || isChildMenuActive,
       }"
       :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -241,7 +241,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak border-n-weak rtl:border-r-0 rtl:border-l"
   >
     <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -58,9 +58,9 @@ export default {
     active-class="active"
   >
     <li
-      class="h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
+      class="flex items-center px-2 my-1 rounded-md h-7 hover:bg-slate-25 hover:text-bg-50 dark:hover:bg-n-solid-3"
       :class="{
-        'bg-woot-25 dark:bg-slate-800': isActive,
+        'bg-n-brand/5 dark:bg-n-brand/10': isActive,
         'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
           shouldTruncate,
       }"
@@ -68,7 +68,7 @@ export default {
     >
       <a
         :href="href"
-        class="inline-flex text-left max-w-full w-full items-center"
+        class="inline-flex items-center w-full max-w-full text-left"
       >
         <span
           v-if="icon"
@@ -77,7 +77,7 @@ export default {
           <fluent-icon
             class="text-xxs text-slate-700 dark:text-slate-200"
             :class="{
-              'text-woot-500 dark:text-woot-500': isActive,
+              '!text-n-blue-text dark:!text-n-blue-text': isActive,
             }"
             :icon="icon"
             size="12"
@@ -90,13 +90,13 @@ export default {
           :style="{ backgroundColor: labelColor }"
         />
         <div
-          class="items-center flex overflow-hidden whitespace-nowrap text-ellipsis w-full justify-between"
+          class="flex items-center justify-between w-full overflow-hidden whitespace-nowrap text-ellipsis"
         >
           <span
             :title="menuTitle"
             class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
-              'text-woot-500 dark:text-woot-500': isActive,
+              '!text-n-blue-text dark:!text-n-blue-text': isActive,
               'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
                 shouldTruncate,
             }"
@@ -121,7 +121,7 @@ export default {
         >
           <fluent-icon
             v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
-            class="text-xxs text-red-500 dark:text-red-300"
+            class="text-red-500 text-xxs dark:text-red-300"
             :icon="warningIcon"
             size="12"
           />

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -140,7 +140,7 @@ export default {
         this.isContactsDefaultRoute ||
         this.isCurrentRoute
       ) {
-        return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
+        return 'bg-n-brand/5 dark:bg-n-brand/10 !text-n-blue-text dark:!text-n-blue-text hover:text-n-blue-text dark:hover:text-n-blue-text active-view';
       }
       if (this.hasSubMenu) {
         if (
@@ -149,7 +149,7 @@ export default {
           this.isIntegrationsSettings ||
           this.isApplicationsSettings
         ) {
-          return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
+          return 'bg-n-brand/5 dark:bg-n-brand/10 !text-n-blue-text dark:!text-n-blue-text hover:text-n-blue-text dark:hover:text-n-blue-text active-view';
         }
         return 'hover:text-slate-700 dark:hover:text-slate-100';
       }
@@ -217,7 +217,7 @@ export default {
     </div>
     <router-link
       v-else
-      class="flex items-center p-2 m-0 text-sm leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="flex items-center p-2 m-0 text-sm leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3"
       :class="computedClass"
       :to="menuItem && menuItem.toState"
     >
@@ -233,7 +233,7 @@ export default {
         :class="{
           'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
           'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+          'bg-n-brand/5 dark:bg-n-brand/10 text-n-brand dark:text-n-brand':
             isActiveView,
           'bg-slate-50 dark:bg-slate-700': !isActiveView,
         }"

app/javascript/dashboard/components/ui/TimeAgo.vue

@@ -113,7 +113,7 @@ export default {
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+    class="ml-auto leading-4 text-xxs text-n-slate-9 hover:text-n-slate-10"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -20,7 +20,7 @@ export default {
 
 <template>
   <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-n-slate-10 text-xs my-0 mx-2.5"
   >
     <fluent-icon
       class="mr-0.5 rtl:ml-0.5 rtl:mr-0"

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+  <div class="flex justify-between bg-n-slate-2 dark:bg-n-solid-2">
     <div class="button-group">
       <woot-button
         variant="clear"
@@ -132,16 +132,16 @@ export default {
     }
   }
   .button--reply {
-    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
+    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-n-strong dark:border-n-strong;
     &:hover,
     &:focus {
-      @apply border-r border-slate-50 dark:border-slate-700;
+      @apply border-r border-n-strong dark:border-n-strong;
     }
   }
   .button--note {
     @apply border-l-0 rounded-none;
     &.is-active {
-      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
+      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-n-strong dark:border-n-strong;
     }
     &:hover,
     &:active {

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -98,7 +98,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
+    class="conversation-details-wrap bg-n-background"
     :class="{ 'with-border-right': !isOnExpandedLayout }"
   >
     <ConversationHeader
@@ -112,7 +112,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      class="-mt-px bg-n-background !border-n-weak dashboard-app--tabs"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -125,7 +125,7 @@ export default {
     </woot-tabs>
     <div
       v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
+      class="flex h-full min-h-0 m-0 bg-n-slate-2 dark:bg-n-solid-2"
     >
       <MessagesView
         v-if="currentChat.id"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -241,9 +241,9 @@ export default {
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-solid-3/80 group"
     :class="{
-      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+      'active animate-card-select bg-n-alpha-2 dark:bg-n-solid-3/90 border-n-brand':
         isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
@@ -272,7 +272,7 @@ export default {
       size="40px"
     />
     <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
       <div class="flex justify-between">
         <InboxName v-if="showInboxName" :inbox="inbox" />
@@ -292,14 +292,14 @@ export default {
         </div>
       </div>
       <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-n-slate-12"
       >
         {{ currentContact.name }}
       </h4>
       <MessagePreview
         v-if="lastMessageInChat"
         :message="lastMessageInChat"
-        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
+        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-n-slate-12"
       />
       <p
         v-else

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -130,7 +130,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak dark:border-n-background/50 md:flex-row"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"

app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue

@@ -31,7 +31,7 @@ export default {
     >
       <div class="flex items-center gap-2">
         <Hotkey
-          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-7000 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
         >
           ⌘
         </Hotkey>

app/javascript/dashboard/components/widgets/conversation/FilterItem.vue

@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-strong text-n-slate-11"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -579,7 +579,7 @@ export default {
     }
 
     .reply-box {
-      @apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
+      @apply border border-solid border-n-strong dark:border-n-strong max-w-[75rem] w-[70%];
     }
 
     .reply-box .reply-box__top {

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -4,6 +4,8 @@ import { useAlert } from 'dashboard/composables';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+
 import {
   CMD_MUTE_CONVERSATION,
   CMD_SEND_TRANSCRIPT,
@@ -14,6 +16,7 @@ export default {
   components: {
     EmailTranscriptModal,
     ResolveAction,
+    ButtonV4,
   },
   data() {
     return {
@@ -51,27 +54,30 @@ export default {
 
 <template>
   <div class="relative flex items-center gap-2 actions--container">
-    <woot-button
+    <ButtonV4
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-mute"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-off"
       @click="mute"
     />
-    <woot-button
+    <ButtonV4
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-1"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-1"
       @click="unmute"
     />
-    <woot-button
+    <ButtonV4
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="share"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-share"
       @click="toggleEmailActionsModal"
     />
     <ResolveAction

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -1244,7 +1244,7 @@ export default {
     box-shadow 0.35s cubic-bezier(0.37, 0, 0.63, 1),
     height 2s cubic-bezier(0.37, 0, 0.63, 1);
 
-  @apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
+  @apply relative border-t border-n-strong dark:border-n-strong bg-white dark:bg-slate-900;
 
   &.is-focused {
     box-shadow:
@@ -1270,7 +1270,7 @@ export default {
 }
 
 .reply-box__top {
-  @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
+  @apply relative py-0 px-4 -mt-px border-t border-solid border-n-strong dark:border-n-strong;
 
   textarea {
     @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;

app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue

@@ -89,7 +89,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.toEmailsVal.$model"
             type="text"
@@ -106,7 +106,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.ccEmailsVal.$model"
             class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
@@ -134,7 +134,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.bccEmailsVal.$model"
             type="text"
@@ -159,7 +159,7 @@ export default {
   @apply text-sm text-red-500 dark:text-red-500;
 }
 .input-group {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;
+  @apply border-b border-solid border-n-weak dark:border-n-weak my-1 flex items-center gap-2;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -73,9 +73,9 @@ export default {
 <template>
   <blockquote
     ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
+    class="border-l-2 !py-0 !px-2 !mt-2 border-n-weak dark:border-n-strong"
   >
-    <p class="header">
+    <p class="mb-1 text-n-slate-11 dark:text-n-slate-11">
       <strong class="text-slate-700 dark:text-slate-100">
         {{ author }}
       </strong>
@@ -88,23 +88,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.message {
-  @apply py-0 px-2 mt-2;
-}
 .message-content::v-deep p,
 .message-content::v-deep li::marker {
-  @apply text-slate-700 dark:text-slate-100 mb-1;
-}
-
-.header {
-  @apply text-slate-500 dark:text-slate-300 mb-1;
+  @apply text-n-slate-11 dark:text-n-slate-11 mb-1;
 }
 
 .message-content {
-  @apply break-words text-slate-600 dark:text-slate-200;
+  @apply break-words text-n-slate-12;
 }
 
 .message-content::v-deep .searchkey--highlight {
-  @apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
+  @apply text-n-blue-text dark:text-n-blue-text text-sm font-semibold;
 }
 </style>

app/javascript/dashboard/modules/search/components/ReadMore.vue

@@ -11,53 +11,26 @@ export default {
 </script>
 
 <template>
-  <div class="read-more">
+  <div>
     <div
       :class="{
-        'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
-          shrink,
+        'max-h-[100px] overflow-hidden relative': shrink,
       }"
     >
       <slot />
-      <woot-button
-        v-if="shrink"
-        size="tiny"
-        variant="smooth"
-        color-scheme="primary"
-        class="read-more-button"
-        @click.prevent="$emit('expand')"
+      <div
+        class="bg-n-slate-3 rounded-md dark:bg-n-solid-3 absolute left-0 right-0 z-20 mx-auto mt-0 max-w-max bottom-2 backdrop-blur[100px]"
       >
-        {{ $t('SEARCH.READ_MORE') }}
-      </woot-button>
+        <woot-button
+          v-if="shrink"
+          size="tiny"
+          variant="smooth"
+          color-scheme="primary"
+          @click.prevent="$emit('expand')"
+        >
+          {{ $t('SEARCH.READ_MORE') }}
+        </woot-button>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .shrink-gradient-light {
-    background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1) 100%
-    );
-  }
-
-  .shrink-gradient-dark {
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgb(21, 23, 24) 100%
-    );
-  }
-}
-.shrink-container {
-  @apply max-h-[100px] overflow-hidden relative;
-}
-.shrink-container::after {
-}
-.read-more-button {
-  @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
-}
-</style>

app/javascript/dashboard/modules/search/components/SearchHeader.vue

@@ -50,14 +50,28 @@ export default {
 </script>
 
 <template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+  <div
+    class="input-container transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid"
+    :class="{
+      'border-n-brand dark:border-n-brand': isInputFocused,
+      'border-n-weak dark:border-n-strong': !isInputFocused,
+    }"
+  >
+    <div class="flex items-center">
+      <fluent-icon
+        icon="search"
+        class="icon"
+        aria-hidden="true"
+        :class="{
+          'text-n-blue-text': isInputFocused,
+          'text-n-slate-10': !isInputFocused,
+        }"
+      />
     </div>
     <input
       ref="searchInput"
       type="search"
-      class="dark:bg-slate-900"
+      class="w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
       :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
       :value="searchQuery"
       @focus="onFocus"
@@ -68,37 +82,7 @@ export default {
       :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
       :show-close="false"
       small
-      class="helper-label"
+      class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.input-container {
-  transition: border-bottom 0.2s ease-in-out;
-  @apply relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
-
-  input[type='search'] {
-    @apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
-  }
-
-  &.is-focused {
-    @apply border-woot-100 dark:border-woot-600;
-
-    .icon {
-      color: var(--w-400);
-      @apply text-woot-400 dark:text-woot-500;
-    }
-  }
-}
-.icon-container {
-  @apply flex items-center;
-  .icon {
-    @apply text-slate-400;
-  }
-}
-
-.helper-label {
-  @apply m-0 whitespace-nowrap;
-}
-</style>

app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue

@@ -36,34 +36,31 @@ export default {
 </script>
 
 <template>
-  <router-link :to="navigateTo" class="contact-item">
+  <router-link
+    :to="navigateTo"
+    class="flex items-center p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+  >
     <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
     <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+      <h5 class="text-sm name text-n-slate-12 dark:text-n-slate-12">
         {{ name }}
       </h5>
       <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+        class="flex items-center gap-1 m-0 text-sm text-slate-600 dark:text-slate-200"
       >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+        <span v-if="email" class="email text-n-slate-12 dark:text-n-slate-12">{{
           email
         }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+        <span
+          v-if="phone"
+          class="separator text-n-slate-10 dark:text-n-slate-10"
+        >
           •
         </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+        <span v-if="phone" class="phone text-n-slate-12 dark:text-n-slate-12">
           {{ phone }}
         </span>
       </p>
     </div>
   </router-link>
 </template>
-
-<style scoped lang="scss">
-.contact-item {
-  @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
-}
-.contact-details {
-  @apply ml-2 rtl:mr-2 rtl:ml-0;
-}
-</style>

app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue

@@ -43,7 +43,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="contacts.length" class="search-list">
+    <ul v-if="contacts.length" class="space-y-1.5">
       <li v-for="contact in contacts" :key="contact.id">
         <SearchResultContactItem
           :id="contact.id"

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -56,37 +56,62 @@ export default {
 </script>
 
 <template>
-  <router-link :to="navigateTo" class="conversation-item">
-    <div class="icon-wrap">
+  <router-link
+    :to="navigateTo"
+    class="flex p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+  >
+    <div
+      class="flex items-center justify-center flex-shrink-0 w-6 h-6 rounded bg-n-brand/10 dark:bg-n-brand/40 text-n-blue-text dark:text-n-blue-text"
+    >
       <fluent-icon icon="chat-multiple" :size="14" />
     </div>
-    <div class="conversation-details">
-      <div class="meta-wrap">
+    <div class="flex-grow min-w-0 ml-2">
+      <div class="flex items-center justify-between mb-1">
         <div class="flex">
           <woot-label
-            class="conversation-id"
+            class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
             :title="`#${id}`"
             :show-close="false"
             small
           />
-          <div class="inbox-name-wrap">
-            <InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+          <div
+            class="flex items-center justify-center h-5 ml-1 rounded bg-n-slate-3 dark:bg-n-solid-3 w-fit rtl:ml-0 rtl:mr-1"
+          >
+            <InboxName
+              :inbox="inbox"
+              class="mr-2 rtl:mr-0 rtl:ml-2 bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-11 dark:text-n-slate-11"
+            />
           </div>
         </div>
         <div>
-          <span class="created-at">{{ createdAtTime }}</span>
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ createdAtTime }}
+          </span>
         </div>
       </div>
-      <div class="user-details">
-        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
-          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
+      <div class="flex gap-2">
+        <h5
+          v-if="name"
+          class="m-0 text-sm text-n-slate-12 dark:text-n-slate-12"
+        >
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ $t('SEARCH.FROM') }}:
+          </span>
           {{ name }}
         </h5>
         <h5
           v-if="email"
-          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+          class="m-0 overflow-hidden text-sm text-n-slate-12 dark:text-n-slate-12 whitespace-nowrap text-ellipsis"
         >
-          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ $t('SEARCH.EMAIL') }}:
+          </span>
           {{ email }}
         </h5>
       </div>
@@ -94,40 +119,3 @@ export default {
     </div>
   </router-link>
 </template>
-
-<style scoped lang="scss">
-.conversation-item {
-  @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
-}
-
-.meta-wrap {
-  @apply flex items-center justify-between mb-1;
-}
-.icon-wrap {
-  @apply w-6 h-6 flex-shrink-0  bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
-}
-
-.inbox-name-wrap {
-  @apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
-}
-.conversation-details {
-  @apply ml-2 flex-grow min-w-0;
-}
-
-.name {
-  @apply flex-shrink-0;
-}
-.conversation-id,
-.name,
-.email {
-  @apply m-0;
-}
-.created-at,
-.pre-text {
-  @apply text-slate-600 dark:text-slate-100 text-xs font-normal;
-}
-
-.user-details {
-  @apply flex gap-2;
-}
-</style>

app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue

@@ -42,7 +42,7 @@ export default {
     :show-title="showTitle || isFetching"
     :is-fetching="isFetching"
   >
-    <ul v-if="conversations.length" class="search-list">
+    <ul v-if="conversations.length" class="space-y-1.5">
       <li v-for="conversation in conversations" :key="conversation.id">
         <SearchResultConversationItem
           :id="conversation.id"

app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue

@@ -51,7 +51,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="messages.length" class="search-list">
+    <ul v-if="messages.length" class="space-y-1.5">
       <li v-for="message in messages" :key="message.id">
         <SearchResultConversationItem
           :id="message.conversation_id"

app/javascript/dashboard/modules/search/components/SearchResultSection.vue

@@ -31,42 +31,23 @@ export default {
 </script>
 
 <template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+  <section class="mx-0 my-2">
+    <div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
+      <h3 class="text-sm text-n-slate-12">{{ title }}</h3>
     </div>
     <woot-loading-state
       v-if="isFetching"
       :message="$t('SEARCH.SEARCHING_DATA')"
     />
     <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
+    <div
+      v-if="empty && !isFetching"
+      class="flex items-center justify-center px-4 py-6 m-2 rounded-md bg-n-slate-2 dark:bg-n-solid-3"
+    >
+      <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+      <p class="mx-2 my-0 text-center text-n-slate-11">
         {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
       </p>
     </div>
   </section>
 </template>
-
-<style scoped lang="scss">
-.result-section {
-  @apply my-2 mx-0;
-}
-.search-list {
-  @apply m-0 py-4 px-0 list-none;
-}
-.header {
-  @apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
-}
-
-.empty {
-  @apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
-  .icon {
-    @apply text-slate-500 dark:text-slate-300;
-  }
-  .empty-state__text {
-    @apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
-  }
-}
-</style>

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -201,8 +201,8 @@ export default {
 </script>
 
 <template>
-  <div class="search-page">
-    <div class="page-header">
+  <div class="flex flex-col w-full bg-n-background">
+    <div class="flex p-4">
       <woot-button
         icon="chevron-left"
         variant="smooth"
@@ -213,7 +213,9 @@ export default {
         {{ $t('GENERAL_SETTINGS.BACK') }}
       </woot-button>
     </div>
-    <section class="search-root">
+    <section
+      class="flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-n-background"
+    >
       <header>
         <SearchHeader @search="onSearch" />
         <SearchTabs
@@ -223,7 +225,7 @@ export default {
           @tab-change="tab => (selectedTab = tab)"
         />
       </header>
-      <div class="search-results">
+      <div class="flex-grow h-full px-2 py-0 overflow-y-auto">
         <div v-if="showResultsSection">
           <Policy :permissions="[...rolePermissions, contactPermissions]">
             <SearchResultContactsList
@@ -259,17 +261,23 @@ export default {
             />
           </Policy>
         </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
+        <div
+          v-else-if="showEmptySearchResults"
+          class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
+        >
+          <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+          <p class="m-2 text-center text-n-slate-11">
             {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
           </p>
         </div>
-        <div v-else class="text-center empty">
+        <div
+          v-else
+          class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
+        >
           <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
+            <fluent-icon icon="search" size="24px" class="text-n-slate-11" />
           </p>
-          <p class="empty-state__text">
+          <p class="m-2 text-center text-n-slate-11">
             {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
           </p>
         </div>
@@ -277,29 +285,3 @@ export default {
     </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.search-page {
-  @apply flex flex-col w-full bg-white dark:bg-slate-900;
-}
-.page-header {
-  @apply flex p-4;
-}
-.search-root {
-  @apply flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-white dark:bg-slate-900;
-
-  .search-results {
-    @apply flex-grow h-full overflow-y-auto py-0 px-2;
-  }
-}
-
-.empty {
-  @apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
-  .icon {
-    @apply text-slate-500 dark:text-slate-400;
-  }
-  .empty-state__text {
-    @apply text-center text-slate-500 dark:text-slate-400 m-2;
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
-import PopOverSearch from './search/PopOverSearch.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
@@ -13,7 +12,6 @@ export default {
   components: {
     ChatList,
     ConversationBox,
-    PopOverSearch,
     CmdBarConversationSnooze,
   },
   beforeRouteLeave(to, from, next) {
@@ -193,7 +191,7 @@ export default {
 </script>
 
 <template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
+  <section class="conversation-page bg-n-solid-1">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
@@ -203,12 +201,7 @@ export default {
       :folders-id="foldersId"
       :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
-    >
-      <PopOverSearch
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
-      />
-    </ChatList>
+    />
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

@@ -56,9 +56,9 @@ export default {
 
 <template>
   <div
-    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+    class="macro-preview absolute max-h-[22.5rem] z-50 w-64 rounded-md bg-n-alpha-3 backdrop-blur-[100px] shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
   >
-    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+    <h6 class="mb-4 text-sm text-slate-800 dark:text-slate-100">
       {{ macro.name }}
     </h6>
     <div
@@ -73,7 +73,7 @@ export default {
       <div
         class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
       />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+      <p class="mb-1 text-xs text-slate-500 dark:text-slate-400">
         {{ action.actionName }}
       </p>
       <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -166,12 +166,12 @@ onMounted(() => {
 });
 
 const evenClass = [
-  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
-  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+  '[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
+  'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
 ];
 const oddClass = [
-  '[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
-  'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
+  '[&>*:nth-child(odd)]:!bg-n-slate-2 [&>*:nth-child(even)]:!bg-n-background',
+  'dark:[&>*:nth-child(odd)]:!bg-n-solid-1 dark:[&>*:nth-child(even)]:!bg-n-background',
 ];
 
 const wrapperClass = computed(() => {
@@ -195,7 +195,7 @@ const wrapperClass = computed(() => {
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :contact-id="contactId"
-      class="border-b border-solid border-slate-50 dark:border-slate-700/50"
+      class="border-b border-solid border-n-weak/50 dark:border-n-weak/90"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,77 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import SwitchLayout from './SwitchLayout.vue';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-export default {
-  components: {
-    SwitchLayout,
-  },
-  directives: {
-    focus: {
-      inserted(el) {
-        el.focus();
-      },
-    },
-  },
-  props: {
-    isOnExpandedLayout: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['toggleConversationLayout'],
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-    searchUrl() {
-      return frontendURL(`accounts/${this.accountId}/search`);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative">
-    <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
-    >
-      <woot-sidemenu-icon
-        size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
-      />
-      <router-link
-        :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
-      >
-        <div class="flex">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
-            size="16"
-          />
-        </div>
-        <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </p>
-      </router-link>
-      <SwitchLayout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggleConversationLayout')"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-link {
-  &:hover {
-    .search--icon,
-    .search--label {
-      @apply hover:text-woot-500 dark:hover:text-woot-500;
-    }
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue

@@ -72,7 +72,7 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
+    <div class="flex flex-col w-full gap-3 text-slate-600 dark:text-slate-300">
       <p
         class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
       >
@@ -84,7 +84,7 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand dark:text-n-brand hover:underline"
         >
           {{ linkText }}
           <fluent-icon
@@ -97,7 +97,7 @@ const openInNewTab = url => {
       </CustomBrandPolicyWrapper>
     </div>
     <div
-      class="flex items-start justify-start w-full gap-3 sm:hidden flex-wrap"
+      class="flex flex-wrap items-start justify-start w-full gap-3 sm:hidden"
     >
       <slot name="actions" />
       <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">

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

@@ -60,7 +60,7 @@ const hasValue = computed(() => {
       <woot-button
         variant="hollow"
         color-scheme="secondary"
-        class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
+        class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
         @click="
           () => toggleDropdown() // ensure that the event is not passed to the button
         "
@@ -73,25 +73,25 @@ const hasValue = computed(() => {
             :status="selectedItem.availability_status"
             :username="selectedItem.name"
           />
-          <div class="flex justify-between w-full min-w-0 items-center">
+          <div class="flex items-center justify-between w-full min-w-0">
             <h4
               v-if="!hasValue"
-              class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+              class="text-sm text-ellipsis text-slate-800 dark:text-slate-100"
             >
               {{ multiselectorPlaceholder }}
             </h4>
             <h4
               v-else
-              class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+              class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
               :title="selectedItem.name"
             >
               {{ selectedItem.name }}
             </h4>
             <i
               v-if="showSearchDropdown"
-              class="icon i-lucide-chevron-up text-slate-600 mr-1"
+              class="mr-1 icon i-lucide-chevron-up text-slate-600"
             />
-            <i v-else class="icon i-lucide-chevron-down text-slate-600 mr-1" />
+            <i v-else class="mr-1 icon i-lucide-chevron-down text-slate-600" />
           </div>
         </div>
       </woot-button>
@@ -99,9 +99,9 @@ const hasValue = computed(() => {
         :class="{ 'dropdown-pane--open': showSearchDropdown }"
         class="dropdown-pane"
       >
-        <div class="flex justify-between items-center mb-1">
+        <div class="flex items-center justify-between mb-1">
           <h4
-            class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+            class="m-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
           >
             {{ multiselectorTitle }}
           </h4>

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

@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div class="dropdown-wrap">
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+    <div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -81,7 +81,7 @@ export default {
         :placeholder="inputPlaceholder"
       />
     </div>
-    <div class="flex justify-start items-start flex-auto overflow-auto">
+    <div class="flex items-start justify-start flex-auto overflow-auto">
       <div class="w-full max-h-[10rem]">
         <WootDropdownMenu>
           <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
@@ -107,7 +107,7 @@ export default {
                   class="flex items-center justify-between w-full min-w-0 gap-2"
                 >
                   <span
-                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+                    class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
                     :title="option.name"
                   >
                     {{ option.name }}
@@ -142,15 +142,11 @@ export default {
   @apply justify-between w-full;
 
   &.active {
-    @apply bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-900 font-medium;
-  }
-
-  &:focus {
-    @apply bg-slate-25 dark:bg-slate-700;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 border-n-weak/50 dark:border-n-weak font-medium;
   }
 
   &:hover {
-    @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 text-slate-800 dark:text-slate-100;
   }
 }
 </style>