test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode fixes for email account setting

Browse Source
This commit is contained in:
Shariq Ansari 2025-06-20 17:42:10 +05:30
parent 96c8aae01e
commit eee1190f10
8 changed files with 29 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Settings/ERPNextSettings.vue
View File

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

6
frontend/src/components/Settings/EmailAccountCard.vue
View File

@ -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>

4
frontend/src/components/Settings/EmailAccountList.vue
View File

@ -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>

20
frontend/src/components/Settings/EmailAdd.vue
View File

@ -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"
>here</a
>.
<a :href="selectedService.link" target="_blank" class="underline">
{{ __('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"
theme="gray"
:label="__('Back')"
variant="outline"
:disabled="addEmailRes.loading"
@click="emit('update:step', 'email-list')"
/>
<Button
label="Create"
:label="__('Create')"
variant="solid"
:loading="addEmailRes.loading"
@click="createEmailAccount"

14
frontend/src/components/Settings/EmailEdit.vue
View File

@ -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">{{
__('here')
}}</a>
<a :href="info.link" target="_blank" class="underline">
{{ __('here') }}
</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" />

11
frontend/src/components/Settings/EmailProviderIcon.vue
View File

@ -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="{ 'ring-2 ring-gray-500 dark:ring-gray-100': selected }"
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-outline-gray-4': selected }"
>
<img :src="logo" class="w-4 h-4" />
</div>
<p
v-if="serviceName"
class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
>
<p v-if="serviceName" class="text-xs text-center text-ink-gray-6 mt-2">
{{ serviceName }}
</p>
</template>
@ -29,5 +26,3 @@ defineProps({
},
})
</script>
<style scoped></style>

58
frontend/src/components/Settings/ProfileImageEditor.vue
View File

@ -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>

4
frontend/src/components/Settings/ProfileSettings.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
<div class="flex-1 flex flex-col gap-8 mt-2 overflow-y-auto">
<div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
<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)"