refactor: update styling and improve layout for assignment rules components

(cherry picked from commit 9f95a3a2b2132357708db03b9b4922f356150ff4)

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

frontend/src/components/Settings/AssignmentRules/AssigneeRules.vue

@@ -6,10 +6,7 @@
       }}</span>
       <span class="text-p-sm text-ink-gray-6">
         {{
-          __(
+          __('Choose how {0} are assigned among salespeople.', [documentType])
-            'Define who receives the {0} and how they’re distributed among agents.',
-            [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')" />

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"

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,8 +41,7 @@
         />
       </div>
     </div>
-  </div>
+    <div class="overflow-y-auto px-2">
-  <div v-if="!getAssignmentRuleData.loading" class="overflow-y-auto px-10 pb-8">
       <div class="grid grid-cols-2 gap-5">
         <div>
           <FormControl
@@ -72,7 +65,7 @@
           <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"
+                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>
@@ -188,7 +181,7 @@
         </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"
+            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"
           >
             <span class="text-p-sm">
@@ -233,9 +226,10 @@
           <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,
+                  'Choose which {0} are affected by this un-assignment rule.',
-              ])
+                  [documentType],
+                )
               }}
               <a
                 class="font-medium underline"
@@ -245,7 +239,9 @@
               >
             </span>
             <div
-            v-if="isOldSla && step.data && assignmentRuleData.unassignCondition"
+              v-if="
+                isOldSla && step.data && assignmentRuleData.unassignCondition
+              "
             >
               <Popover trigger="hover" :hoverDelay="0.25" placement="top-end">
                 <template #target>
@@ -269,14 +265,14 @@
         </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"
+            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">{{
+              <a :href="deskUrl" target="_blank" class="underline">
-              __('desk')
+                {{ __('desk') }}
-            }}</a>
+              </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.',
@@ -291,11 +287,11 @@
             />
           </div>
           <AssignmentRulesSection
+            v-else
             :conditions="assignmentRuleData.unassignConditionJson"
             name="unassignCondition"
             :errors="assignmentRuleErrors.unassignConditionError"
             :doctype="assignmentRuleData.documentType"
-          v-else
           />
         </div>
       </div>
@@ -318,6 +314,10 @@
       <hr class="my-8" />
       <AssigneeRules />
     </div>
+  </div>
+  <div v-else class="flex items-center h-full justify-center">
+    <LoadingIndicator class="w-4" />
+  </div>
   <ConfirmDialog
     v-model="showConfirmDialog.show"
     :title="showConfirmDialog.title"

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>

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="flex items-center py-2 px-4 text-sm text-ink-gray-5">
-        <div class="col-span-7 ml-2">{{ __('Assignment rule') }}</div>
+        <div class="w-7/12">{{ __('Assignment rule') }}</div>
-        <div class="col-span-2">{{ __('Priority') }}</div>
+        <div class="w-3/12">{{ __('Priority') }}</div>
-        <div class="col-span-2">{{ __('Enabled') }}</div>
+        <div class="w-2/12">{{ __('Enabled') }}</div>
       </div>
-      <hr class="mt-2 mx-2" />
+      <div class="h-px border-t mx-4 border-outline-gray-modals" />
-      <div
+      <div class="overflow-y-auto px-2">
-        v-for="assignmentRule in assignmentRulesList.data"
+        <template
+          v-for="(assignmentRule, i) in assignmentRulesList.data"
           :key="assignmentRule.name"
         >
           <AssignmentRuleListItem :data="assignmentRule" />
-        <hr class="mx-2" />
+          <hr v-if="assignmentRulesList.data.length !== i + 1" class="mx-2" />
+        </template>
       </div>
     </div>
   </div>

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(['', '', ''])

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

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>

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

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