From 4051821269c02c202658dd1ea4e3cd18f3f95ef9 Mon Sep 17 00:00:00 2001
From: josephatJ <josephatjulius24@gmail.com>
Date: Tue, 19 Nov 2024 10:01:15 +0300
Subject: [PATCH] Improve form fields rendering

---
 .../app/modules/laboratory/laboratory.component.scss  |  2 +-
 .../person-details/person-details.component.html      |  8 +++++---
 .../capture-form-data.component.html                  |  5 ++---
 .../form/components/field/field.component.html        | 10 +++++-----
 .../form/components/field/field.component.scss        | 11 ++++++++---
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/ui/src/app/modules/laboratory/laboratory.component.scss b/ui/src/app/modules/laboratory/laboratory.component.scss
index f0d18f973..2ba5d9338 100644
--- a/ui/src/app/modules/laboratory/laboratory.component.scss
+++ b/ui/src/app/modules/laboratory/laboratory.component.scss
@@ -87,7 +87,7 @@
   border-bottom: solid 1px #eee;
 }
 
-ul {
+.lis-menu ul {
   list-style-type: none;
   margin-left: -24px;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2),
diff --git a/ui/src/app/modules/laboratory/modules/sample-registration/components/person-details/person-details.component.html b/ui/src/app/modules/laboratory/modules/sample-registration/components/person-details/person-details.component.html
index 82c0382e5..34feebcab 100644
--- a/ui/src/app/modules/laboratory/modules/sample-registration/components/person-details/person-details.component.html
+++ b/ui/src/app/modules/laboratory/modules/sample-registration/components/person-details/person-details.component.html
@@ -119,16 +119,18 @@
   ></app-form>
   <app-form
     [fields]="personFields"
+    [colClass]="'col-2'"
     [isFormHorizontal]="true"
     (formUpdate)="onFormUpdate($event)"
   ></app-form>
 
   <div class="row">
-    <div class="col-3">
+    <div class="col-2">
       <div class="row">
         <div class="col-12">
           <app-form
             [fields]="personDOBField"
+            [colClass]="'col-12'"
             [isFormHorizontal]="true"
             (formUpdate)="onFormUpdate($event)"
           ></app-form>
@@ -148,7 +150,7 @@
       <mat-form-field
         class="w-100 no-padding"
         style="margin-left: 6px"
-        appearance="fill"
+        appearance="outline"
       >
         <mat-label>Years</mat-label>
         <input
@@ -168,7 +170,7 @@
       <mat-form-field
         class="w-100 no-padding"
         style="margin-left: 6px"
-        appearance="fill"
+        appearance="outline"
       >
         <mat-label>Months</mat-label>
         <input
diff --git a/ui/src/app/shared/components/capture-form-data/capture-form-data.component.html b/ui/src/app/shared/components/capture-form-data/capture-form-data.component.html
index dbe163d1b..f9482f6c6 100644
--- a/ui/src/app/shared/components/capture-form-data/capture-form-data.component.html
+++ b/ui/src/app/shared/components/capture-form-data/capture-form-data.component.html
@@ -9,6 +9,7 @@
           [isFormHorizontal]="true"
           [isReport]="isReport"
           [formId]="form?.uuid"
+          [ngClass]="isLIS ? 'col-md-2' : null"
           [fieldsData]="observations"
           [formValidationRules]="formValidationRules"
           (formUpdate)="onFormUpdate($event)"
@@ -48,7 +49,7 @@
                     [fields]="formField?.formFields"
                     [isFormHorizontal]="true"
                     [isReport]="isReport"
-                    [colClass]="isLIS ? 'col-4' : null"
+                    [colClass]="isLIS ? 'col-2' : null"
                     [formId]="form?.uuid"
                     [formValidationRules]="formValidationRules"
                     [fieldsData]="observations"
@@ -161,7 +162,6 @@
               member?.setMembers?.length == 0
             "
           >
-        
             <app-form
               [fields]="[member?.formField]"
               [dataType]="member?.dataType"
@@ -172,7 +172,6 @@
               (formUpdate)="onFormUpdate($event)"
             >
             </app-form>
-    
           </div>
           <div
             *ngIf="
diff --git a/ui/src/app/shared/modules/form/components/field/field.component.html b/ui/src/app/shared/modules/form/components/field/field.component.html
index 247bf162d..6802a9ba9 100644
--- a/ui/src/app/shared/modules/form/components/field/field.component.html
+++ b/ui/src/app/shared/modules/form/components/field/field.component.html
@@ -9,7 +9,7 @@
 >
   <mat-form-field
     [ngSwitch]="field?.controlType"
-    appearance="fill"
+    appearance="outline"
     class="w-100 no-padding"
   >
     <mat-label [attr.for]="field?.key">{{ field?.label }} </mat-label>
@@ -254,7 +254,7 @@
     !field?.multiple
   "
 >
-  <mat-form-field class="w-100" appearance="fill">
+  <mat-form-field class="w-100" appearance="outline">
     <mat-label>{{ field?.label }}</mat-label>
     <input
       type="text"
@@ -318,7 +318,7 @@
     field?.multiple
   "
 >
-  <mat-form-field class="w-100" appearance="fill">
+  <mat-form-field class="w-100" appearance="outline">
     <mat-label>{{ field?.label }}</mat-label>
     <mat-select
       [formControlName]="field?.key"
@@ -372,7 +372,7 @@
   <mat-form-field
     [hidden]="field?.hidden"
     [ngSwitch]="field?.controlType"
-    appearance="fill"
+    appearance="outline"
     class="w-100"
   >
     <mat-label [attr.for]="field?.key">{{ field?.label }}</mat-label>
@@ -401,7 +401,7 @@
   <mat-form-field
     [hidden]="field?.hidden"
     [ngSwitch]="field?.controlType"
-    appearance="fill"
+    appearance="outline"
     class="w-100"
   >
     <mat-label [attr.for]="field?.key">{{ field?.label }}</mat-label>
diff --git a/ui/src/app/shared/modules/form/components/field/field.component.scss b/ui/src/app/shared/modules/form/components/field/field.component.scss
index 0b669257f..62a76120a 100644
--- a/ui/src/app/shared/modules/form/components/field/field.component.scss
+++ b/ui/src/app/shared/modules/form/components/field/field.component.scss
@@ -20,7 +20,7 @@
 //   background-color: #fff;
 // }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
 .mat-form-field-underline {
   display: none !important;
 }
@@ -82,12 +82,12 @@ ng-deep .disabled-form-selection-option,
   min-width: 50px;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
 ::ng-deep .mat-form-field-wrapper {
   padding-bottom: 0.375rem !important;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
 ::ng-deep .mat-form-field-infix {
   display: block;
   position: relative;
@@ -95,3 +95,8 @@ ng-deep .disabled-form-selection-option,
   min-width: 80px !important;
   width: auto !important;
 }
+
+.custom-height .mat-form-field-wrapper {
+  height: 60px; /* Adjust the height as needed */
+  align-items: center; /* Optional: centers input content */
+}