From e267445a80254f07c80ca363d55d8034caeae4af Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 20 Jun 2025 17:20:12 +0530
Subject: [PATCH] fix: layout change

(cherry picked from commit 0ad65be961ff70f069be78979004820d827a96d0)
---
 .../components/Settings/EmailAccountList.vue  | 37 ++++++++-----
 .../components/Settings/GeneralSettings.vue   | 47 +++++++++-------
 .../components/Settings/InviteUserPage.vue    | 39 +++++++++-----
 .../src/components/Settings/SettingsPage.vue  | 48 +++++++++--------
 .../components/Settings/TelephonySettings.vue | 54 ++++++++++---------
 frontend/src/components/Settings/Users.vue    |  2 +-
 6 files changed, 129 insertions(+), 98 deletions(-)

diff --git a/frontend/src/components/Settings/EmailAccountList.vue b/frontend/src/components/Settings/EmailAccountList.vue
index fe5fe222..192ee910 100644
--- a/frontend/src/components/Settings/EmailAccountList.vue
+++ b/frontend/src/components/Settings/EmailAccountList.vue
@@ -1,21 +1,30 @@
 <template>
   <div>
     <!-- header -->
-    <div class="flex items-center justify-between text-ink-gray-9">
-      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
-        {{ __('Email Accounts') }}
-      </h2>
-      <Button
-        :label="__('Add Account')"
-        theme="gray"
-        variant="solid"
-        @click="emit('update:step', 'email-add')"
-      >
-        <template #prefix>
-          <LucidePlus class="w-4 h-4" />
-        </template>
-      </Button>
+    <div class="flex justify-between">
+      <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') }}
+        </h2>
+        <p class="text-p-base text-ink-gray-6">
+          {{
+            __(
+              'Manage your email accounts to send and receive emails directly from CRM. You can add multiple accounts and set one as default for incoming and outgoing emails.',
+            )
+          }}
+        </p>
+      </div>
+      <div class="flex item-center space-x-2 w-3/12 justify-end">
+        <Button
+          :label="__('Add Account')"
+          theme="gray"
+          variant="solid"
+          icon-left="plus"
+          @click="emit('update:step', 'email-add')"
+        />
+      </div>
     </div>
+
     <!-- list accounts -->
     <div
       v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
diff --git a/frontend/src/components/Settings/GeneralSettings.vue b/frontend/src/components/Settings/GeneralSettings.vue
index b8a3f328..20beff3e 100644
--- a/frontend/src/components/Settings/GeneralSettings.vue
+++ b/frontend/src/components/Settings/GeneralSettings.vue
@@ -1,14 +1,29 @@
 <template>
-  <div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
-    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
-      {{ __('General') }}
-      <Badge
-        v-if="settings.isDirty"
-        :label="__('Not Saved')"
-        variant="subtle"
-        theme="orange"
-      />
-    </h2>
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
+    <div class="flex justify-between">
+      <div class="flex flex-col gap-1 w-9/12">
+        <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
+          {{ __('General') }}
+          <Badge
+            v-if="settings.isDirty"
+            :label="__('Not Saved')"
+            variant="subtle"
+            theme="orange"
+          />
+        </h2>
+        <p class="text-p-base text-ink-gray-6">
+          {{ __('Configure general settings for your CRM') }}
+        </p>
+      </div>
+      <div class="flex item-center space-x-2 w-3/12 justify-end">
+        <Button
+          variant="solid"
+          :label="__('Update')"
+          :disabled="!settings.isDirty"
+          @click="updateSettings"
+        />
+      </div>
+    </div>
 
     <div v-if="settings.doc" class="flex-1 flex flex-col gap-8 overflow-y-auto">
       <div class="flex w-full">
@@ -16,7 +31,7 @@
           type="text"
           class="w-1/2"
           v-model="settings.doc.brand_name"
-          :label="__('Brand Name')"
+          :label="__('Brand name')"
         />
       </div>
 
@@ -107,15 +122,7 @@
       </div>
     </div>
 
-    <div class="flex justify-between flex-row-reverse">
-      <Button
-        variant="solid"
-        :label="__('Update')"
-        :disabled="!settings.isDirty"
-        @click="updateSettings"
-      />
-      <ErrorMessage :message="settings.save.error" />
-    </div>
+    <ErrorMessage :message="settings.save.error" />
   </div>
 </template>
 <script setup>
diff --git a/frontend/src/components/Settings/InviteUserPage.vue b/frontend/src/components/Settings/InviteUserPage.vue
index 77ce8211..14bdf849 100644
--- a/frontend/src/components/Settings/InviteUserPage.vue
+++ b/frontend/src/components/Settings/InviteUserPage.vue
@@ -1,8 +1,28 @@
 <template>
-  <div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
-    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
-      {{ __('Send Invites To') }}
-    </h2>
+  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-9">
+    <div class="flex justify-between">
+      <div class="flex flex-col gap-1 w-9/12">
+        <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
+          {{ __('Send invites to') }}
+        </h2>
+        <p class="text-p-base text-ink-gray-6">
+          {{
+            __(
+              'Invite users to access CRM. Specify their roles to control access and permissions',
+            )
+          }}
+        </p>
+      </div>
+      <div class="flex item-center space-x-2 w-3/12 justify-end">
+        <Button
+          :label="__('Send Invites')"
+          variant="solid"
+          :disabled="!invitees.length"
+          @click="inviteByEmail.submit()"
+          :loading="inviteByEmail.loading"
+        />
+      </div>
+    </div>
     <div class="flex-1 flex flex-col gap-8 overflow-y-auto">
       <div>
         <label class="block text-xs text-ink-gray-5 mb-1.5">
