fix: dark mode fixes for email account setting

frontend/src/components/Settings/ERPNextSettings.vue

@@ -1,8 +1,8 @@
 <template>
   <SettingsPage
     doctype="ERPNext CRM Settings"
-    :title="__('ERPNext Settings')"
+    :title="__('ERPNext settings')"
-    :successMessage="__('ERPNext Settings updated')"
+    :successMessage="__('ERPNext settings updated')"
     class="p-8"
   />
 </template>

frontend/src/components/Settings/EmailAccountCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
+    class="flex items-center justify-between p-1 py-3 border-b border-outline-gray-modals cursor-pointer"
   >
     <!-- avatar and name -->
     <div class="flex items-center justify-between gap-2">
@@ -9,11 +9,11 @@
         <p class="text-sm font-semibold text-ink-gray-9">
           {{ emailAccount.email_account_name }}
         </p>
-        <div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
+        <div class="text-sm text-ink-gray-4">{{ emailAccount.email_id }}</div>
       </div>
     </div>
     <div>
-      <Badge variant="subtle" :label="badgeTitle" :theme="gray" />
+      <Badge variant="subtle" :label="badgeTitle" theme="gray" />
     </div>
     <!-- email id -->
   </div>

frontend/src/components/Settings/EmailAccountList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- header -->
-    <div class="flex justify-between">
+    <div class="flex justify-between text-ink-gray-9">
       <div class="flex flex-col gap-1 w-9/12">
         <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
           {{ __('Email accounts') }}
@@ -38,7 +38,7 @@
       </div>
     </div>
     <!-- fallback if no email accounts -->
-    <div v-else class="flex items-center justify-center h-64 text-gray-500">
+    <div v-else class="flex items-center justify-center h-64 text-ink-gray-4">
       {{ __('Please add an email account to continue.') }}
     </div>
   </div>

frontend/src/components/Settings/EmailAdd.vue

@@ -5,7 +5,7 @@
       <h2 class="text-xl font-semibold text-ink-gray-9">
         {{ __('Setup Email') }}
       </h2>
-      <p class="text-sm text-gray-600">
+      <p class="text-sm text-ink-gray-5">
         {{ __('Choose the email service provider you want to configure.') }}
       </p>
     </div>
@@ -27,14 +27,15 @@
     <div v-if="selectedService" class="flex flex-col gap-4">
       <!-- email service provider info -->
       <div
-        class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700 text-gray-700 dark:text-gray-500"
+        class="flex items-center gap-2 p-2 rounded-md ring-1 ring-outline-gray-3 text-ink-gray-6"
       >
         <CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
         <div class="text-xs text-wrap">
           {{ selectedService.info }}
-          <a :href="selectedService.link" target="_blank" class="underline"
+          <a :href="selectedService.link" target="_blank" class="underline">
-            >here</a
+            {{ __('here') }}
-          >.
+          </a>
+          .
         </div>
       </div>
       <!-- service provider fields -->
@@ -66,23 +67,22 @@
               :name="field.name"
               :type="field.type"
             />
-            <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
+            <p class="text-ink-gray-4 text-p-sm">{{ field.description }}</p>
           </div>
         </div>
-        <ErrorMessage v-if="error" class="ml-1" :message="error" />
+        <ErrorMessage class="ml-1" :message="error" />
       </div>
     </div>
     <!-- action button -->
     <div v-if="selectedService" class="flex justify-between mt-auto">
       <Button
-        label="Back"
+        :label="__('Back')"
-        theme="gray"
         variant="outline"
         :disabled="addEmailRes.loading"
         @click="emit('update:step', 'email-list')"
       />
       <Button
-        label="Create"
+        :label="__('Create')"
         variant="solid"
         :loading="addEmailRes.loading"
         @click="createEmailAccount"

frontend/src/components/Settings/EmailEdit.vue

@@ -14,16 +14,16 @@
     </div>
     <!-- banner for setting up email account -->
     <div
-      class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700"
+      class="flex items-center gap-2 p-2 rounded-md ring-1 ring-outline-gray-3"
     >
       <CircleAlert
