Skip to content

Commit de806ee

Browse files
pratikb64pratikb64
authored
Merge pull request #753 from pratikb64/email-account-dark-mode
fix: dark mode email account css
2 parents 2059ecd + 9c45877 commit de806ee

File tree

5 files changed

+258
-171
lines changed

5 files changed

+258
-171
lines changed

Diff for: ‎frontend/src/components/Settings/EmailAccountCard.vue

+16-21
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,50 @@
11
<template>
2-
<div class="flex items-center justify-between p-1 border-b border-gray-200 cursor-pointer">
2+
<div
3+
class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
4+
>
35
<!-- avatar and name -->
46
<div class="flex items-center justify-between gap-2">
57
<EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
68
<div>
7-
<p class="text-sm font-semibold text-gray-700">
9+
<p class="text-sm font-semibold text-ink-gray-9">
810
{{ emailAccount.email_account_name }}
911
</p>
1012
<div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
1113
</div>
1214
</div>
1315
<div>
14-
<Badge variant="subtle" :label="badgeTitleColor[0]" :theme="badgeTitleColor[1]" />
16+
<Badge variant="subtle" :label="badgeTitleColor" :theme="gray" />
1517
</div>
1618
<!-- email id -->
1719
</div>
1820
</template>
1921

2022
<script setup>
21-
import { emailIcon } from "./emailConfig";
22-
import EmailProviderIcon from "./EmailProviderIcon.vue";
23-
import { computed } from "vue";
23+
import { emailIcon } from './emailConfig'
24+
import EmailProviderIcon from './EmailProviderIcon.vue'
25+
import { computed } from 'vue'
2426
2527
const props = defineProps({
2628
emailAccount: {
2729
type: Object,
28-
required: true
29-
}
30-
});
30+
required: true,
31+
},
32+
})
3133
3234
const badgeTitleColor = computed(() => {
3335
if (
3436
props.emailAccount.default_incoming &&
3537
props.emailAccount.default_outgoing
3638
) {
37-
const color =
38-
props.emailAccount.enable_incoming && props.emailAccount.enable_outgoing
39-
? "blue"
40-
: "gray";
41-
return ["Default Sending and Inbox", color];
39+
return 'Default Sending and Inbox'
4240
} else if (props.emailAccount.default_incoming) {
43-
const color = props.emailAccount.enable_incoming ? "blue" : "gray";
44-
return ["Default Inbox", color];
41+
return 'Default Inbox'
4542
} else if (props.emailAccount.default_outgoing) {
46-
const color = props.emailAccount.enable_outgoing ? "blue" : "gray";
47-
return ["Default Sending", color];
43+
return 'Default Sending'
4844
} else {
49-
const color = props.emailAccount.enable_incoming ? "blue" : "gray";
50-
return ["Inbox", color];
45+
return 'Inbox'
5146
}
52-
});
47+
})
5348
</script>
5449

5550
<style scoped></style>

Diff for: ‎frontend/src/components/Settings/EmailAccountList.vue

+31-17
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
<template>
22
<div>
33
<!-- header -->
4-
<div class="flex items-center justify-between">
5-
<h1 class="text-xl font-semibold">Email Accounts</h1>
6-
<Button label="Add Account" theme="gray" variant="solid" @click="emit('update:step', 'email-add')" class="mr-8">
4+
<div class="flex items-center justify-between text-ink-gray-9">
5+
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
6+
Email Accounts
7+
</h2>
8+
<Button
9+
label="Add Account"
10+
theme="gray"
11+
variant="solid"
12+
@click="emit('update:step', 'email-add')"
13+
class="mr-8"
14+
>
715
<template #prefix>
816
<LucidePlus class="w-4 h-4" />
917
</template>
1018
</Button>
1119
</div>
1220
<!-- list accounts -->
13-
<div v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)" class="mt-4">
21+
<div
22+
v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
23+
class="mt-4"
24+
>
1425
<div v-for="emailAccount in emailAccounts.data" :key="emailAccount.name">
15-
<EmailAccountCard :emailAccount="emailAccount" @click="emit('update:step', 'email-edit', emailAccount)" />
26+
<EmailAccountCard
27+
:emailAccount="emailAccount"
28+
@click="emit('update:step', 'email-edit', emailAccount)"
29+
/>
1630
</div>
1731
</div>
1832
<!-- fallback if no email accounts -->
@@ -23,28 +37,28 @@
2337
</template>
2438

