From 8749f7bfd00316e2eef0a528330e10a4d747dcfd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 18 Sep 2025 13:29:44 +0530
Subject: [PATCH] refactor: update styling and improve layout for assignment
 rules components

(cherry picked from commit 9f95a3a2b2132357708db03b9b4922f356150ff4)
---
 .../ConditionsFilter/CFConditions.vue         |   2 +-
 .../AssignmentRules/AssigneeRules.vue         |  11 +-
 .../AssignmentRuleListItem.vue                |  12 +-
 .../AssignmentRules/AssignmentRuleView.vue    | 524 +++++++++---------
 .../AssignmentRules/AssignmentRules.vue       |   2 +-
 .../AssignmentRules/AssignmentRulesList.vue   |  26 +-
 .../AssignmentRulesSection.vue                |   2 +-
 .../AssignmentRules/AssignmentSchedule.vue    |   9 +-
 .../AssignmentScheduleItem.vue                |   2 +-
 .../EmailTemplate/EditEmailTemplate.vue       |  13 +-
 .../EmailTemplate/NewEmailTemplate.vue        |  13 +-
 11 files changed, 304 insertions(+), 312 deletions(-)

diff --git a/frontend/src/components/ConditionsFilter/CFConditions.vue b/frontend/src/components/ConditionsFilter/CFConditions.vue
index 03b50269..567e7466 100644
--- a/frontend/src/components/ConditionsFilter/CFConditions.vue
+++ b/frontend/src/components/ConditionsFilter/CFConditions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border border-gray-300 p-3 flex flex-col gap-4 w-full">
+  <div class="rounded-lg border border-outline-gray-2 p-3 flex flex-col gap-4 w-full">
     <template v-for="(condition, i) in props.conditions" :key="condition.field">
       <CFCondition
         v-if="Array.isArray(condition)"
diff --git a/frontend/src/components/Settings/AssignmentRules/AssigneeRules.vue b/frontend/src/components/Settings/AssignmentRules/AssigneeRules.vue
index 78bc4938..c5a83322 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssigneeRules.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssigneeRules.vue
@@ -6,10 +6,7 @@
       }}</span>
       <span class="text-p-sm text-ink-gray-6">
         {{
-          __(
-            'Define who receives the {0} and how they’re distributed among agents.',
-            [documentType],
-          )
+          __('Choose how {0} are assigned among salespeople.', [documentType])
         }}
       </span>
     </div>
