chore: Update filter input UI design (#12081)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4726/filter-ui-design-is-broken-on-contacts-page

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Screenshots**

**Before**
<img width="744" height="237" alt="image"
src="https://github.com/user-attachments/assets/3ebc53da-70a8-48b9-84fb-51f4b9a35de3"
/>

<img width="779" height="327" alt="image"
src="https://github.com/user-attachments/assets/6cecb500-fb2e-4834-8d12-a66fb6d568e6"
/>

<img width="779" height="209" alt="image"
src="https://github.com/user-attachments/assets/290b02d3-6845-4f24-88ce-3b081f81d5b5"
/>



**After**
<img width="744" height="237" alt="image"
src="https://github.com/user-attachments/assets/2dd15b1f-962b-45b4-8c83-ad286fde9c06"
/>

<img width="779" height="327" alt="image"
src="https://github.com/user-attachments/assets/3442d0d4-82ac-4b0c-9e3a-657fb7c91b30"
/>

<img width="779" height="209" alt="image"
src="https://github.com/user-attachments/assets/91a058fe-1334-4dee-8a24-c65b3df6e260"
/>

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

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

@@ -2,6 +2,7 @@
 import { computed, defineModel, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
 import MultiSelect from './inputs/MultiSelect.vue';
 import SingleSelect from './inputs/SingleSelect.vue';
@@ -178,11 +179,11 @@ defineExpose({ validate });
           disable-search
           :options="booleanOptions"
         />
-        <input
+        <Input
           v-else
           v-model="values"
           :type="inputType === 'date' ? 'date' : 'text'"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base"
+          class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
           :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
         />
       </template>

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

@@ -9,6 +9,7 @@ import { useContactFilterContext } from './contactProvider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
 import Button from 'next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import ConditionRow from './ConditionRow.vue';
 
 const props = defineProps({
@@ -109,16 +110,13 @@ const outsideClickHandler = [
       {{ filterModalHeaderTitle }}
     </h3>
     <div v-if="props.isSegmentView">
-      <label class="pb-6 border-b border-n-weak">
+      <div class="pb-6 border-b border-n-weak">
-        <div class="mb-2 text-sm text-n-slate-11">
+        <Input
-          {{ $t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL') }}
-        </div>
-        <input
           v-model="segmentNameLocal"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :label="$t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL')"
           :placeholder="t('CONTACTS_LAYOUT.FILTER.SEGMENT.INPUT_PLACEHOLDER')"
         />
-      </label>
+      </div>
     </div>
     <ul class="grid gap-4 list-none">
       <template v-for="(filter, index) in filters" :key="filter.id">

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

@@ -9,6 +9,7 @@ import { useConversationFilterContext } from './provider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
 import Button from 'next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import ConditionRow from './ConditionRow.vue';
 
 const props = defineProps({
@@ -110,16 +111,13 @@ const outsideClickHandler = [
       {{ filterModalHeaderTitle }}
     </h3>
     <div v-if="props.isFolderView">
-      <label class="border-b border-n-weak pb-6">
+      <div class="border-b border-n-weak pb-6">
-        <div class="text-n-slate-11 text-sm mb-2">
+        <Input
-          {{ t('FILTER.FOLDER_LABEL') }}
-        </div>
-        <input
           v-model="folderNameLocal"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :label="t('FILTER.FOLDER_LABEL')"
           :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
         />
-      </label>
+      </div>
     </div>
     <ul class="grid gap-4 list-none">
       <template v-for="(filter, index) in filters" :key="filter.id">

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

@@ -6,10 +6,12 @@ import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { vOnClickOutside } from '@vueuse/components';
 import { useTrack } from 'dashboard/composables';
 import NextButton from 'next/button/Button.vue';
+import NextInput from 'dashboard/components-next/input/Input.vue';
 
 export default {
   components: {
     NextButton,
+    NextInput,
   },
   directives: {
     onClickOutside: vOnClickOutside,
@@ -103,20 +105,13 @@ export default {
       {{ $t('FILTER.CUSTOM_VIEWS.ADD.TITLE') }}
     </h3>
     <form class="w-full grid gap-6" @submit.prevent="saveCustomViews">
-      <label :class="{ error: v$.name.$error }">
+      <NextInput
-        <input
+        v-model="name"
-          v-model="name"
+        :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+        :message="v$.name.$error && $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE')"
-          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+        :message-type="v$.name.$error && 'error'"
-          @blur="v$.name.$touch"
+        @blur="v$.name.$touch"
-        />
+      />
-        <span
-          v-if="v$.name.$error"
-          class="text-xs text-n-ruby-11 ml-1 rtl:mr-1"
-        >
-          {{ $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') }}
-        </span>
-      </label>
       <div class="flex flex-row justify-end w-full gap-2">
         <NextButton faded slate sm @click.prevent="onClose">
           {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}