From c1534e788ddcddd39787c6995774c971e2cc0b10 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 4 Dec 2025 13:57:34 +0530
Subject: [PATCH] feat: Update conversation filter UI (#13000)

---
 .../components-next/button/Button.vue          |  8 ++++----
 .../components-next/filter/ConditionRow.vue    |  5 +++--
 .../filter/ConversationFilter.vue              | 18 ++++++++++--------
 .../filter/inputs/FilterSelect.vue             |  2 +-
 .../filter/inputs/MultiSelect.vue              |  4 ++--
 .../filter/inputs/SingleSelect.vue             |  4 ++--
 6 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index d0c693c53..45bd139ff 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/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:
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
index b9b2d780c..1b776868f 100644
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/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">
diff --git a/app/javascript/dashboard/components-next/filter/ConversationFilter.vue b/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
index 30b92fd41..1d2e7041d 100644
--- a/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
+++ b/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
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
index a5c97b456..4bc1f4c15 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/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,
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
index f38f1aee5..313af86bd 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
+++ b/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>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
index 4c77523c4..eb037673c 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/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"