feat: (#614)

- Changes described in FSADT1-995

frontend/src/assets/styles/global.scss

@@ -236,7 +236,7 @@ hr {
 
 .cds--inline-notification-content {
   width: 100%;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 400;
 }
@@ -497,7 +497,7 @@ div#app {
   align-self: flex-start;
   display: flex;
   flex-direction: column;
-  gap: 3rem;
+  gap: 2rem;
 }
 
 .content-landing {
@@ -1064,7 +1064,6 @@ cds-side-nav {
   flex:4;
 }
 
-
 cds-accordion-item[open]:not([disabled])::part(content) ,:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md {
   padding-right: 1rem !important;
   padding-top: 0rem;
@@ -1403,7 +1402,7 @@ cds-tag {
 /* Large (from 1056px to 1311px) */
 @media screen and (min-width: 1056px) and (max-width: 1311px) {
   .screen {
-    padding: 2.5rem 2rem;
+    padding: 0rem 2rem 2rem;
     align-items: center;
   }
 
@@ -1579,7 +1578,7 @@ cds-tag {
 /* XXX-Large (1784px and above) */
 @media screen and (min-width: 1784px) {
   .screen {
-    padding: 2.5rem 7.75rem;
+    padding: 1rem 7.75rem 2.5rem;
     align-items: center;
   }
 
@@ -1620,4 +1619,4 @@ cds-tag {
     padding: 2.5rem 2.5rem 2.5rem 18.5rem;
     max-width: calc(100vw - 21rem);
   }
-}
+}

frontend/src/pages/FormBCSCPage.vue

@@ -16,8 +16,7 @@
       Personal information
     </span>
     <p class="body-compact-01">
-      Review the personal information below. It’s from your BC Services card.<br /><br />
-      We use it to know who we're giving a number to and for communicating with clients. 
+      Review the personal information below. It’s from your BC Services card. We use it to know who we're giving a number to and for communicating with clients. 
     </p>
 
     <div class="card">
@@ -44,23 +43,23 @@
         </cds-inline-notification>
         <br /><br />
 
-        <p class="body-compact-01">Full name</p>
-        <p>{{ formData.businessInformation.businessName }}</p>
+        <p class="label-01">Full name</p>
+        <p class="body-compact-01">{{ formData.businessInformation.businessName }}</p>
       </div>
       <hr class="divider" />
       <div>
-        <p class="body-compact-01">Date of birth</p>
-        <p>{{ figmaFormattedDate }}</p>
+        <p class="label-01">Date of birth</p>
+        <p class="body-compact-01">{{ figmaFormattedDate }}</p>
       </div>
       <hr class="divider" />
       <div>
-        <p class="body-compact-01">Email address</p>
-        <p>{{ formData.location.contacts[0].email }}</p>
+        <p class="label-01">Email address</p>
+        <p class="body-compact-01">{{ formData.location.contacts[0].email }}</p>
       </div>
       <hr class="divider" />
       <div>
-        <p class="body-compact-01">Address</p>
-        <p>
+        <p class="label-01">Address</p>
+        <p class="body-compact-01">
           {{ formData.businessInformation.address.streetAddress }} <br />
           {{ formData.businessInformation.address.city }}, {{ formData.businessInformation.address.province.value }} <br />
           {{ formData.businessInformation.address.country.text }} <br />
@@ -334,7 +333,7 @@ const addContact = (autoFocus = true) => {
   );
   if (autoFocus) {
     const focusIndex = newLength - 1;
-    setFocusedComponent(`addressname_${focusIndex}`);
+    setFocusedComponent(`role_${focusIndex}`);
   }
   return newLength;
 };