-        class="size-6 text-gray-500 w-min-5 w-max-5 min-h-5 max-w-5"
+        class="size-6 text-ink-gray-4 w-min-5 w-max-5 min-h-5 max-w-5"
       />
-      <div class="text-xs text-gray-700 dark:text-gray-500 text-wrap">
+      <div class="text-xs text-ink-gray-6 text-wrap">
         {{ info.description }}
-        <a :href="info.link" target="_blank" class="underline">{{
+        <a :href="info.link" target="_blank" class="underline">
-          __('here')
+          {{ __('here') }}
-        }}</a>
+        </a>
         .
       </div>
     </div>
@@ -56,7 +56,7 @@
             :name="field.name"
             :type="field.type"
           />
-          <p class="text-gray-500 text-p-sm">{{ field.description }}</p>
+          <p class="text-ink-gray-4 text-p-sm">{{ field.description }}</p>
         </div>
       </div>
       <ErrorMessage v-if="error" class="ml-1" :message="error" />

frontend/src/components/Settings/EmailProviderIcon.vue

@@ -1,14 +1,11 @@
 <template>
   <div
-    class="flex items-center justify-center w-8 h-8 bg-gray-100 cursor-pointer rounded-xl hover:bg-gray-200"
+    class="flex items-center justify-center w-8 h-8 bg-surface-gray-2 cursor-pointer rounded-xl hover:bg-surface-gray-3"
-    :class="{ 'ring-2 ring-gray-500 dark:ring-gray-100': selected }"
+    :class="{ 'ring-2 ring-outline-gray-4': selected }"
   >
     <img :src="logo" class="w-4 h-4" />
   </div>
-  <p
+  <p v-if="serviceName" class="text-xs text-center text-ink-gray-6 mt-2">
-    v-if="serviceName"
-    class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
-  >
     {{ serviceName }}
   </p>
 </template>
@@ -29,5 +26,3 @@ defineProps({
   },
 })
 </script>
-
-<style scoped></style>

frontend/src/components/Settings/ProfileImageEditor.vue

@@ -1,58 +0,0 @@
-<template>
-  <FileUploader
-    @success="(file) => setUserImage(file.file_url)"
-    :validateFile="validateIsImageFile"
-  >
-    <template v-slot="{ file, progress, error, uploading, openFileSelector }">
-      <div class="flex flex-col items-center">
-        <button
-          class="group relative rounded-full border-2"
-          @click="openFileSelector"
-        >
-          <div
-            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-ink-gray-5 transition-opacity"
-            :class="[
-              uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
-              'drop-shadow-sm',
-            ]"
-          >
-            <span
-              class="inline-block rounded-md bg-surface-gray-7/60 px-2 py-1 text-ink-white"
-            >
-              {{
-                uploading
-                  ? `Uploading ${progress}%`
-                  : profile.user_image
-                  ? 'Change Image'
-                  : 'Upload Image'
-              }}
-            </span>
-          </div>
-          <img
-            v-if="profile.user_image"
-            class="h-64 w-64 rounded-full object-cover"
-            :src="profile.user_image"
-            alt="Profile Photo"
-          />
-          <div v-else class="h-64 w-64 rounded-full bg-surface-gray-2"></div>
-        </button>
-        <ErrorMessage class="mt-4" :message="error" />
-        <div class="mt-4 flex items-center gap-4">
-          <Button v-if="profile.user_image" @click="setUserImage(null)">
-            Remove
-          </Button>
-        </div>
-      </div>
-    </template>
-  </FileUploader>
-</template>
-<script setup>
-import { FileUploader } from 'frappe-ui'
-import { validateIsImageFile } from '@/utils';
-
-const profile = defineModel()
-
-function setUserImage(url) {
-  profile.value.user_image = url
-}
-</script>

frontend/src/components/Settings/ProfileSettings.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
-    <div class="flex-1 flex flex-col gap-8 mt-2 overflow-y-auto">
+    <div class="flex-1 flex flex-col gap-6 mt-2 overflow-y-auto">
       <div v-if="profile" class="flex w-full items-center justify-between">
         <FileUploader
           @success="(file) => updateImage(file.file_url)"