@@ -79,16 +99,7 @@
         </div>
       </template>
     </div>
-    <div class="flex justify-between items-center gap-2">
-      <div><ErrorMessage v-if="error" :message="error" /></div>
-      <Button
-        :label="__('Send Invites')"
-        variant="solid"
-        :disabled="!invitees.length"
-        @click="inviteByEmail.submit()"
-        :loading="inviteByEmail.loading"
-      />
-    </div>
+    <ErrorMessage :message="error" />
   </div>
 </template>
 <script setup>
diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index ce212619..297656eb 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -1,16 +1,28 @@
 <template>
-  <div class="flex h-full flex-col gap-8">
-    <h2
-      class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
-    >
-      <div>{{ title || __(doctype) }}</div>
-      <Badge
-        v-if="data.isDirty"
-        :label="__('Not Saved')"
-        variant="subtle"
-        theme="orange"
-      />
-    </h2>
+  <div class="flex h-full flex-col gap-6">
+    <div class="flex justify-between">
+      <div class="flex flex-col gap-1 w-9/12">
+        <h2
+          class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
+        >
+          {{ title || __(doctype) }}
+          <Badge
+            v-if="data.isDirty"
+            :label="__('Not Saved')"
+            variant="subtle"
+            theme="orange"
+          />
+        </h2>
+      </div>
+      <div class="flex item-center space-x-2 w-3/12 justify-end">
+        <Button
+          :loading="data.save.loading"
+          :label="__('Update')"
+          variant="solid"
+          @click="data.save.submit()"
+        />
+      </div>
+    </div>
     <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
       <FieldLayout
         v-if="data?.doc && tabs"
@@ -22,17 +34,7 @@
     <div v-else class="flex flex-1 items-center justify-center">
       <Spinner class="size-8" />
     </div>
-    <div class="flex justify-between gap-2">
-      <div>
-        <ErrorMessage class="mt-2" :message="data.save.error" />
-      </div>
-      <Button
-        :loading="data.save.loading"
-        :label="__('Update')"
-        variant="solid"
-        @click="data.save.submit()"
-      />
-    </div>
+    <ErrorMessage :message="data.save.error" />
   </div>
 </template>
 <script setup>
diff --git a/frontend/src/components/Settings/TelephonySettings.vue b/frontend/src/components/Settings/TelephonySettings.vue
index 240b4570..af944903 100644
--- a/frontend/src/components/Settings/TelephonySettings.vue
+++ b/frontend/src/components/Settings/TelephonySettings.vue
@@ -1,16 +1,31 @@
 <template>
-  <div class="flex h-full flex-col gap-8 p-8">
-    <h2
-      class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
-    >
-      <div>{{ __('Telephony Settings') }}</div>
-      <Badge
-        v-if="twilio.isDirty || exotel.isDirty || mediumChanged"
-        :label="__('Not Saved')"
-        variant="subtle"
-        theme="orange"
-      />
-    </h2>
+  <div class="flex h-full flex-col gap-6 p-8">
+    <div class="flex justify-between">
+      <div class="flex flex-col gap-1 w-9/12">
+        <h2
+          class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
+        >
+          {{ __('Telephony settings') }}
+          <Badge
+            v-if="twilio.isDirty || exotel.isDirty || mediumChanged"
+            :label="__('Not Saved')"
+            variant="subtle"
+            theme="orange"
+          />
+        </h2>
+        <p class="text-p-base text-ink-gray-6">
+          {{ __('Configure telephony settings for your CRM') }}
+        </p>
+      </div>
+      <div class="flex item-center space-x-2 w-3/12 justify-end">
+        <Button
+          :loading="twilio.save.loading || exotel.save.loading"
+          :label="__('Update')"
+          variant="solid"
+          @click="update"
+        />
+      </div>
+    </div>
     <div
       v-if="!twilio.get.loading || !exotel.get.loading"
       class="flex-1 flex flex-col gap-8 overflow-y-auto"
@@ -58,20 +73,7 @@
     <div v-else class="flex flex-1 items-center justify-center">
       <Spinner class="size-8" />
     </div>
-    <div class="flex justify-between gap-2">
-      <div>
-        <ErrorMessage
-          class="mt-2"
-          :message="twilio.save.error || exotel.save.error || error"
-        />
-      </div>
-      <Button
-        :loading="twilio.save.loading || exotel.save.loading"
-        :label="__('Update')"
-        variant="solid"
-        @click="update"
-      />
-    </div>
+    <ErrorMessage :message="twilio.save.error || exotel.save.error || error" />
   </div>
 </template>
 <script setup>
diff --git a/frontend/src/components/Settings/Users.vue b/frontend/src/components/Settings/Users.vue
index d7c29e8a..aca6344e 100644
--- a/frontend/src/components/Settings/Users.vue
+++ b/frontend/src/components/Settings/Users.vue
@@ -9,7 +9,7 @@
         <p class="text-p-base text-ink-gray-6">
           {{
             __(
-              'Manage users who can access CRM. Assign roles to control their access. Add/Remove existing users or invite new ones.',
+              'Manage CRM users by adding or inviting them, and assign roles to control their access and permissions',
             )
           }}
         </p>