fix: layout change

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)"

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>

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>

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>

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>

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>