[FSADT1-1091] Update content alignment in step 4 (#715)

* feat: align review sections to their text titles * refactor: use a more expressive class name
bcgov · Jan 4, 2024 · 0e2ec0e · 0e2ec0e
1 parent a86db92
commit 0e2ec0e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -923,11 +923,16 @@ cds-actionable-notification * {
   gap: 2rem;
 }
 
+.grouping-22-item {
+  margin-left: 1.75rem;
+}
+
 .grouping-23 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
+  margin-left: 1.75rem;
 }
 
 .grouping-divider {

diff --git a/frontend/src/pages/bceidform/ReviewWizardStep.vue b/frontend/src/pages/bceidform/ReviewWizardStep.vue
@@ -62,11 +62,11 @@ onMounted(() => {
           <Enterprise20 />
           {{ formData.businessInformation.businessName }}
         </h6>
-        <p class="body-compact-01" id="clientTypeId">
+        <p class="body-compact-01 grouping-22-item" id="clientTypeId">
           {{ clientType.text }}
         </p>
       </div>
-      <div v-if="formData.businessInformation.birthdate">
+      <div v-if="formData.businessInformation.birthdate" class="grouping-22-item">
         <p class="label-01">Proprietor’s birthdate</p>
         <p class="body-compact-01">{{ formData.businessInformation.birthdate }}</p>
       </div>