@@ -26,7 +23,7 @@
         </div>
         <div class="text-p-sm text-ink-gray-6 mt-1">
           {{
-            __('Choose how {0} are distributed among selected assignees.', [
+            __('Choose how {0} are assigned among the selected assignees.', [
               documentType,
             ])
           }}
@@ -36,7 +33,7 @@
         <Popover placement="bottom-end">
           <template #target="{ togglePopover }">
             <div
-              class="flex items-center justify-between text-base rounded h-7 py-1.5 pl-2 pr-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] select-none min-w-40"
+              class="flex items-center justify-between text-base rounded h-7 py-1.5 pl-2 pr-2 border border-outline-gray-2 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] select-none min-w-40"
               @click="togglePopover()"
             >
               <div>
@@ -84,7 +81,7 @@
           {{ __('Assignees') }}
         </div>
         <div class="text-p-sm text-ink-gray-6 mt-1">
-          {{ __('Choose who receives the {0}.', [documentType]) }}
+          {{ __('Select the assignees for {0}.', [documentType]) }}
         </div>
       </div>
       <AssigneeSearch @addAssignee="validateAssignmentRule('users')" />
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentRuleListItem.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentRuleListItem.vue
index 41c8e1de..9973088e 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentRuleListItem.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentRuleListItem.vue
@@ -1,25 +1,25 @@
 <template>
   <div
-    class="grid grid-cols-11 items-center gap-4 cursor-pointer hover:bg-gray-50 rounded"
+    class="flex p-3 items-center justify-between cursor-pointer hover:bg-surface-menu-bar rounded"
   >
-    <div class="w-full py-3 pl-2 col-span-7" @click="updateStep('view', data)">
+    <div class="w-7/12" @click="updateStep('view', data)">
       <div class="text-base text-ink-gray-7 font-medium">{{ data.name }}</div>
       <div
         v-if="data.description && data.description.length > 0"
-        class="text-sm w-full text-ink-gray-5 mt-1 whitespace-nowrap overflow-ellipsis overflow-hidden"
+        class="text-p-base w-full text-ink-gray-5 mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden"
       >
         {{ data.description }}
       </div>
     </div>
-    <div class="col-span-2">
+    <div class="w-3/12">
       <Select
-        class="w-max bg-transparent -ml-2 border-0 text-ink-gray-6 focus-visible:!ring-0 bg-none"
+        class="w-max -ml-2 bg-transparent border-0 text-ink-gray-6 focus-visible:!ring-0 bg-none"
         :options="priorityOptions"
         v-model="data.priority"
         @update:modelValue="onPriorityChange"
       />
     </div>
-    <div class="flex justify-between items-center w-full pr-2 col-span-2">
+    <div class="flex justify-between items-center w-2/12">
       <Switch
         size="sm"
         :modelValue="!data.disabled"
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentRuleView.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentRuleView.vue
index f6dce641..67de35e9 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentRuleView.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentRuleView.vue
@@ -1,15 +1,9 @@
 <template>
-  <div
-    v-if="getAssignmentRuleData.loading"
-    class="flex items-center h-full justify-center"
-  >
-    <LoadingIndicator class="w-4" />
-  </div>
   <div
     v-if="!getAssignmentRuleData.loading"
-    class="sticky top-0 z-10 bg-white pb-6 px-10 py-8"
+    class="flex flex-col h-full gap-6 px-6 py-8 text-ink-gray-8"
   >
-    <div class="flex items-center justify-between w-full">
+    <div class="flex items-center justify-between px-2 w-full">
       <div class="flex items-center gap-2">
         <Button
           variant="ghost"
@@ -47,276 +41,282 @@
         />
       </div>
     </div>
-  </div>
-  <div v-if="!getAssignmentRuleData.loading" class="overflow-y-auto px-10 pb-8">
-    <div class="grid grid-cols-2 gap-5">
-      <div>
-        <FormControl
-          :type="'text'"
-          size="sm"
-          variant="subtle"
-          :placeholder="__('Name')"
-          :label="__('Name')"
-          v-model="assignmentRuleData.assignmentRuleName"
-          required
-          maxlength="50"
-          @change="validateAssignmentRule('assignmentRuleName')"
-        />
-        <ErrorMessage
-          :message="assignmentRuleErrors.assignmentRuleName"
-          class="mt-2"
-        />
-      </div>
-      <div class="flex flex-col gap-1.5">
-        <FormLabel :label="__('Priority')" />
-        <Popover>
-          <template #target="{ togglePopover }">
-            <div
-              class="flex items-center justify-between text-base rounded h-7 py-1.5 pl-2 pr-2 border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] cursor-default"
-              @click="togglePopover()"
-            >
-              <div>
-                {{
-                  priorityOptions.find(
-                    (option) => option.value == assignmentRuleData.priority,
-                  )?.label
-                }}
-              </div>
-              <FeatherIcon name="chevron-down" class="size-4" />
-            </div>
-          </template>
-          <template #body="{ togglePopover }">
-            <div
-              class="p-1 text-ink-gray-6 top-1 absolute w-full bg-white shadow-2xl rounded"
-            >
-              <div
-                v-for="option in priorityOptions"
-                :key="option.value"
-                class="p-2 cursor-pointer hover:bg-gray-50 text-base flex items-center justify-between rounded"
-                @click="
-                  () => {
-                    assignmentRuleData.priority = option.value
-                    togglePopover()
-                  }
-                "
-              >
-                {{ option.label }}
-                <FeatherIcon
-                  v-if="assignmentRuleData.priority == option.value"
-                  name="check"
-                  class="size-4"
-                />
-              </div>
-            </div>
-          </template>
-        </Popover>
-      </div>
-      <div>
-        <FormControl
-          :type="'textarea'"
-          size="sm"
-          variant="subtle"
-          :placeholder="__('Description')"
-          :label="__('Description')"
-          required
-          maxlength="250"
-          @change="validateAssignmentRule('description')"
-          v-model="assignmentRuleData.description"
-        />
-        <ErrorMessage
-          :message="assignmentRuleErrors.description"
-          class="mt-2"
-        />
-      </div>
-      <div class="flex flex-col gap-1.5">
-        <FormLabel :label="__('Apply on')" />
-        <Select
-          :options="[
-            {
-              label: 'Lead',
-              value: 'CRM Lead',
-            },
-            {
-              label: 'Deal',
-              value: 'CRM Deal',
-            },
-          ]"
-          v-model="assignmentRuleData.documentType"
-        />
-      </div>
-    </div>
-    <hr class="my-8" />
-    <div>
-      <div class="flex flex-col gap-1">
-        <span class="text-lg font-semibold text-ink-gray-8">{{
-          __('Assignment condition')
-        }}</span>
-        <div class="flex items-center justify-between gap-6">
-          <span class="text-p-sm text-ink-gray-6">
-            {{
-              __('Choose which {0} are affected by this assignment rule.', [
-                documentType,
-              ])
-            }}
-            <a
-              class="font-medium underline"
-              href="https://docs.frappe.io/crm/assignment-rule"
-              target="_blank"
-              >{{ __('Learn about conditions') }}</a
-            >
-          </span>
-          <div v-if="isOldSla && step.data">
-            <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
-              <template #target>
-                <div
-                  class="text-sm text-ink-gray-6 flex gap-1 cursor-default text-nowrap items-center"
-                >
-                  <span>{{ __('Old Condition') }}</span>
-                  <FeatherIcon name="info" class="size-4" />
-                </div>
-              </template>
-              <template #body-main>
-                <div
-                  class="text-sm text-ink-gray-6 p-2 bg-white rounded-md max-w-96 text-wrap whitespace-pre-wrap leading-5"
-                >
-                  <code>{{ assignmentRuleData.assignCondition }}</code>
-                </div>
-              </template>
-            </Popover>
-          </div>
-        </div>
-      </div>
-      <div class="mt-5">
-        <div
-          class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-gray-300 rounded-md p-3 py-4"
-          v-if="!useNewUI && assignmentRuleData.assignCondition"
-        >
-          <span class="text-p-sm">
-            {{ __('Conditions for this rule were created from') }}
-            <a :href="deskUrl" target="_blank" class="underline">{{
-              __('desk')
-            }}</a>
-            {{
-              __(
-                'which are not compatible with this UI, you will need to recreate the conditions here if you want to manage and add new conditions from this UI.',
-              )
-            }}
-          </span>
-          <Button
-            :label="__('I understand, add conditions')"
+    <div class="overflow-y-auto px-2">
+      <div class="grid grid-cols-2 gap-5">
+        <div>
+          <FormControl
+            :type="'text'"
+            size="sm"
             variant="subtle"
-            theme="gray"
-            @click="useNewUI = true"
+            :placeholder="__('Name')"
+            :label="__('Name')"
+            v-model="assignmentRuleData.assignmentRuleName"
+            required
+            maxlength="50"
+            @change="validateAssignmentRule('assignmentRuleName')"
           />
-        </div>
-        <AssignmentRulesSection
-          :conditions="assignmentRuleData.assignConditionJson"
-          name="assignCondition"
-          :errors="assignmentRuleErrors.assignConditionError"
-          :doctype="assignmentRuleData.documentType"
-          v-else
-        />
-        <div class="flex justify-end">
           <ErrorMessage
-            :message="assignmentRuleErrors.assignCondition"
+            :message="assignmentRuleErrors.assignmentRuleName"
             class="mt-2"
           />
         </div>
+        <div class="flex flex-col gap-1.5">
+          <FormLabel :label="__('Priority')" />
+          <Popover>
+            <template #target="{ togglePopover }">
+              <div
+                class="flex items-center justify-between text-base rounded h-7 py-1.5 pl-2 pr-2 border border-outline-gray-2 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full dark:[color-scheme:dark] cursor-default"
+                @click="togglePopover()"
+              >
+                <div>
+                  {{
+                    priorityOptions.find(
+                      (option) => option.value == assignmentRuleData.priority,
+                    )?.label
+                  }}
+                </div>
+                <FeatherIcon name="chevron-down" class="size-4" />
+              </div>
+            </template>
+            <template #body="{ togglePopover }">
+              <div
+                class="p-1 text-ink-gray-6 top-1 absolute w-full bg-white shadow-2xl rounded"
+              >
+                <div
+                  v-for="option in priorityOptions"
+                  :key="option.value"
+                  class="p-2 cursor-pointer hover:bg-gray-50 text-base flex items-center justify-between rounded"
+                  @click="
+                    () => {
+                      assignmentRuleData.priority = option.value
+                      togglePopover()
+                    }
+                  "
+                >
+                  {{ option.label }}
+                  <FeatherIcon
+                    v-if="assignmentRuleData.priority == option.value"
+                    name="check"
+                    class="size-4"
+                  />
+                </div>
+              </div>
+            </template>
+          </Popover>
+        </div>
+        <div>
+          <FormControl
+            :type="'textarea'"
+            size="sm"
+            variant="subtle"
+            :placeholder="__('Description')"
+            :label="__('Description')"
+            required
+            maxlength="250"
+            @change="validateAssignmentRule('description')"
+            v-model="assignmentRuleData.description"
+          />
+          <ErrorMessage
+            :message="assignmentRuleErrors.description"
+            class="mt-2"
+          />
+        </div>
+        <div class="flex flex-col gap-1.5">
+          <FormLabel :label="__('Apply on')" />
+          <Select
+            :options="[
+              {
+                label: 'Lead',
+                value: 'CRM Lead',
+              },
+              {
+                label: 'Deal',
+                value: 'CRM Deal',
+              },
+            ]"
+            v-model="assignmentRuleData.documentType"
+          />
+        </div>
       </div>
