chore: Update chat list header UI (#10573)

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

@@ -3,6 +3,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
   'open',
@@ -26,6 +27,13 @@ const SORT_ORDER_ITEMS = Object.freeze([
 export default {
   components: {
     FilterItem,
+    NextButton,
+  },
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['changeFilter'],
   setup() {
@@ -85,22 +93,25 @@ export default {
 
 <template>
   <div class="relative flex">
-    <woot-button
+    <NextButton
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
+      icon="i-lucide-arrow-up-down"
+      slate
+      faded
+      xs
       @click="toggleDropdown"
     />
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+      class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
+      :class="{
+        'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
+        'ltr:right-0 rtl:left-0': isOnExpandedLayout,
+      }"
     >
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <FilterItem
@@ -112,7 +123,7 @@ export default {
         />
       </div>
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <FilterItem
@@ -126,9 +137,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.basic-filter {
-  @apply w-52 p-4 top-6;
-}
-</style>

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-weak text-n-slate-12"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">