feat: update create SLA modal design (#9182)

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/Modal.vue

@@ -7,7 +7,13 @@
       @mousedown="handleMouseDown"
     >
       <div
-        :class="modalContainerClassName"
+        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
         @mouse.stop
         @mousedown="event => event.stopPropagation()"
       >
@@ -16,7 +22,7 @@
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
-          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
           @click="close"
         />
         <slot />
@@ -60,15 +66,6 @@ export default {
     };
   },
   computed: {
-    modalContainerClassName() {
-      let className =
-        'modal-container rtl:text-right shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem] bg-white dark:bg-slate-800 skip-context-menu';
-      if (this.fullWidth) {
-        return `${className} items-center rounded-none flex h-full justify-center w-full`;
-      }
-
-      return `${className} ${this.size}`;
-    },
     modalClassName() {
       const modalClassNameMap = {
         centered: '',

app/javascript/dashboard/components/ModalHeader.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col items-start pt-8 px-8 pb-0">
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       ref="modalHeaderTitle"
-      class="text-slate-800 text-lg font-semibold dark:text-slate-50"
+      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
     >
       {{ headerTitle }}
     </h2>
     <p
       v-if="headerContent"
       ref="modalHeaderContent"
-      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
+      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
     >
       {{ headerContent }}
       <span
         v-if="headerContentValue"
-        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
       >
         {{ headerContentValue }}
       </span>

app/javascript/dashboard/i18n/locale/en/sla.json

@@ -65,7 +65,7 @@
     },
     "ADD": {
       "TITLE": "Add SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
+      "DESC": "Friendly promises for great service!",
       "API": {
         "SUCCESS_MESSAGE": "SLA added successfully",
         "ERROR_MESSAGE": "There was an error, please try again"

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -5,6 +5,11 @@
         v-model="name"
         :class="{ error: $v.name.$error }"
         class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
         :error="getSlaNameErrorMessage"
@@ -13,6 +18,11 @@
       <woot-input
         v-model="description"
         class="w-full"
+        :styles="{
+          borderRadius: '12px',
+          padding: '6px 12px',
+          fontSize: '14px',
+        }"
         :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
       />
@@ -29,23 +39,29 @@
         @isInValid="handleIsInvalid(index, $event)"
       />
 
-      <div class="flex items-center w-full gap-2">
+      <div
-        <input id="sla_bh" v-model="onlyDuringBusinessHours" type="checkbox" />
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
-        <label for="sla_bh">
+      >
+        <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
-        </label>
+        </span>
+        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
       </div>
 
-      <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
+      <div class="flex items-center justify-end w-full gap-2 mt-8">
+        <woot-button
+          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+          @click.prevent="onClose"
+        >
+          {{ $t('SLA.FORM.CANCEL') }}
+        </woot-button>
         <woot-button
           :is-disabled="isSubmitDisabled"
+          class="px-4 rounded-xl"
           :is-loading="uiFlags.isUpdating"
         >
           {{ submitLabel }}
         </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
       </div>
     </form>
   </div>

app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="relative mt-2 w-full">
+  <div class="flex items-center w-full gap-3">
     <woot-input
       v-model="thresholdTime"
       :class="{ error: $v.thresholdTime.$error }"
-      class="w-full [&>input]:pr-24"
+      class="flex-grow"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
       :label="label"
       :placeholder="placeholder"
       :error="getThresholdTimeErrorMessage"
       @input="onThresholdTimeChange"
     />
-    <div class="absolute right-px h-9 top-[27px] flex items-center">
+    <!-- the mt-7 handles the label offset -->
+    <div class="mt-7">
       <select
         v-model="thresholdUnitValue"
-        class="h-full rounded-[4px] hover:cursor-pointer font-medium border-1 border-solid bg-transparent border-transparent dark:border-transparent mb-0 py-0 pl-2 pr-7 text-slate-600 dark:text-slate-300 dark:focus:border-woot-500 focus:border-woot-500 text-sm"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
         @change="onThresholdUnitChange"
       >
         <option
@@ -56,9 +62,9 @@ export default {
       thresholdTime: this.threshold || '',
       thresholdUnitValue: this.thresholdUnit,
       options: [
-        { value: 'Minutes', label: 'Minutes' },
+        { value: 'Minutes', label: 'minutes' },
-        { value: 'Hours', label: 'Hours' },
+        { value: 'Hours', label: 'hours' },
-        { value: 'Days', label: 'Days' },
+        { value: 'Days', label: 'days' },
       ],
     };
   },