-    </div>
-    <hr class="my-8" />
-    <div>
-      <div class="flex flex-col gap-1">
-        <span class="text-lg font-semibold text-ink-gray-8">{{
-          __('Unassignment condition')
-        }}</span>
-        <div class="flex items-center justify-between gap-6">
-          <span class="text-p-sm text-ink-gray-6">
-            {{
-              __('Choose which {0} are affected by this un-assignment rule.', [
-                documentType,
-              ])
-            }}
-            <a
-              class="font-medium underline"
-              href="https://docs.frappe.io/crm/assignment-rule"
-              target="_blank"
-              >{{ __('Learn about conditions') }}</a
-            >
-          </span>
+      <hr class="my-8" />
+      <div>
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-ink-gray-8">{{
+            __('Assignment condition')
+          }}</span>
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-p-sm text-ink-gray-6">
+              {{
+                __('Choose which {0} are affected by this assignment rule.', [
+                  documentType,
+                ])
+              }}
+              <a
+                class="font-medium underline"
+                href="https://docs.frappe.io/crm/assignment-rule"
+                target="_blank"
+                >{{ __('Learn about conditions') }}</a
+              >
+            </span>
+            <div v-if="isOldSla && step.data">
+              <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
+                <template #target>
+                  <div
+                    class="text-sm text-ink-gray-6 flex gap-1 cursor-default text-nowrap items-center"
+                  >
+                    <span>{{ __('Old Condition') }}</span>
+                    <FeatherIcon name="info" class="size-4" />
+                  </div>
+                </template>
+                <template #body-main>
+                  <div
+                    class="text-sm text-ink-gray-6 p-2 bg-white rounded-md max-w-96 text-wrap whitespace-pre-wrap leading-5"
+                  >
+                    <code>{{ assignmentRuleData.assignCondition }}</code>
+                  </div>
+                </template>
+              </Popover>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5">
           <div
