style: better spacing

This commit is contained in:
Shariq Ansari 2025-07-10 16:59:09 +05:30
parent 36320f61ab
commit 328959cc39
5 changed files with 29 additions and 22 deletions

View File

@ -1,15 +1,15 @@
<template>
<div
class="flex items-center justify-between p-1 py-3 border-b border-outline-gray-modals cursor-pointer"
class="flex items-center justify-between px-2 py-3 border-outline-gray-modals cursor-pointer hover:bg-surface-menu-bar rounded"
>
<!-- avatar and name -->
<div class="flex items-center justify-between gap-2">
<EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
<div>
<p class="text-sm font-semibold text-ink-gray-8">
<div class="text-p-base text-ink-gray-8">
{{ emailAccount.email_account_name }}
</p>
<div class="text-sm text-ink-gray-4">{{ emailAccount.email_id }}</div>
</div>
<div class="text-p-sm text-ink-gray-5">{{ emailAccount.email_id }}</div>
</div>
</div>
<div>

View File

@ -30,11 +30,18 @@
v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
class="mt-4"
>
<div v-for="emailAccount in emailAccounts.data" :key="emailAccount.name">
<div
v-for="(emailAccount, i) in emailAccounts.data"
:key="emailAccount.name"
>
<EmailAccountCard
:emailAccount="emailAccount"
@click="emit('update:step', 'email-edit', emailAccount)"
/>
<div
v-if="emailAccounts.data.length !== i + 1"
class="h-px border-t mx-2 border-outline-gray-modals"
/>
</div>
</div>
<!-- fallback if no email accounts -->

View File

@ -91,11 +91,11 @@
class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
@click="() => emit('updateStep', 'edit-template', { ...template })"
>
<div class="flex flex-col gap-0.5 w-4/6 pr-5">
<div class="text-base font-medium text-ink-gray-7 truncate">
<div class="flex flex-col w-4/6 pr-5">
<div class="text-p-base font-medium text-ink-gray-7 truncate">
{{ template.name }}
</div>
<div class="text-base text-ink-gray-5 truncate">
<div class="text-p-sm text-ink-gray-5 truncate">
{{ template.subject }}
</div>
</div>

View File

@ -14,11 +14,11 @@
class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
@click="toggleForecasting()"
>
<div class="flex flex-col gap-0.5">
<div class="text-base font-medium text-ink-gray-7 truncate">
<div class="flex flex-col">
<div class="text-p-base font-medium text-ink-gray-7 truncate">
{{ __('Enable forecasting') }}
</div>
<div class="text-base text-ink-gray-5 truncate">
<div class="text-p-sm text-ink-gray-5 truncate">
{{
__(
"It will make deal's `Close Date` & `Deal Value` mandatory to get accurate forecasting insights",
@ -38,11 +38,11 @@
<div
class="flex items-center justify-between gap-8 p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
>
<div class="flex flex-col gap-0.5">
<div class="text-base font-medium text-ink-gray-7 truncate">
<div class="flex flex-col">
<div class="text-p-base font-medium text-ink-gray-7 truncate">
{{ __('Currency') }}
</div>
<div class="text-base text-ink-gray-5">
<div class="text-p-sm text-ink-gray-5">
{{
__(
'Set your CRMs main currency. All monetary values will use this. This cant be changed later.',
@ -58,7 +58,7 @@
doctype="Currency"
@change="(v) => setCurrency(v)"
:placeholder="__('Select currency')"
:disabled="settings.doc.currency"
:disabled="settings.doc.currency ? true : false"
placement="bottom-end"
/>
</div>
@ -69,11 +69,11 @@
class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
@click="() => emit('updateStep', setting.name)"
>
<div class="flex flex-col gap-0.5">
<div class="text-base font-medium text-ink-gray-7 truncate">
<div class="flex flex-col">
<div class="text-p-base font-medium text-ink-gray-7 truncate">
{{ __(setting.label) }}
</div>
<div class="text-base text-ink-gray-5 truncate">
<div class="text-p-sm text-ink-gray-5 truncate">
{{ __(setting.description) }}
</div>
</div>
@ -82,7 +82,7 @@
</div>
</li>
<div
v-if="settingsList !== i + 1"
v-if="settingsList.length !== i + 1"
class="h-px border-t mx-2 border-outline-gray-modals"
/>
</template>

View File

@ -98,11 +98,11 @@
:label="user.full_name"
size="xl"
/>
<div class="flex flex-col gap-1 ml-3">
<div class="flex items-center text-base text-ink-gray-8 h-4">
<div class="flex flex-col ml-3">
<div class="flex items-center text-p-base text-ink-gray-8">
{{ user.full_name }}
</div>
<div class="text-base text-ink-gray-5">
<div class="text-p-sm text-ink-gray-5">
{{ user.name }}
</div>
</div>