2539
<script setup>
26-
import { createListResource } from "frappe-ui";
27-
import EmailAccountCard from "./EmailAccountCard.vue";
40+
import { createListResource } from 'frappe-ui'
41+
import EmailAccountCard from './EmailAccountCard.vue'
2842
29-
const emit = defineEmits(["update:step"]);
43+
const emit = defineEmits(['update:step'])
3044
3145
const emailAccounts = createListResource({
32-
doctype: "Email Account",
46+
doctype: 'Email Account',
3347
cache: true,
34-
fields: ["*"],
48+
fields: ['*'],
3549
filters: {
36-
email_id: ["Not Like", "%example%"],
50+
email_id: ['Not Like', '%example%'],
3751
},
3852
pageLength: 10,
3953
auto: true,
4054
onSuccess: (accounts) => {
4155
// convert 0 to false to handle boolean fields
4256
accounts.forEach((account) => {
43-
account.enable_incoming = Boolean(account.enable_incoming);
44-
account.enable_outgoing = Boolean(account.enable_outgoing);
45-
account.default_incoming = Boolean(account.default_incoming);
46-
account.default_outgoing = Boolean(account.default_outgoing);
47-
});
57+
account.enable_incoming = Boolean(account.enable_incoming)
58+
account.enable_outgoing = Boolean(account.enable_outgoing)
59+
account.default_incoming = Boolean(account.default_incoming)
60+
account.default_outgoing = Boolean(account.default_outgoing)
61+
})
4862
},
49-
});
63+
})
5064
</script>

Diff for: ‎frontend/src/components/Settings/EmailAdd.vue

+89-49
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,68 @@
22
<div class="flex flex-col h-full gap-4">
33
<!-- title and desc -->
44
<div role="heading" aria-level="1" class="flex flex-col gap-1">
5-
<h5 class="text-xl font-semibold">Setup Email</h5>
5+
<h2 class="text-xl font-semibold text-ink-gray-9">Setup Email</h2>
66
<p class="text-sm text-gray-600">
77
Choose the email service provider you want to configure.
88
</p>
99
</div>
1010
<!-- email service provider selection -->
1111
<div class="flex flex-wrap items-center">
12-
<div v-for="s in services" :key="s.name" class="flex flex-col items-center gap-1 mt-4 w-[70px]"
13-
@click="handleSelect(s)">
14-
<EmailProviderIcon :service-name="s.name" :logo="s.icon" :selected="selectedService?.name === s?.name" />
12+
<div
13+
v-for="s in services"
14+
:key="s.name"
15+
class="flex flex-col items-center gap-1 mt-4 w-[70px]"
16+
@click="handleSelect(s)"
17+
>
18+
<EmailProviderIcon
19+
:service-name="s.name"
20+
:logo="s.icon"
21+
:selected="selectedService?.name === s?.name"
22+
/>
1523
</div>
1624
</div>
1725
<div v-if="selectedService" class="flex flex-col gap-4">
1826
<!-- email service provider info -->
19-
<div class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-200">
20-
<CircleAlert class="w-5 h-6 text-blue-500 w-min-5 w-max-5 min-h-5 max-w-5" />
21-
<div class="text-xs text-gray-700 text-wrap">
27+
<div
28+
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"
29+
>
30+
<CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
31+
<div class="text-xs text-wrap">
2232
{{ selectedService.info }}
23-
<a :href="selectedService.link" target="_blank" class="text-blue-500 underline">here</a>.
33+
<a :href="selectedService.link" target="_blank" class="underline"
34+
>here</a
35+
>.
2436
</div>
2537
</div>
2638
<!-- service provider fields -->
2739
<div class="flex flex-col gap-4">
2840
<div class="grid grid-cols-1 gap-4">
29-
<div v-for="field in fields" :key="field.name" class="flex flex-col gap-1">
30-
<FormControl v-model="state[field.name]" :label="field.label" :name="field.name" :type="field.type"
31-
:placeholder="field.placeholder" />
41+
<div
42+
v-for="field in fields"
43+
:key="field.name"
44+
class="flex flex-col gap-1"
45+
>
46+
<FormControl
47+
v-model="state[field.name]"
48+
:label="field.label"
49+
:name="field.name"
50+
:type="field.type"
51+
:placeholder="field.placeholder"
52+
/>
3253
</div>
3354
</div>
3455
<div class="grid grid-cols-2 gap-4">
35-
<div v-for="field in incomingOutgoingFields" :key="field.name" class="flex flex-col gap-1">
36-
<FormControl v-model="state[field.name]" :label="field.label" :name="field.name" :type="field.type" />
56+
<div
57+
v-for="field in incomingOutgoingFields"
58+
:key="field.name"
59+
class="flex flex-col gap-1"
60+
>
61+
<FormControl
62+
v-model="state[field.name]"
63+
:label="field.label"
64+
:name="field.name"
65+
:type="field.type"
66+
/>
3767
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
3868
</div>
3969
</div>
@@ -42,79 +72,89 @@
4272
</div>
4373
<!-- action button -->
4474
<div v-if="selectedService" class="flex justify-between mt-auto">
45-
<Button label="Back" theme="gray" variant="outline" :disabled="addEmailRes.loading"
46-
@click="emit('update:step', 'email-list')" />
47-
<Button label="Create" variant="solid" :loading="addEmailRes.loading" @click="createEmailAccount" />
75+
<Button
76+
label="Back"
77+
theme="gray"
78+
variant="outline"
79+
:disabled="addEmailRes.loading"
80+
@click="emit('update:step', 'email-list')"
81+
/>
82+
<Button
83+
label="Create"
84+
variant="solid"
85+
:loading="addEmailRes.loading"
86+
@click="createEmailAccount"
87+
/>
4888
</div>
4989
</div>
5090
</template>
5191

