style: better spacing

frontend/src/components/Settings/EmailAccountCard.vue

@@ -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>
-        <div class="text-sm text-ink-gray-4">{{ emailAccount.email_id }}</div>
+        <div class="text-p-sm text-ink-gray-5">{{ emailAccount.email_id }}</div>
       </div>
     </div>
     <div>

frontend/src/components/Settings/EmailAccountList.vue

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

frontend/src/components/Settings/EmailTemplate/EmailTemplates.vue

@@ -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="flex flex-col w-4/6 pr-5">
-              <div class="text-base font-medium text-ink-gray-7 truncate">
+              <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>

frontend/src/components/Settings/General/GeneralSettings.vue

@@ -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="flex flex-col">
-          <div class="text-base font-medium text-ink-gray-7 truncate">
+          <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="flex flex-col">
-          <div class="text-base font-medium text-ink-gray-7 truncate">
+          <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 CRM’s main currency. All monetary values will use this. This can’t 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="flex flex-col">
-            <div class="text-base font-medium text-ink-gray-7 truncate">
+            <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>

frontend/src/components/Settings/Users.vue

@@ -98,11 +98,11 @@
                 :label="user.full_name"
                 size="xl"
               />
-              <div class="flex flex-col gap-1 ml-3">
+              <div class="flex flex-col ml-3">
-                <div class="flex items-center text-base text-ink-gray-8 h-4">
+                <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>