Fix general UI issues (bcgov#1657)

* Fix general UI issues * Cleanup
cameron-eyds · Dec 12, 2023 · 5b515dc · 5b515dc
1 parent 196e6b9
commit 5b515dc
Show file tree

Hide file tree

Showing 60 changed files with 197 additions and 23 deletions.
diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

diff --git a/ppr-ui/src/App.vue b/ppr-ui/src/App.vue
@@ -34,7 +34,7 @@
         />
         <Breadcrumb v-if="haveData" />
         <Tombstone v-if="haveData" />
-        <v-container>
+        <v-container class="py-0">
           <v-row noGutters>
             <v-col cols="12">
               <router-view

diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
@@ -61,6 +61,10 @@ body {
 // Containers
 .v-application {
   background-color: $gray1 !important;
+
+  p {
+    margin-bottom: 16px;
+  }
 }
 
 .view-container {
@@ -206,6 +210,12 @@ a {
   background-color: $app-lt-blue;
   padding: 1rem 1.5rem;
   color: $gray9;
+
+  .review-header-icon {
+    vertical-align: middle;
+    width: 25px;
+    height: 21px;
+  }
 }
 
 // Tables

diff --git a/ppr-ui/src/assets/styles/overrides.scss b/ppr-ui/src/assets/styles/overrides.scss
@@ -96,6 +96,15 @@
   min-height: 44px;
 }
 
+.v-input__details {
+  letter-spacing: 0;
+
+  .v-messages {
+    color: #495057;
+    opacity: 1;
+  }
+}
+
 // Button Overrides
 .v-btn {
   box-shadow: none;

diff --git a/ppr-ui/src/components/collateral/vehicleCollateral/EditCollateral.vue b/ppr-ui/src/components/collateral/vehicleCollateral/EditCollateral.vue
@@ -44,6 +44,7 @@
                 <v-text-field
                   id="txt-type"
                   variant="filled"
+                  color="primary"
                   label="Vehicle Type"
                   modelValue="Manufactured Home (MH)"
                   readonly
@@ -58,6 +59,7 @@
                   :items="vehicleTypesNoMH"
                   itemTitle="text"
                   variant="filled"
+                  color="primary"
                   label="Vehicle Type"
                   :errorMessages="
                     errors.type.message ? errors.type.message : ''
@@ -73,6 +75,7 @@
                   :items="vehicleTypes"
                   itemTitle="text"
                   variant="filled"
+                  color="primary"
                   label="Vehicle Type"
                   :errorMessages="
                     errors.type.message ? errors.type.message : ''
@@ -91,6 +94,7 @@
                   v-model="currentVehicle.manufacturedHomeRegistrationNumber"
                   class="mh-num-input"
                   variant="filled"
+                  color="primary"
                   label="Manufactured Home Registration Number"
                   :errorMessages="
                     errors.manufacturedHomeRegistrationNumber.message
@@ -109,6 +113,7 @@
                   v-model="currentVehicle.serialNumber"
                   class="serial-number"
                   variant="filled"
+                  color="primary"
                   :label="getSerialLabel"
                   :disabled="getSerialDisabled"
                   :errorMessages="
@@ -127,6 +132,7 @@
                   id="txt-years"
                   v-model="currentVehicle.year"
                   variant="filled"
+                  color="primary"
                   label="Year (Optional)"
                   hint="YYYY"
                   persistentHint
@@ -143,6 +149,7 @@
                   id="txt-make"
                   v-model="currentVehicle.make"
                   variant="filled"
+                  color="primary"
                   label="Make"
                   persistentHint
                   :errorMessages="
@@ -158,6 +165,7 @@
                   id="txt-model"
                   v-model="currentVehicle.model"
                   variant="filled"
+                  color="primary"
                   label="Model"
                   persistentHint
                   :errorMessages="

diff --git a/ppr-ui/src/components/common/CautionBox.vue b/ppr-ui/src/components/common/CautionBox.vue
@@ -1,10 +1,12 @@
 <template>
   <div
-    class="caution-box px-4 py-4 fs-14"
+    class="caution-box px-5 py-5 fs-14"
     :class="{ 'alert-box': setAlert }"
   >
     <slot name="prependSLot" />
-    <p><b>{{ setImportantWord }}:</b> <span v-html="setMsg" /></p>
+    <p class="mb-0">
+      <b>{{ setImportantWord }}:</b> <span v-html="setMsg" />
+    </p>
     <slot name="appendSLot" />
   </div>
 </template>

diff --git a/ppr-ui/src/components/common/ContactInformation.vue b/ppr-ui/src/components/common/ContactInformation.vue
@@ -92,6 +92,7 @@
                         id="first-name"
                         v-model="contactInfoModel.personName.first"
                         variant="filled"
+                        color="primary"
                         class="pt-4 pr-2"
                         :class="{ 'long-error-message': enableCombinedNameValidation }"
                         label="First Name"
@@ -105,6 +106,7 @@
                         id="middle-name"
                         v-model="contactInfoModel.personName.middle"
                         variant="filled"
+                        color="primary"
                         class="pt-4 px-2"
                         label="Middle Name (Optional)"
                         :error="hasLongCombinedName"
@@ -117,6 +119,7 @@
                         id="last-name"
                         v-model="contactInfoModel.personName.last"
                         variant="filled"
+                        color="primary"
                         class="pt-4 px-2"
                         label="Last Name"
                         :error="hasLongCombinedName"
@@ -139,6 +142,7 @@
                         id="business-name"
                         v-model="contactInfoModel.businessName"
                         variant="filled"
+                        color="primary"
                         class="pt-4 pr-2"
                         label="Business Name"
                         :rules="isBusinessOption ? businessNameRules : []"
@@ -156,6 +160,7 @@
                   id="contact-info-email"
                   v-model="contactInfoModel.emailAddress"
                   variant="filled"
+                  color="primary"
                   class="pt-4 pr-2"
                   label="Email Address (Optional)"
                   :rules="emailRules"
@@ -174,6 +179,7 @@
                       v-model="contactInfoModel.phoneNumber"
                       v-maska:[phoneMask]
                       variant="filled"
+                      color="primary"
                       class="pt-4 pr-3"
                       label="Phone Number (Optional)"
                       :rules="phoneRules"
@@ -184,6 +190,7 @@
                       id="contact-info-phone-ext"
                       v-model="contactInfoModel.phoneExtension"
                       variant="filled"
+                      color="primary"
                       class="pt-4 px-2"
                       label="Extension (Optional)"
                       :rules="phoneExtensionRules"

diff --git a/ppr-ui/src/components/common/CourtOrder.vue b/ppr-ui/src/components/common/CourtOrder.vue
@@ -243,6 +243,7 @@
               id="txt-court-name"
               v-model.trim="courtName"
               variant="filled"
+              color="primary"
               label="Court Name"
               hint="For example: Supreme Court of British Columbia"
               persistentHint
@@ -269,6 +270,7 @@
               id="txt-court-registry"
               v-model.trim="courtRegistry"
               variant="filled"
+              color="primary"
               label="Court Registry"
               hint="The location (city) of the court. For example: Richmond"
               persistentHint
@@ -295,6 +297,7 @@
               id="txt-court-file-number"
               v-model.trim="fileNumber"
               variant="filled"
+              color="primary"
               label="Court File Number"
               persistentHint
               :errorMessages="
@@ -353,6 +356,7 @@
               autoGrow
               counter="512"
               variant="filled"
+              color="primary"
               label="Effect of Order"
               class="bg-white pt-2 text-input-field"
               :errorMessages="

diff --git a/ppr-ui/src/components/common/DocumentId.vue b/ppr-ui/src/components/common/DocumentId.vue
@@ -37,6 +37,7 @@
               id="doc-id-field"
               v-model="documentIdModel"
               variant="filled"
+              color="primary"
               maxlength="8"
               label="Document ID Number"
               :rules="documentIdRules"

diff --git a/ppr-ui/src/components/common/FolioNumber.vue b/ppr-ui/src/components/common/FolioNumber.vue
@@ -7,6 +7,7 @@
       label="Folio or Reference Number"
       persistentHint
       variant="filled"
+      color="primary"
       @keypress.enter="shiftFocus()"
     />
   </div>

diff --git a/ppr-ui/src/components/common/FolioNumberSummary.vue b/ppr-ui/src/components/common/FolioNumberSummary.vue
@@ -47,6 +47,7 @@
               v-model="folioNumber"
               class="text-folio"
               variant="filled"
+              color="primary"
               label="Folio or Reference Number (Optional)"
               persistentHint
               :rules="rules"

diff --git a/ppr-ui/src/components/common/FormField.vue b/ppr-ui/src/components/common/FormField.vue
@@ -15,6 +15,7 @@
         v-model="inputModel"
         class="px-1"
         variant="filled"
+        color="primary"
         :label="inputLabel"
         :rules="rules"
         :data-test-id="`${sectionId}-text-field`"

diff --git a/ppr-ui/src/components/common/HomeLocationInfo.vue b/ppr-ui/src/components/common/HomeLocationInfo.vue
@@ -21,6 +21,7 @@
               id="band-name"
               v-model="locationInfo.bandName"
               variant="filled"
+              color="primary"
               label="Band Name"
               :rules="locationInputRules(null, 'Enter a band name', 'band-name')"
             />
@@ -33,6 +34,7 @@
               id="reserve-number"
               v-model="locationInfo.reserveNumber"
               variant="filled"
+              color="primary"
               label="Reserve Number"
               :rules="locationInputRules(null, 'Enter a reserve number', 'reserve-number')"
             />
@@ -42,6 +44,7 @@
               id="reserve-additional-description"
               v-model="additionalDescription"
               variant="filled"
+              color="primary"
               label="Additional Description"
               hint="Example: PIN number"
               :error="isReserveLengthErr"
@@ -62,6 +65,7 @@
             id="lot"
             v-model="locationInfo.lot"
             variant="filled"
+            color="primary"
             :label="isStrata ? 'Strata Lot' : 'Lot'"
             :rules="locationInputRules(10, 'Enter a lot number', 'lot')"
             persistentHint
@@ -75,6 +79,7 @@
             id="land-district"
             v-model="locationInfo.landDistrict"
             variant="filled"
+            color="primary"
             label="Land District"
             :rules="locationInputRules(20, 'Enter a land district', 'land-district')"
             persistentHint
@@ -88,6 +93,7 @@
             id="plan"
             v-model="locationInfo.plan"
             variant="filled"
+            color="primary"
             :label="isStrata ? 'Strata Plan' : 'Plan'"
             :rules="locationInputRules(12, 'Enter a plan number', 'plan')"
             persistentHint
@@ -104,6 +110,7 @@
             id="district-lot"
             v-model="locationInfo.districtLot"
             variant="filled"
+            color="primary"
             label="District Lot"
             :rules="locationInputRules(17, 'Enter a district lot', 'district-lot')"
             persistentHint
@@ -118,6 +125,7 @@
             id="part-of"
             v-model="locationInfo.partOf"
             variant="filled"
+            color="primary"
             label="Part Of"
             :rules="maxLength(10)"
             persistentHint
@@ -132,6 +140,7 @@
             id="section"
             v-model="locationInfo.section"
             variant="filled"
+            color="primary"
             label="Section"
             :rules="maxLength(10)"
             persistentHint
@@ -148,6 +157,7 @@
             id="township"
             v-model="locationInfo.township"
             variant="filled"
+            color="primary"
             label="Township"
             :rules="maxLength(2)"
             persistentHint
@@ -162,6 +172,7 @@
             id="Range"
             v-model="locationInfo.range"
             variant="filled"
+            color="primary"
             label="Range"
             :rules="maxLength(2)"
             persistentHint
@@ -176,6 +187,7 @@
             id="meridian"
             v-model="locationInfo.meridian"
             variant="filled"
+            color="primary"
             label="Meridian"
             :rules="maxLength(3)"
             persistentHint
@@ -192,6 +204,7 @@
             id="parcel"
             v-model="locationInfo.parcel"
             variant="filled"
+            color="primary"
             label="Parcel"
             :rules="locationInputRules(10, 'Enter a parcel block')"
             persistentHint
@@ -206,6 +219,7 @@
             id="block"
             v-model="locationInfo.block"
             variant="filled"
+            color="primary"
             label="Block"
             :rules="locationInputRules(10, 'Enter a block')"
             persistentHint
@@ -219,6 +233,7 @@
             id="exceptionPlan"
             v-model="locationInfo.exceptionPlan"
             variant="filled"
+            color="primary"
             label="Except Plan"
             :rules="maxLength(80)"
             persistentHint

diff --git a/ppr-ui/src/components/common/InfoChip.vue b/ppr-ui/src/components/common/InfoChip.vue
@@ -2,7 +2,7 @@
   <v-chip
     v-if="action"
     class="info-chip-badge mr-4"
-    variant="elevated"
+    variant="flat"
     xSmall
     :color="chipColors.bgColor"
     :data-test-id="`${action}-badge`"