From e42f2deab569f0c261c6145e0830452a8f026abd Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 7 Jan 2026 13:31:21 +0530
Subject: [PATCH] chore: Update typography in contacts page

---
 .../Companies/CompaniesDropdown.vue           | 37 +++++++++++++++++--
 .../Contacts/ContactsCard/AddContactNote.vue  |  2 +-
 .../Contacts/ContactsCard/ContactCardForm.vue |  4 +-
 .../Contacts/ContactsCard/ContactsCard.vue    | 14 +++----
 .../Contacts/ContactsHeader/ContactHeader.vue |  2 +-
 .../Countries/CountryDropdown.vue             | 37 +++++++++++++++++--
 .../components-next/captain/PageLayout.vue    |  2 +-
 .../dashboard/i18n/locale/en/components.json  |  3 +-
 .../dashboard/captain/responses/Index.vue     |  4 +-
 app/javascript/dashboard/stores/companies.js  |  3 ++
 10 files changed, 86 insertions(+), 22 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesDropdown.vue b/app/javascript/dashboard/components-next/Companies/CompaniesDropdown.vue
index 584c299d4..69b295993 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesDropdown.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesDropdown.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { vOnClickOutside } from '@vueuse/components';
 import { debounce } from '@chatwoot/utils';
@@ -35,6 +35,12 @@ const isSearching = ref(false);
 const companies = computed(() => companiesStore.getCompaniesList || []);
 const isLoading = computed(() => companiesStore.uiFlags.fetchingList);
 