5292
<script setup>
53-
import { computed, reactive, ref } from "vue";
54-
import { createResource } from "frappe-ui";
55-
import CircleAlert from "~icons/lucide/circle-alert";
56-
import { createToast } from "@/utils";
93+
import { computed, reactive, ref } from 'vue'
94+
import { createResource } from 'frappe-ui'
95+
import CircleAlert from '~icons/lucide/circle-alert'
96+
import { createToast } from '@/utils'
5797
import {
5898
customProviderFields,
5999
popularProviderFields,
60100
services,
61101
validateInputs,
62102
incomingOutgoingFields,
63-
} from "./emailConfig";
64-
import EmailProviderIcon from "./EmailProviderIcon.vue";
103+
} from './emailConfig'
104+
import EmailProviderIcon from './EmailProviderIcon.vue'
65105
66-
const emit = defineEmits();
106+
const emit = defineEmits()
67107
68108
const state = reactive({
69-
service: "",
70-
email_account_name: "",
71-
email_id: "",
72-
password: "",
73-
api_key: "",
74-
api_secret: "",
75-
frappe_mail_site: "",
109+
service: '',
110+
email_account_name: '',
111+
email_id: '',
112+
password: '',
113+
api_key: '',
114+
api_secret: '',
115+
frappe_mail_site: '',
76116
enable_incoming: false,
77117
enable_outgoing: false,
78118
default_incoming: false,
79119
default_outgoing: false,
80-
});
120+
})
81121
82-
const selectedService = ref(null);
122+
const selectedService = ref(null)
83123
const fields = computed(() =>
84-
selectedService.value.custom ? customProviderFields : popularProviderFields
85-
);
124+
selectedService.value.custom ? customProviderFields : popularProviderFields,
125+
)
86126
87127
function handleSelect(service) {
88-
selectedService.value = service;
89-
state.service = service.name;
128+
selectedService.value = service
129+
state.service = service.name
90130
}
91131
92132
const addEmailRes = createResource({
93-
url: "crm.api.settings.create_email_account",
133+
url: 'crm.api.settings.create_email_account',
94134
makeParams: (val) => {
95135
return {
96136
...val,
97-
};
137+
}
98138
},
99139
onSuccess: () => {
100140
createToast({
101-
title: "Email account created successfully",
102-
icon: "check",
103-
iconClasses: "text-green-600",
104-
});
105-
emit("update:step", "email-list");
141+
title: 'Email account created successfully',
142+
icon: 'check',
143+
iconClasses: 'text-green-600',
144+
})
145+
emit('update:step', 'email-list')
106146
},
107147
onError: () => {
108-
error.value = "Failed to create email account, Invalid credentials";
148+
error.value = 'Failed to create email account, Invalid credentials'
109149
},
110-
});
150+
})
111151
112-
const error = ref();
152+
const error = ref()
113153
function createEmailAccount() {
114-
error.value = validateInputs(state, selectedService.value.custom);
115-
if (error.value) return;
154+
error.value = validateInputs(state, selectedService.value.custom)
155+
if (error.value) return
116156
117-
addEmailRes.submit({ data: state });
157+
addEmailRes.submit({ data: state })
118158
}
119159
</script>
120160

0 commit comments

Comments
 (0)