feat: Update conversation filter UI (#13000)

app/javascript/dashboard/components-next/button/Button.vue

@@ -103,11 +103,11 @@ const STYLE_CONFIG = {
       solid:
         'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-brand',
+        'bg-n-brand/10 text-n-blue-11 hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-11 outline-n-brand',
       ghost:
-        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
+        'text-n-blue-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-11 hover:enabled:underline focus-visible:underline outline-transparent',
     },
     ruby: {
       solid:

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -152,20 +152,21 @@ defineExpose({ validate });
       <FilterSelect
         v-if="showQueryOperator"
         v-model="queryOperator"
-        variant="faded"
+        variant="solid"
         hide-icon
         class="text-sm"
         :options="queryOperatorOptions"
       />
       <FilterSelect
         v-model="attributeKey"
-        variant="faded"
+        variant="solid"
         :options="filterTypes"
         @update:model-value="resetModelOnAttributeKeyChange"
       />
       <FilterSelect
         v-model="filterOperator"
         variant="ghost"
+        class="[&_button>span:first-child]:!text-n-blue-11 [&>button]:px-1.5"
         :options="currentFilter.filterOperators"
       />
       <template v-if="currentOperator.hasInput">

app/javascript/dashboard/components-next/filter/ConversationFilter.vue

@@ -121,14 +121,14 @@ const outsideClickHandler = [
   >
     <div
       v-on-click-outside="viewInModal ? [] : outsideClickHandler"
-      class="z-40 max-w-3xl xl:w-[750px] w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+      class="z-40 max-w-3xl xl:w-[750px] w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl py-6 grid gap-6"
       :class="{ 'overflow-x-auto': viewInModal }"
     >
-      <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      <h3 class="text-base font-medium leading-6 text-n-slate-12 px-6">
         {{ filterModalHeaderTitle }}
       </h3>
-      <div v-if="props.isFolderView">
-        <div class="border-b border-n-weak pb-6">
+      <div v-if="props.isFolderView" class="px-6">
+        <div class="border-b border-n-strong pb-6">
           <Input
             v-model="folderNameLocal"
             :label="t('FILTER.FOLDER_LABEL')"
@@ -136,7 +136,7 @@ const outsideClickHandler = [
           />
         </div>
       </div>
-      <ul class="grid gap-4 list-none">
+      <ul class="grid gap-4 list-none px-6">
         <template v-for="(filter, index) in filters" :key="filter.id">
           <ConditionRow
             v-if="index === 0"
@@ -163,12 +163,14 @@ const outsideClickHandler = [
           />
         </template>
       </ul>
-      <div class="flex gap-2 justify-between">
-        <Button sm ghost blue @click="addFilter">
+      <div
+        class="flex gap-2 justify-between ltr:pl-3 ltr:pr-6 rtl:pr-3 rtl:pl-6"
+      >
+        <Button sm ghost blue class="px-0" @click="addFilter">
           {{ $t('FILTER.ADD_NEW_FILTER') }}
         </Button>
         <div class="flex gap-2">
-          <Button sm faded slate @click="resetFilter">
+          <Button sm solid slate @click="resetFilter">
             {{ t('FILTER.CLEAR_BUTTON_LABEL') }}
           </Button>
           <Button

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   },
   variant: {
     type: String,
-    default: 'faded',
+    default: 'solid',
   },
   label: {
     type: String,

app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue

@@ -91,7 +91,7 @@ const toggleOption = option => {
     <template #trigger="{ toggle }">
       <button
         v-if="hasItems"
-        class="bg-n-alpha-2 py-2 rounded-lg h-8 flex items-center px-0"
+        class="bg-n-button-color outline outline-1 outline-n-container py-2 rounded-lg h-8 flex items-center px-0"
         @click="toggle"
       >
         <div
@@ -115,7 +115,7 @@ const toggleOption = option => {
           <Icon icon="i-lucide-plus" />
         </div>
       </button>
-      <Button v-else sm slate faded @click="toggle">
+      <Button v-else sm slate solid @click="toggle">
         <template #icon>
           <Icon icon="i-lucide-plus" class="text-n-slate-11 flex-shrink-0" />
         </template>

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -91,7 +91,7 @@ const toggleSelected = option => {
         v-if="selectedItem"
         sm
         slate
-        faded
+        solid
         type="button"
         :icon="selectedItem.icon"
         :label="selectedItem.name"
@@ -101,7 +101,7 @@ const toggleSelected = option => {
         v-else
         sm
         slate
-        faded
+        solid
         type="button"
         :trailing-icon="placeholderTrailingIcon"
         @click="toggle"