+const clearOption = computed(() => ({
+  label: t('DROPDOWN_MENU.CLEAR_SELECTION'),
+  value: 'clear',
+  action: 'clear',
+}));
+
 const companyOptions = computed(() =>
   companies.value.map(company => ({
     label: company.name,
@@ -44,6 +50,17 @@ const companyOptions = computed(() =>
   }))
 );
 
+const menuItems = computed(() => {
+  const items = [];
+  // Show clear option if a company is selected (either by ID or by name prop)
+  if (companyId.value || props.selectedCompanyName) {
+    items.push(clearOption.value);
+  }
+  // Add company options after clear option
+  items.push(...companyOptions.value);
+  return items;
+});
+
 const selectedCompany = computed(() => {
   return companies.value.find(company => company.id === companyId.value);
 });
@@ -77,7 +94,14 @@ const debouncedSearch = debounce(query => {
   fetchCompanies(query);
 }, 300);
 
-const handleAction = ({ value }) => {
+const handleAction = ({ value, action }) => {
+  if (action === 'clear') {
+    companyId.value = null;
+    emit('change', null);
+    toggleCompanyDropdown(false);
+    return;
+  }
+
   if (companyId.value === value) {
     companyId.value = null;
     emit('change', null);
@@ -96,6 +120,13 @@ const handleSearch = query => {
 const handleClickOutside = () => {
   toggleCompanyDropdown(false);
 };
+
+watch(showCompanyDropdown, isOpen => {
+  if (!isOpen) {
+    searchQuery.value = '';
+    companiesStore.clearRecords();
+  }
+});
 </script>
 
 <template>
@@ -123,7 +154,7 @@ const handleClickOutside = () => {
     >
       <DropdownMenu
         v-if="showCompanyDropdown"
-        :menu-items="companyOptions"
+        :menu-items="menuItems"
         show-search
         disable-local-filtering
         :search-placeholder="t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/AddContactNote.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/AddContactNote.vue
index fd2f056a0..097f4518d 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/AddContactNote.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/AddContactNote.vue
@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div class="flex flex-col items-start gap-4 py-3">
     <span
-      class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+      class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
     >
       <Icon
         icon="i-lucide-file-plus-corner"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
index 1aff304e8..c80d284d3 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
@@ -166,7 +166,7 @@ defineExpose({
 
     <div class="flex flex-col items-start gap-4 pt-2 pb-3">
       <span
-        class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+        class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
       >
         <Icon
           icon="i-lucide-settings-2"
@@ -288,7 +288,7 @@ defineExpose({
 
     <div class="flex flex-col items-start gap-4 py-2">
       <span
-        class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
+        class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
       >
         <Icon
           icon="i-lucide-globe"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index db906a459..7457b6efc 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -176,7 +176,7 @@ const handleAvatarHover = isHovered => {
         </div>
 
         <h4
-          class="text-sm my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 font-medium lg:max-w-40"
+          class="text-heading-3 my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 lg:max-w-40"
           @click="onClickViewDetails"
         >
           {{ name }}
@@ -229,14 +229,14 @@ const handleAvatarHover = isHovered => {
 
         <div
           v-if="companyName"
-          class="text-xs my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 font-440 max-w-40 min-w-0 outline outline-1 outline-n-weak"
+          class="my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 max-w-40 min-w-0 outline outline-1 outline-n-weak"
           :class="{ 'lg:hidden': isExpanded }"
         >
           <Icon
             icon="i-lucide-briefcase-business"
             class="size-3.5 flex-shrink-0 text-n-slate-11"
           />
-          <span class="truncate">{{ companyName }}</span>
+          <span class="truncate text-label-small">{{ companyName }}</span>
         </div>
 
         <div
@@ -247,14 +247,14 @@ const handleAvatarHover = isHovered => {
 
         <span
           v-if="countryDetails"
-          class="inline-flex items-center gap-2 text-sm min-w-0 text-n-slate-11"
+          class="inline-flex items-center gap-2 min-w-0 text-n-slate-11"
           :class="{ 'lg:hidden': isExpanded }"
         >
           <Flag
             :country="countryDetails.countryCode"
             class="size-3.5 flex-shrink-0"
           />
-          <span class="truncate">{{ formattedLocation }}</span>
+          <span class="truncate text-label-small">{{ formattedLocation }}</span>
         </span>
 
         <div
@@ -289,7 +289,7 @@ const handleAvatarHover = isHovered => {
             icon="i-woot-mail"
             class="size-4 flex-shrink-0 text-n-slate-11"
           />
-          <span class="text-sm text-n-slate-12 font-420 truncate">
+          <span class="text-body-main text-n-slate-12 truncate">
             {{ email }}
           </span>
         </div>
@@ -311,7 +311,7 @@ const handleAvatarHover = isHovered => {
             icon="i-lucide-phone"
             class="size-3 flex-shrink-0 text-n-slate-11"
           />
-          <span class="text-sm text-n-slate-12 font-420 truncate">
+          <span class="text-body-main text-n-slate-12 truncate">
             {{ phoneNumber }}
           </span>
         </div>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 563e19d54..5c4438916 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -36,7 +36,7 @@ const emit = defineEmits([
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[105rem] after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
     >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-lg leading-6 font-520 truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
       <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
diff --git a/app/javascript/dashboard/components-next/Countries/CountryDropdown.vue b/app/javascript/dashboard/components-next/Countries/CountryDropdown.vue
index 95ff0951f..9e820c1ee 100644
--- a/app/javascript/dashboard/components-next/Countries/CountryDropdown.vue
+++ b/app/javascript/dashboard/components-next/Countries/CountryDropdown.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { vOnClickOutside } from '@vueuse/components';
 import { useToggle } from '@vueuse/core';
@@ -25,6 +25,12 @@ const { t } = useI18n();
 const [showCountryDropdown, toggleCountryDropdown] = useToggle();
 const searchQuery = ref('');
 
+const clearOption = computed(() => ({
+  label: t('DROPDOWN_MENU.CLEAR_SELECTION'),
+  value: 'clear',
+  action: 'clear',
+}));
+
 const countryOptions = computed(() =>
   countries.map(({ name, id }) => ({
     label: name,
@@ -43,6 +49,14 @@ const filteredCountries = computed(() => {
   );
 });
 
+const menuItems = computed(() => {
+  const items = [...filteredCountries.value];
+  if (countryCode.value) {
+    items.unshift(clearOption.value);
+  }
+  return items;
+});
+
 const selectedCountry = computed(() => {
   return countries.find(country => country.id === countryCode.value);
 });
@@ -54,7 +68,14 @@ const buttonLabel = computed(() => {
   return props.placeholder;
 });
 
-const handleAction = ({ value }) => {
+const handleAction = ({ value, action }) => {
+  if (action === 'clear') {
+    countryCode.value = '';
+    emit('change', null);
+    toggleCountryDropdown(false);
+    return;
+  }
+
   if (countryCode.value === value) {
     countryCode.value = '';
     emit('change', null);
@@ -73,6 +94,10 @@ const handleSearch = query => {
 const handleClickOutside = () => {
   toggleCountryDropdown(false);
 };
+
+watch(showCountryDropdown, isOpen => {
+  if (isOpen) searchQuery.value = '';
+});
 </script>
 
 <template>
@@ -104,7 +129,7 @@ const handleClickOutside = () => {
     >
       <DropdownMenu
         v-if="showCountryDropdown"
-        :menu-items="filteredCountries"
+        :menu-items="menuItems"
         show-search
         :search-placeholder="t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')"
         class="max-h-60 overflow-y-auto absolute z-50 w-full mt-1 top-full min-w-40"
@@ -112,7 +137,11 @@ const handleClickOutside = () => {
         @search="handleSearch"
       >
         <template #icon="{ item }">
-          <Flag :country="item.value" class="size-3" />
+          <Flag
+            v-if="item.value !== 'clear'"
+            :country="item.value"
+            class="size-3"
+          />
         </template>
       </DropdownMenu>
     </Transition>
diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index c9b7043f8..5ee4a814f 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -117,7 +117,7 @@ const handleCreateAssistant = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
     <header
-      class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+      class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none after:z-10"
     >
       <div class="w-full max-w-[60rem] mx-auto">
         <div
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 624fdc81b..2d6fc6351 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -13,7 +13,8 @@
   "DROPDOWN_MENU": {
     "SEARCH_PLACEHOLDER": "Search...",
     "EMPTY_STATE": "No results found.",
-    "SEARCHING": "Searching..."
+    "SEARCHING": "Searching...",
+    "CLEAR_SELECTION": "Clear selection"
   },
   "DIALOG": {
     "BUTTONS": {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
index a286ca088..7ffbe7fba 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -280,11 +280,11 @@ onMounted(() => {
     </template>
 
     <template #body>
-      <LimitBanner class="mb-5" />
+      <LimitBanner class="mb-5 z-20 relative" />
       <Banner
         v-if="pendingCount > 0 && bulkSelectedIds.size === 0"
         color="blue"
-        class="mb-4 -mt-2"
+        class="mb-4 -mt-2 z-20 relative"
         :action-label="$t('CAPTAIN.RESPONSES.PENDING_BANNER.ACTION')"
         @action="navigateToPendingFAQs"
       >
diff --git a/app/javascript/dashboard/stores/companies.js b/app/javascript/dashboard/stores/companies.js
index d1e8e56e9..4f334de75 100644
--- a/app/javascript/dashboard/stores/companies.js
+++ b/app/javascript/dashboard/stores/companies.js
@@ -27,5 +27,8 @@ export const useCompaniesStore = createStore({
         this.setUIFlag({ fetchingList: false });
       }
     },
+    clearRecords() {
+      this.records = [];
+    },
   }),
 });