Merge pull request #2059 from bcgov/feature/ALCS-2059-qa-ui-fixes

ALCS-2059 Ui Fixes
bcgov · Jan 17, 2025 · fff57c2 · fff57c2
2 parents eacade6 + b9f2097
commit fff57c2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.html b/alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.html
@@ -106,36 +106,36 @@ <h5>Res #{{ decision.resolutionNumber }}/{{ decision.resolutionYear }}</h5>
       <section class="decision-section-no-title">
         <div class="grid-2">
           <div>
-            <span class="subheading2">Decision Date: </span>
+            <span class="subheading2">Decision Date:&nbsp;</span>
             {{ decision.date | momentFormat }}
             <app-no-data *ngIf="decision.date === null || decision.date === undefined"></app-no-data>
           </div>
           <div class="align-right">
-            <span class="subheading2">Decision Maker: </span>
+            <span class="subheading2">Decision Maker:&nbsp;</span>
             {{ decision.decisionMaker?.label }}
             <app-no-data *ngIf="decision.decisionMaker === null || decision.decisionMaker === undefined"></app-no-data>
           </div>
         </div>
-        <div class="component-summary">
-          <div *ngIf="decision.ceoCriterion">
-            <span class="subheading2">CEO Criterion: </span>
-            {{ decision.ceoCriterion?.label }}
+        <div *ngIf="decision.ceoCriterion" class="component-summary">
+          <div>
+            <span class="subheading2">CEO Criterion:&nbsp;</span>
+            {{ decision.ceoCriterion.label }}
             <ng-container *ngIf="decision.isTimeExtension || decision.isOther">&#32;-&#32;</ng-container>
             <ng-container *ngIf="decision.isTimeExtension">Time extension</ng-container>
             <ng-container *ngIf="decision.isTimeExtension && decision.isOther">,&#32;</ng-container>
             <ng-container *ngIf="decision.isOther">Other</ng-container>
           </div>
         </div>
-        <div class="component-summary">
-          <div *ngIf="decision.outcome?.code === 'RESC'">
-            <span class="subheading2">Rescinded Date: </span>
+        <div *ngIf="decision.outcome?.code === 'RESC'" class="component-summary">
+          <div>
+            <span class="subheading2">Rescinded Date:&nbsp;</span>
             <ng-container *ngIf="decision.rescindedDate">{{ decision.rescindedDate | momentFormat }}</ng-container>
             <app-no-data *ngIf="decision.rescindedDate === null || decision.rescindedDate === undefined"></app-no-data>
           </div>
         </div>
-        <div class="component-summary">
-          <div *ngIf="decision.outcome?.code === 'RESC'">
-            <span class="subheading2">Rescinded Comment: </span>
+        <div *ngIf="decision.outcome?.code === 'RESC'" class="component-summary">
+          <div>
+            <span class="subheading2">Rescinded Comment:&nbsp;</span>
             {{ decision.rescindedComment }}
             <app-no-data *ngIf="!decision.rescindedComment"></app-no-data>
           </div>

diff --git a/alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.scss b/alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.scss
@@ -9,6 +9,10 @@ h4 {
   margin-bottom: 12px !important;
 }
 
+h5 {
+  padding-top: 20px;
+}
+
 hr {
   margin: 36px 0;
   stroke: colors.$grey;
@@ -139,7 +143,7 @@ hr {
 :host ::ng-deep {
   .grid-2 {
     margin-top: 18px;
-    margin-bottom: 18px;
+    margin-bottom: 6px;
     display: grid;
     grid-template-columns: 50% 50%;
     grid-row-gap: 18px;

diff --git a/...rontend/src/app/features/notice-of-intent/decision/decision-v2/decision-v2.component.html b/...rontend/src/app/features/notice-of-intent/decision/decision-v2/decision-v2.component.html
@@ -99,37 +99,36 @@ <h4>Resolution</h4>
       <section class="decision-section-no-title">
         <div class="grid-2">
           <div>
-            <span class="subheading2">Decision Date: </span>
+            <span class="subheading2">Decision Date:&nbsp;</span>
             {{ decision.date ? (decision.date | momentFormat) : undefined }}
             <app-no-data *ngIf="decision.date === null || decision.date === undefined"></app-no-data>
           </div>
           <div class="align-right">
-            <span class="subheading2">Decision Maker: </span>
+            <span class="subheading2">Decision Maker:&nbsp;</span>
             {{ decision.decisionMaker }}
             <app-no-data *ngIf="decision.decisionMaker === null || decision.decisionMaker === undefined"></app-no-data>
           </div>
 
-          <div class="component-summary">
-            <div *ngIf="decision.outcome?.code === 'RESC'">
-              <span class="subheading2">Rescinded Date: </span>
+          <div *ngIf="decision.outcome?.code === 'RESC'" class="component-summary">
+            <div>
+              <span class="subheading2">Rescinded Date:&nbsp;</span>
               <ng-container *ngIf="decision.rescindedDate">{{ decision.rescindedDate | momentFormat }}</ng-container>
               <app-no-data *ngIf="decision.rescindedDate === null || decision.rescindedDate === undefined"></app-no-data>
             </div>
           </div>
-          <div class="component-summary">
-            <div *ngIf="decision.outcome?.code === 'RESC'">
-              <span class="subheading2">Rescinded Comment: </span>
+          <div *ngIf="decision.outcome?.code === 'RESC'" class="component-summary">
+            <div>
+              <span class="subheading2">Rescinded Comment:&nbsp;</span>
               {{ decision.rescindedComment }}
               <app-no-data *ngIf="!decision.rescindedComment"></app-no-data>
             </div>
           </div>
-
-          <div class="full-width decision-description">
-            {{ decision.decisionDescription }}
-            <app-no-data
-              *ngIf="decision.decisionDescription === null || decision.decisionDescription === undefined"
-            ></app-no-data>
-          </div>
+        </div>
+        <div class="full-width decision-description">
+          {{ decision.decisionDescription }}
+          <app-no-data
+            *ngIf="decision.decisionDescription === null || decision.decisionDescription === undefined"
+          ></app-no-data>
         </div>
         <ng-container *ngFor="let component of decision.components; let index = index">
           <div class="component-summary">

diff --git a/...rontend/src/app/features/notice-of-intent/decision/decision-v2/decision-v2.component.scss b/...rontend/src/app/features/notice-of-intent/decision/decision-v2/decision-v2.component.scss
@@ -9,6 +9,10 @@ h4 {
   margin-bottom: 12px !important;
 }
 
+h5 {
+  padding-top: 20px;
+}
+
 hr {
   margin: 36px 0;
   stroke: colors.$grey;
@@ -139,7 +143,7 @@ hr {
 :host ::ng-deep {
   .grid-2 {
     margin-top: 18px;
-    margin-bottom: 18px;
+    margin-bottom: 6px;
     display: grid;
     grid-template-columns: 50% 50%;
     grid-row-gap: 18px;