refactor: branch form

src/components/01_branch-management/FormBranchContact.vue

@@ -17,17 +17,26 @@ defineProps<{
 </script>
 <template>
   <div class="row col-12">
-    <div class="col-md-3 col-12 app-text-muted q-pb-sm">
-      • {{ $t(`${title}`) }}
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-phone"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`${title}`) }}
     </div>
-    <div class="col-md-9 col-12 row q-col-gutter-md">
+
+    <div class="col-12 row q-col-gutter-sm">
       <q-input
         lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-5 col-12"
+        class="col-md-3 col-12"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputEmailHq')
@@ -35,7 +44,11 @@ defineProps<{
         "
         v-model="email"
         for="input-email"
-      />
+      >
+        <template #prepend>
+          <q-icon color="primary" name="mdi-email" size="xs" class="q-mr-xs" />
+        </template>
+      </q-input>
 
       <q-input
         lazy-rules="ondemand"
@@ -43,7 +56,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-7 col-12"
+        class="col-md-3 col-12"
         :label="
           typeBranch === 'headOffice'
             ? $t('formDialogInputTelephoneHq')
@@ -51,7 +64,11 @@ defineProps<{
         "
         v-model="telephoneNo"
         for="input-telephone-no"
-      />
+      >
+        <template #prepend>
+          <q-icon color="primary" name="mdi-phone" size="xs" class="q-mr-xs" />
+        </template>
+      </q-input>
 
       <q-input
         lazy-rules="ondemand"
@@ -59,7 +76,7 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-5 col-12"
+        class="col-md-3 col-12"
         :label="$t('formDialogInputContactName')"
         v-model="contactName"
         for="input-contact-name"
@@ -71,11 +88,15 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-7"
+        class="col-3"
         :label="$t('formDialogInputTelephoneContact')"
         v-model="contact"
         for="input-contact"
-      />
+      >
+        <template #prepend>
+          <q-icon color="primary" name="mdi-phone" size="xs" class="q-mr-xs" />
+        </template>
+      </q-input>
 
       <q-input
         lazy-rules="ondemand"
@@ -83,16 +104,11 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        class="col-3"
         label="Line ID"
         v-model="lineId"
         for="input-line-id"
       />
     </div>
-    <q-separator
-      v-if="separator"
-      class="col-12 q-mt-xl q-mb-md"
-      style="padding-block: 0.5px"
-    />
   </div>
 </template>