Merge pull request #3499 from RitvikSardana/fix/customer-dark-mode

fix: dark mode issues

desk/src/components/customer/ContactCard.vue

@@ -131,10 +131,10 @@ const contactDetails = computed(() => [
   },
   {
     icon: markRaw(ModifiedIcon),
-    value: `Last seen ${
+    value: `${__("Last seen")} ${
       props.contact.last_active
         ? dayjs(props.contact.last_active).fromNow()
-        : "Never"
+        : __("Never")
     }`,
   },
   {
@@ -299,8 +299,8 @@ function removeContact() {
       {
         label: __("Confirm"),
         variant: "solid",
-        onClick: ({ close }: { close: () => void }) =>
-          customer.setValue.submit(
+        onClick: ({ close }: { close: () => void }) => {
+          return customer.setValue.submit(
             {
               contacts: customer.doc.contacts?.filter(
                 (c) => c.contact_name !== props.contact.contact_name
@@ -316,7 +316,8 @@ function removeContact() {
                 getErrorMessage(error, true);
               },
             }
-          ),
+          );
+        },
       },
     ],
   });

desk/src/components/customer/EditCustomerDialog.vue

@@ -11,7 +11,7 @@
         <div class="mb-6 flex items-center justify-between">
           <div class="flex items-center gap-2">
             <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
-              Edit Customer
+              {{ __("Edit Customer") }}
             </h3>
             <Badge
               v-if="isDirty"

desk/src/pages/contact/Contact.vue

@@ -43,7 +43,11 @@
       </PageInfo>
       <div class="overflow-y-auto flex-1 flex flex-col">
         <TicketStats :dt="'Contact'" :dn="id" v-if="!isMobileView" />
-        <Tabs v-model="activeTab" :tabs="tabs" class="tabs-sticky-header">
+        <Tabs
+          v-model="activeTab"
+          :tabs="tabs"
+          class="tabs-sticky-header [&_[role='tablist']]:!bg-surface-white"
+        >
           <template #tab-item="{ tab, selected }: any">
             <button
               class="group flex items-center gap-2 border-b border-transparent py-2 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9"
@@ -52,12 +56,7 @@
               <component :is="tab.icon" v-if="tab.icon" class="h-5" />
               {{ __(tab.label) }}
               <Badge
-                class="group-hover:bg-surface-gray-7"
-                :class="[
-                  selected
-                    ? '!bg-surface-gray-7'
-                    : '!bg-surface-gray-2 !text-ink-gray-7',
-                ]"
+                class="group-hover:bg-surface-gray-7 !bg-surface-gray-2 !text-ink-gray-7"
                 variant="solid"
                 theme="gray"
                 size="sm"
@@ -237,13 +236,8 @@ const contactInfo = computed(() => {
   return info;
 });
 
-const {
-  resendInvite,
-  inviteAsUser,
-  isLoading: isContactInvitationLoading,
-} = useContactInvite();
-const { resetPassword, isLoading: isResetPasswordLoading } =
-  useContactResetPassword(() => contact.doc?.user);
+const { resendInvite, inviteAsUser } = useContactInvite();
+const { resetPassword } = useContactResetPassword(() => contact.doc?.user);
 
 const showEditDialog = ref(false);
 

desk/src/pages/customer/Customer.vue

@@ -39,7 +39,11 @@
           v-if="!isMobileView"
         />
         <!-- Tabs -->
-        <Tabs v-model="activeTab" :tabs="tabs" class="tabs-sticky-header">
+        <Tabs
+          v-model="activeTab"
+          :tabs="tabs"
+          class="tabs-sticky-header [&_[role='tablist']]:!bg-surface-white"
+        >
           <template #tab-item="{ tab, selected }">
             <button
               class="group flex items-center gap-2 border-b border-transparent py-2 text-base text-ink-gray-5 duration-300 ease-in-out hover:text-ink-gray-9"
@@ -48,12 +52,7 @@
               <component :is="tab.icon" v-if="tab.icon" class="h-5" />
               {{ __(tab.label) }}
               <Badge
-                class="group-hover:bg-surface-gray-7"
-                :class="[
-                  selected
-                    ? '!bg-surface-gray-7'
-                    : '!bg-surface-gray-2 !text-ink-gray-7',
-                ]"
+                class="group-hover:bg-surface-gray-7 !bg-surface-gray-2 !text-ink-gray-7"
                 variant="solid"
                 theme="gray"
                 size="sm"