-            v-if="isOldSla && step.data && assignmentRuleData.unassignCondition"
+            class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-outline-gray-2 rounded-md p-3 py-4"
+            v-if="!useNewUI && assignmentRuleData.assignCondition"
           >
-            <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
-              <template #target>
-                <div
-                  class="text-sm text-ink-gray-6 flex gap-1 cursor-default text-nowrap items-center"
-                >
-                  <span> {{ __('Old Condition') }} </span>
-                  <FeatherIcon name="info" class="size-4" />
-                </div>
-              </template>
-              <template #body-main>
-                <div
-                  class="text-sm text-ink-gray-6 p-2 bg-white rounded-md max-w-96 text-wrap whitespace-pre-wrap leading-5"
-                >
-                  <code>{{ assignmentRuleData.unassignCondition }}</code>
-                </div>
-              </template>
-            </Popover>
+            <span class="text-p-sm">
+              {{ __('Conditions for this rule were created from') }}
+              <a :href="deskUrl" target="_blank" class="underline">{{
+                __('desk')
+              }}</a>
+              {{
+                __(
+                  'which are not compatible with this UI, you will need to recreate the conditions here if you want to manage and add new conditions from this UI.',
+                )
+              }}
+            </span>
+            <Button
+              :label="__('I understand, add conditions')"
+              variant="subtle"
+              theme="gray"
+              @click="useNewUI = true"
+            />
+          </div>
+          <AssignmentRulesSection
+            :conditions="assignmentRuleData.assignConditionJson"
+            name="assignCondition"
+            :errors="assignmentRuleErrors.assignConditionError"
+            :doctype="assignmentRuleData.documentType"
+            v-else
+          />
+          <div class="flex justify-end">
+            <ErrorMessage
+              :message="assignmentRuleErrors.assignCondition"
+              class="mt-2"
+            />
           </div>
         </div>
       </div>
