mes-generalRefactors (#1726)

* Refactored code to bring in line with standard * linting * wording fixed on additional evidence boxes * fixed a bug where the confirm vrn modal would display a blue cancel button instead of black * Corrected wording error * Refactored practice mode modal to support dynamic font sizes * linting
dvsa · Sep 18, 2024 · 882ed28 · 882ed28
1 parent 813af7a
commit 882ed28
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 36 deletions.
diff --git a/src/app/pages/debrief/debrief.page.html b/src/app/pages/debrief/debrief.page.html
@@ -8,10 +8,10 @@
       >{{ 'debrief.title' | translate }} - {{pageState.candidateName$ | async}}</ion-title
     >
   </ion-toolbar>
-  <test-outcome-debrief-card [outcome]="outcome" [grade]="pageState.grade$ | async"></test-outcome-debrief-card>
 </ion-header>
 
 <ion-content>
+  <test-outcome-debrief-card [outcome]="outcome" [grade]="pageState.grade$ | async"></test-outcome-debrief-card>
   <speed-check-debrief-card
     *ngIf="pageState.showSpeedCheck$ | async"
     [emergencyStop]="pageState.emergencyStop$ | async"

diff --git a/src/app/pages/view-test-result/components/vehicle-details-card/vehicle-details-card.html b/src/app/pages/view-test-result/components/vehicle-details-card/vehicle-details-card.html
@@ -68,7 +68,7 @@ <h2 class="des-header-style-4" id="view-test-result-vehicle-details-title">Vehic
 
       <data-row
         *ngIf="data.motEvidenceProvided != null"
-        [label]="'Alternative MOT evidence provided?'"
+        [label]="'Acceptable alternative MOT evidence provided?'"
         [value]="data.motEvidenceProvided ? 'Yes' : 'No'"
       ></data-row>
 

diff --git a/...ar/components/mot-components/alternate-mot-evidence/alternate-mot-evidence.component.html b/...ar/components/mot-components/alternate-mot-evidence/alternate-mot-evidence.component.html
@@ -1,7 +1,7 @@
 <ion-row class="mes-validated-row" id="alternate-evidence-test-card" [formGroup]="formGroup">
   <div class="validation-bar" [class.ng-invalid]="invalid"></div>
   <ion-col class="component-label ion-align-self-center" size="32">
-    <label id="alternate-evidence-test-title"> Alternate MOT evidence provided?</label>
+    <label id="alternate-evidence-test-title"> Acceptable alternative MOT evidence provided?</label>
   </ion-col>
   <ion-col class="ion-align-self-center mes-padding-left">
     <ion-row class="spacing-row"></ion-row>
@@ -35,6 +35,7 @@
     </ion-row>
     <ion-row class="validation-message-row ion-align-items-center">
       <div
+        [hidden]="!invalid"
         class="validation-text"
         [class.ng-invalid]="invalid"
         id="waiting-room-to-car-alternate-evidence-validation-text"

diff --git a/...ng-room-to-car/components/mot-components/mot-failed-modal/mot-failed-modal.component.scss b/...ng-room-to-car/components/mot-components/mot-failed-modal/mot-failed-modal.component.scss
@@ -23,4 +23,8 @@
     color: var(--gds-black)
   }
 
+  .cancel-button {
+    color: var(--gds-black);
+  }
+
 }
diff --git a/.../components/mot-components/practice-mode-mot-modal/practice-mode-mot-modal.component.html b/.../components/mot-components/practice-mode-mot-modal/practice-mode-mot-modal.component.html
@@ -1,35 +1,40 @@
 <ion-card class="modal-alert">
-  <modal-alert-title>You are in practice mode</modal-alert-title>
-  <ion-row class="ion-justify-content-center">
-    <ion-col class="ion-no-padding" size="80">
-      <div class="modal-alert-message mes-data">
-        <div class="mes-data">Please select which MOT result you would like to practice.</div>
-        <ul></ul>
-      </div>
-    </ion-col>
-  </ion-row>
   <ion-row>
-    <ion-col></ion-col>
-    <ion-col class="display-flex ion-justify-content-center" size="30">
-      <ion-button (click)="onConfirm(PracticeModeMOTType.PASS)" class="full-width mes-grey-button">
-        <ion-text class="semibold-font-family">Pass</ion-text>
-      </ion-button>
-    </ion-col>
-    <ion-col class="display-flex ion-justify-content-center" size="30">
-      <ion-button (click)="onConfirm(PracticeModeMOTType.FAILED)" class="full-width mes-grey-button">
-        <ion-text class="semibold-font-family">Fail</ion-text>
-      </ion-button>
-    </ion-col>
-    <ion-col class="display-flex ion-justify-content-center" size="30">
-      <ion-button (click)="onConfirm(PracticeModeMOTType.NO_DETAILS)" class="full-width mes-grey-button">
-        <ion-text class="semibold-font-family">No Details</ion-text>
-      </ion-button>
+    <ion-col size="3"></ion-col>
+    <ion-col>
+      <modal-alert-title>You are in practice mode</modal-alert-title>
+      <ion-row class="ion-justify-content-center">
+        <ion-col class="ion-no-padding" size="80">
+          <div class="modal-alert-message mes-data">
+            <div class="mes-data">Please select which MOT result you would like to practice.</div>
+            <ul></ul>
+          </div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col class="display-flex ion-justify-content-center">
+          <ion-button (click)="onConfirm(PracticeModeMOTType.PASS)" class="full-width mes-grey-button">
+            <ion-text class="des-header-style-3 semibold-font-family">Pass</ion-text>
+          </ion-button>
+        </ion-col>
+        <ion-col class="display-flex ion-justify-content-center">
+          <ion-button (click)="onConfirm(PracticeModeMOTType.FAILED)" class="full-width mes-grey-button">
+            <ion-text class="des-header-style-3 semibold-font-family">Fail</ion-text>
+          </ion-button>
+        </ion-col>
+        <ion-col class="display-flex ion-justify-content-center">
+          <ion-button (click)="onConfirm(PracticeModeMOTType.NO_DETAILS)" class="full-width mes-grey-button">
+            <ion-text class="des-header-style-3 semibold-font-family">No Details</ion-text>
+          </ion-button>
+        </ion-col>
+      </ion-row>
     </ion-col>