-      <div class="mt-5">
-        <div
-          class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-gray-300 rounded-md p-3 py-4"
-          v-if="!useNewUI && assignmentRuleData.unassignCondition"
-        >
-          <span class="text-p-sm">
-            {{ __('Conditions for this rule were created from') }}
-            <a :href="deskUrl" target="_blank" class="underline">{{
-              __('desk')
-            }}</a>
-            {{
-              __(
-                'which are not compatible with this UI, you will need to recreate the conditions here if you want to manage and add new conditions from this UI.',
-              )
-            }}
-          </span>
-          <Button
-            :label="__('I understand, add conditions')"
-            variant="subtle"
-            theme="gray"
-            @click="useNewUI = true"
+      <hr class="my-8" />
+      <div>
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-ink-gray-8">{{
+            __('Unassignment condition')
+          }}</span>
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-p-sm text-ink-gray-6">
+              {{
+                __(
+                  'Choose which {0} are affected by this un-assignment rule.',
+                  [documentType],
+                )
+              }}
+              <a
+                class="font-medium underline"
+                href="https://docs.frappe.io/crm/assignment-rule"
+                target="_blank"
+                >{{ __('Learn about conditions') }}</a
+              >
+            </span>
+            <div
+              v-if="
+                isOldSla && step.data && assignmentRuleData.unassignCondition
+              "
+            >
+              <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
+                <template #target>
+                  <div
+                    class="text-sm text-ink-gray-6 flex gap-1 cursor-default text-nowrap items-center"
+                  >
+                    <span> {{ __('Old Condition') }} </span>
+                    <FeatherIcon name="info" class="size-4" />
+                  </div>
+                </template>
+                <template #body-main>
+                  <div
+                    class="text-sm text-ink-gray-6 p-2 bg-white rounded-md max-w-96 text-wrap whitespace-pre-wrap leading-5"
+                  >
+                    <code>{{ assignmentRuleData.unassignCondition }}</code>
+                  </div>
+                </template>
+              </Popover>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5">
+          <div
+            v-if="!useNewUI && assignmentRuleData.unassignCondition"
+            class="flex flex-col gap-3 items-center text-center text-ink-gray-7 text-sm mb-2 border border-outline-gray-2 rounded-md p-3 py-4"
+          >
+            <span class="text-p-sm">
+              {{ __('Conditions for this rule were created from') }}
+              <a :href="deskUrl" target="_blank" class="underline">
+                {{ __('desk') }}
+              </a>
+              {{
+                __(
+                  'which are not compatible with this UI, you will need to recreate the conditions here if you want to manage and add new conditions from this UI.',
+                )
+              }}
+            </span>
+            <Button
+              :label="__('I understand, add conditions')"
+              variant="subtle"
+              theme="gray"
+              @click="useNewUI = true"
+            />
+          </div>
+          <AssignmentRulesSection
+            v-else
+            :conditions="assignmentRuleData.unassignConditionJson"
+            name="unassignCondition"
+            :errors="assignmentRuleErrors.unassignConditionError"
+            :doctype="assignmentRuleData.documentType"
           />
         </div>
-        <AssignmentRulesSection
-          :conditions="assignmentRuleData.unassignConditionJson"
-          name="unassignCondition"
-          :errors="assignmentRuleErrors.unassignConditionError"
-          :doctype="assignmentRuleData.documentType"
-          v-else
-        />
       </div>
+      <hr class="my-8" />
+      <div>
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-ink-gray-8">{{
+            __('Assignment Schedule')
+          }}</span>
+          <span class="text-p-sm text-ink-gray-6">
+            {{
+              __('Choose the days of the week when this rule should be active.')
+            }}
+          </span>
+        </div>
+        <div class="mt-6">
+          <AssignmentSchedule />
+        </div>
+      </div>
+      <hr class="my-8" />
+      <AssigneeRules />
     </div>
-    <hr class="my-8" />
-    <div>
-      <div class="flex flex-col gap-1">
-        <span class="text-lg font-semibold text-ink-gray-8">{{
-          __('Assignment Schedule')
-        }}</span>
-        <span class="text-p-sm text-ink-gray-6">
-          {{
-            __('Choose the days of the week when this rule should be active.')
-          }}
-        </span>
-      </div>
-      <div class="mt-6">
-        <AssignmentSchedule />
-      </div>
-    </div>
-    <hr class="my-8" />
-    <AssigneeRules />
+  </div>
+  <div v-else class="flex items-center h-full justify-center">
+    <LoadingIndicator class="w-4" />
   </div>
   <ConfirmDialog
     v-model="showConfirmDialog.show"
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentRules.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentRules.vue
index e7a94328..8f936c27 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentRules.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentRules.vue
@@ -25,7 +25,7 @@
     </div>
 
     <!-- Assignment rules list -->
-    <div class="overflow-y-auto px-2">
+    <div class="overflow-y-auto">
       <AssignmentRulesList />
     </div>
   </div>
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentRulesList.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentRulesList.vue
index d911c335..f00e30a0 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentRulesList.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentRulesList.vue
@@ -8,25 +8,27 @@
   <div v-else>
     <div
       v-if="assignmentRulesList.data?.length === 0"
-      class="flex items-center justify-center rounded-md border border-gray-200 p-4"
+      class="flex items-center justify-center rounded-md border border-outline-gray-2 p-4"
     >
       <div class="text-sm text-ink-gray-7">
         {{ __('No items in the list') }}
       </div>
     </div>
     <div v-else>
-      <div class="grid grid-cols-11 items-center gap-4 text-sm text-gray-600">
-        <div class="col-span-7 ml-2">{{ __('Assignment rule') }}</div>
-        <div class="col-span-2">{{ __('Priority') }}</div>
-        <div class="col-span-2">{{ __('Enabled') }}</div>
+      <div class="flex items-center py-2 px-4 text-sm text-ink-gray-5">
+        <div class="w-7/12">{{ __('Assignment rule') }}</div>
+        <div class="w-3/12">{{ __('Priority') }}</div>
+        <div class="w-2/12">{{ __('Enabled') }}</div>
       </div>
-      <hr class="mt-2 mx-2" />
-      <div
-        v-for="assignmentRule in assignmentRulesList.data"
-        :key="assignmentRule.name"
-      >
-        <AssignmentRuleListItem :data="assignmentRule" />
-        <hr class="mx-2" />
+      <div class="h-px border-t mx-4 border-outline-gray-modals" />
+      <div class="overflow-y-auto px-2">
+        <template
+          v-for="(assignmentRule, i) in assignmentRulesList.data"
+          :key="assignmentRule.name"
+        >
+          <AssignmentRuleListItem :data="assignmentRule" />
+          <hr v-if="assignmentRulesList.data.length !== i + 1" class="mx-2" />
+        </template>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentRulesSection.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentRulesSection.vue
index 7d37c95a..f584f11d 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentRulesSection.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentRulesSection.vue
@@ -8,7 +8,7 @@
   />
   <div
     v-if="props.conditions.length == 0"