-    <ion-col></ion-col>
+    <ion-col size="3"></ion-col>
   </ion-row>
   <ion-row class="padding-top-10">
     <ion-col class="ion-no-padding column-border-top column-border-right">
-      <ion-button id="practice-modal-cancel" class="cancel-button" fill="clear" (click)="onCancel()">Cancel</ion-button>
+      <ion-button id="practice-modal-cancel" class="cancel-button" fill="clear" (click)="onCancel()">Cancel
+      </ion-button>
     </ion-col>
   </ion-row>
 </ion-card>
diff --git a/.../components/mot-components/practice-mode-mot-modal/practice-mode-mot-modal.component.scss b/.../components/mot-components/practice-mode-mot-modal/practice-mode-mot-modal.component.scss
@@ -4,7 +4,7 @@
   @extend .modal-alert-wrapper;
 
   .modal-alert {
-    width: 400px;
+    width: 500px;
   }
 
   .modal-alert-header {
@@ -20,4 +20,8 @@
     color: var(--gds-black)
   }
 
+  .cancel-button {
+    color: var(--gds-black);
+  }
+
 }
diff --git a/src/app/pages/waiting-room-to-car/components/vehicle-registration/vehicle-registration.html b/src/app/pages/waiting-room-to-car/components/vehicle-registration/vehicle-registration.html
@@ -14,14 +14,13 @@
   <ion-col class="ion-align-self-center mes-padding-left">
     <ion-row class="spacing-row"></ion-row>
     <ion-row>
-      <ion-col class="display-flex" [size]="isRekeyMode ? 57 : 45">
+      <ion-col class="display-flex ion-align-items-center" [size]="isRekeyMode ? 57 : 45">
         <ion-input
           type="text"
           id="registration"
           aria-labelledby="vehicle-registration-number-title"
           formControlName="vehicleRegistration"
           class="ion-input-styling"
-          [class.margin-bottom]="!invalid"
           [class.ng-invalid]="invalid"
           [value]="vehicleRegistration"
           (ionInput)="vehicleRegistrationChanged($event)"
@@ -31,7 +30,7 @@
           pasteSanitiser
         ></ion-input>
       </ion-col>
-      <ion-col *ngIf="!isRekeyMode" size="35">
+      <ion-col class="display-flex ion-align-items-center" *ngIf="!isRekeyMode" [size]="getMOTButtonColSize(accessibilityService.getTextZoomClass())">
         <ion-button
           [disabled]="!((formControl.valid) && (networkState.getNetworkState() == ConnectionStatus.ONLINE || isPracticeMode))"
           class="mes-grey-button"
@@ -44,8 +43,8 @@
         <ion-spinner class="search-spinner" name="bubbles" *ngIf="showSearchSpinner"></ion-spinner>
       </ion-col>
     </ion-row>
-    <ion-row *ngIf="invalid" class="validation-message-row ion-align-items-center">
-      <div class="validation-text" [class.ng-invalid]="invalid" id="waiting-room-to-car-registration-validation-text">
+    <ion-row class="validation-message-row ion-align-items-center">
+      <div class="validation-text" [hidden]="!invalid" [class.ng-invalid]="invalid" id="waiting-room-to-car-registration-validation-text">
         Enter the registration number
       </div>
     </ion-row>

diff --git a/src/app/pages/waiting-room-to-car/components/vehicle-registration/vehicle-registration.ts b/src/app/pages/waiting-room-to-car/components/vehicle-registration/vehicle-registration.ts
@@ -7,6 +7,7 @@ import {
   PracticeModeMOTModal,
   PracticeModeMOTType,
 } from '@pages/waiting-room-to-car/components/mot-components/practice-mode-mot-modal/practice-mode-mot-modal.component';
+import { AccessibilityService } from '@providers/accessibility/accessibility.service';
 import { MotHistoryApiService, MotHistoryWithStatus } from '@providers/mot-history-api/mot-history-api.service';
 import { MotHistory, MotStatusCodes } from '@providers/mot-history-api/mot-interfaces';
 import { ConnectionStatus, NetworkStateProvider } from '@providers/network-state/network-state';
@@ -56,7 +57,8 @@ export class VehicleRegistrationComponent implements OnChanges {
   constructor(
     public motApiService: MotHistoryApiService,
     public modalController: ModalController,
-    protected networkState: NetworkStateProvider
+    protected networkState: NetworkStateProvider,
+    protected accessibilityService: AccessibilityService
   ) {}
 
   get invalid(): boolean {
@@ -206,4 +208,15 @@ export class VehicleRegistrationComponent implements OnChanges {
   isMOTNotValid() {
     return this.motData?.data?.status !== MotStatusCodes.NOT_VALID;
   }
+
+  getMOTButtonColSize(zoomClass: string) {
+    switch (zoomClass) {
+      case 'text-zoom-x-large':
+        return 37;
+      case 'text-zoom-large':
+        return 33;
+      default:
+        return 30;
+    }
+  }
 }