-    class="flex p-4 items-center cursor-pointer justify-center gap-2 text-sm border border-gray-300 text-gray-600 rounded-md"
+    class="flex p-4 items-center cursor-pointer justify-center gap-2 text-sm border border-outline-gray-2 text-gray-600 rounded-md"
     @click="
       () => {
         props.conditions.push(['', '', ''])
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentSchedule.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentSchedule.vue
index e54b7535..b219c006 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentSchedule.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentSchedule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-md border px-2 border-gray-300 text-sm">
+  <div class="rounded-md border px-2 border-outline-gray-2 text-sm">
     <div
       class="grid p-2 px-4 items-center"
       style="grid-template-columns: 3fr 1fr"
@@ -9,7 +9,7 @@
         :key="column.key"
         class="text-gray-600 overflow-hidden whitespace-nowrap text-ellipsis"
       >
-        {{ column.label }}
+        {{ __(column.label) }}
       </div>
     </div>
     <hr />
@@ -24,10 +24,9 @@
 </template>
 
 <script setup>
-import { ErrorMessage } from 'frappe-ui'
-import { onMounted, ref } from 'vue'
 import AssignmentScheduleItem from './AssignmentScheduleItem.vue'
-import { inject } from 'vue'
+import { ErrorMessage } from 'frappe-ui'
+import { onMounted, ref, inject } from 'vue'
 
 const assignmentRuleData = inject('assignmentRuleData')
 const assignmentRuleErrors = inject('assignmentRuleErrors')
diff --git a/frontend/src/components/Settings/AssignmentRules/AssignmentScheduleItem.vue b/frontend/src/components/Settings/AssignmentRules/AssignmentScheduleItem.vue
index 6f443f06..1f088617 100644
--- a/frontend/src/components/Settings/AssignmentRules/AssignmentScheduleItem.vue
+++ b/frontend/src/components/Settings/AssignmentRules/AssignmentScheduleItem.vue
@@ -3,7 +3,7 @@
     class="grid py-3.5 px-4 items-center"
     style="grid-template-columns: 3fr 1fr"
   >
-    <div class="text-ink-gray-7 font-medium">{{ data.day }}</div>
+    <div class="text-ink-gray-7 font-medium">{{ __(data.day) }}</div>
     <div class="flex justify-start">
       <Switch v-model="data.active" @update:model-value="toggleDay" />
     </div>
diff --git a/frontend/src/components/Settings/EmailTemplate/EditEmailTemplate.vue b/frontend/src/components/Settings/EmailTemplate/EditEmailTemplate.vue
index fdeeda4b..511e3fdb 100644
--- a/frontend/src/components/Settings/EmailTemplate/EditEmailTemplate.vue
+++ b/frontend/src/components/Settings/EmailTemplate/EditEmailTemplate.vue
@@ -12,7 +12,11 @@
           class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !pr-0 !max-w-96 !justify-start"
         />
       </div>
-      <div class="flex item-center space-x-2 w-3/12 justify-end">
+      <div class="flex item-center space-x-4 w-3/12 justify-end">
+        <div class="flex items-center space-x-2">
+          <Switch size="sm" v-model="template.enabled" />
+          <span class="text-sm text-ink-gray-7">{{ __('Enabled') }}</span>
+        </div>
         <Button
           :label="__('Update')"
           icon-left="plus"
@@ -26,13 +30,6 @@
 
     <!-- Fields -->
     <div class="flex flex-1 flex-col gap-4 overflow-y-auto">
-      <div
-        class="flex justify-between items-center cursor-pointer border-b py-3"
-        @click="() => (template.enabled = !template.enabled)"
-      >
-        <div class="text-base text-ink-gray-7">{{ __('Enabled') }}</div>
-        <Switch v-model="template.enabled" @click.stop />
-      </div>
       <div class="flex sm:flex-row flex-col gap-4">
         <div class="flex-1">
           <FormControl
diff --git a/frontend/src/components/Settings/EmailTemplate/NewEmailTemplate.vue b/frontend/src/components/Settings/EmailTemplate/NewEmailTemplate.vue
index 699b5c34..2db5bc21 100644
--- a/frontend/src/components/Settings/EmailTemplate/NewEmailTemplate.vue
+++ b/frontend/src/components/Settings/EmailTemplate/NewEmailTemplate.vue
@@ -14,7 +14,11 @@
           class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !pr-0 !max-w-96 !justify-start"
         />
       </div>
-      <div class="flex item-center space-x-2 w-3/12 justify-end">
+      <div class="flex item-center space-x-4 w-3/12 justify-end">
+        <div class="flex items-center space-x-2">
+          <Switch size="sm" v-model="template.enabled" />
+          <span class="text-sm text-ink-gray-7">{{ __('Enabled') }}</span>
+        </div>
         <Button
           :label="templateData?.name ? __('Duplicate') : __('Create')"
           icon-left="plus"
@@ -26,13 +30,6 @@
 
     <!-- Fields -->
     <div class="flex flex-1 flex-col gap-4 overflow-y-auto">
-      <div
-        class="flex justify-between items-center cursor-pointer border-b py-3"
-        @click="() => (template.enabled = !template.enabled)"
-      >
-        <div class="text-base text-ink-gray-7">{{ __('Enabled') }}</div>
-        <Switch v-model="template.enabled" @click.stop />
-      </div>
       <div class="flex sm:flex-row flex-col gap-4">
         <div class="flex-1">
           <FormControl