feat: update heading-compact-01

bcgov · Feb 15, 2024 · 5991a11 · 5991a11
1 parent 17dc8e5
commit 5991a11
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 21 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -403,23 +403,35 @@ div#app {
 }
 
 .heading-compact-01, cds-accordion-item::part(title) {
-  color: var(--dark-theme-text-text-primary, #f3f3f5);
+  color: var(--light-theme-text-text-primary, #131315);
 
   /* Fixed heading styles/heading-compact-01 */
 
-  font-size: 0.875rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 700;
-  line-height: 1.125rem;
-  letter-spacing: 0.01rem;
+  line-height: 1.375rem;
+  letter-spacing: 0;
 }
 
-cds-accordion-item::part(title) {
-  color: var(--light-theme-text-text-primary, #131315);
+.light-theme-text-text-primary {
+  color: var(--light-theme-text-text-primary, #131315) !important;
 }
 
-.heading-compact-01-dark {
-  color: var(--light-theme-text-text-primary, #131315) !important;
+.light-theme-text-text-secondary {
+  color: var(--light-theme-text-text-secondary, #606062);
+}
+
+.heading-compact-02 {
+  color: var(--dark-theme-text-text-primary, #f3f3f5);
+
+  /* Fixed heading styles/heading-compact-02 */
+
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.125rem;
+  letter-spacing: 0.01rem;
 }
 
 .heading-07,
@@ -540,10 +552,6 @@ cds-actionable-notification * {
   letter-spacing: 0.01rem;
 }
 
-.light-theme-text-text-secondary {
-  color: var(--light-theme-text-text-secondary, #606062);
-}
-
 .content {
   flex-grow: 1;
   align-self: stretch;

diff --git a/frontend/src/components/MainHeaderComponent.vue b/frontend/src/components/MainHeaderComponent.vue
@@ -124,9 +124,9 @@ const adminEmail = "[email protected]";
     </a>
 
     <cds-header-name href="javascript:void 0">
-      <span class="heading-compact-01" v-if="$session?.user?.provider !== 'idir'">Ministry of Forests</span>
-      <span class="heading-compact-01" v-else>Client Management System</span>
-      <span class="heading-compact-01" v-if="env !== 'Prod' && !isSmallScreen">Env. {{ env }} - Rel. {{appVersion}}</span>
+      <span class="heading-compact-02" v-if="$session?.user?.provider !== 'idir'">Ministry of Forests</span>
+      <span class="heading-compact-02" v-else>Client Management System</span>
+      <span class="heading-compact-02" v-if="env !== 'Prod' && !isSmallScreen">Env. {{ env }} - Rel. {{appVersion}}</span>
     </cds-header-name>
 
     <div class="heading-buttons">

diff --git a/frontend/src/components/UserProfileComponent.vue b/frontend/src/components/UserProfileComponent.vue
@@ -36,7 +36,7 @@ const initials = computed(() =>
     <span class="avatar-text">{{ initials }}</span>
   </div>
   <div class="grouping-20">
-    <p class="heading-compact-01 heading-compact-01-dark">{{name}}</p>
+    <p class="heading-compact-02 light-theme-text-text-primary">{{name}}</p>
     <p class="helper-text-01">{{provider.toUpperCase()}}: {{identifier}}</p>
     <p class="helper-text-01">{{email}}</p>
   </div>

diff --git a/frontend/src/components/grouping/ErrorNotificationGroupingComponent.vue b/frontend/src/components/grouping/ErrorNotificationGroupingComponent.vue
@@ -173,7 +173,7 @@ const goToStep = (step: number) => {
       kind="error"
     >
       <p class="body-compact-01">
-        <span class="heading-compact-01 heading-compact-01-dark"
+        <span class="heading-compact-02 light-theme-text-text-primary"
           >Contact required: “{{ item }}”</span
         >
         must have a contact.

diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
@@ -471,7 +471,7 @@ const formattedDistrictsList = computed(() =>
 
         <div class="form-steps-section-01">
           <h5>Add authorized people to the account</h5>
-            <p class="body-02 heading-compact-01-dark">
+            <p class="body-02 light-theme-text-text-primary">
               Review your name and email address. They’re from your BCeID.
             </p>
         </div>

diff --git a/frontend/src/pages/SubmissionReviewPage.vue b/frontend/src/pages/SubmissionReviewPage.vue
@@ -534,7 +534,7 @@ const renderListItem = (label, clientNumber) => {
             :key="location.name">
 
               <hr class="grouping-divider" v-if="location.index > 0"/>
-              <p class="body-01 heading-compact-01-dark">{{location.name}}</p>
+              <p class="body-01 light-theme-text-text-primary">{{location.name}}</p>
               <div class="grouping-07">                 
                 <read-only-component label="Street address">
                   <span class="body-compact-01">{{ location.streetAddress }}</span>
@@ -568,7 +568,7 @@ const renderListItem = (label, clientNumber) => {
             :key="contact.index">
 
               <hr class="grouping-divider" v-if="contact.index > 0"/>
-              <p class="body-01 heading-compact-01-dark">{{contact.firstName}} {{ contact.lastName }}</p>
+              <p class="body-01 light-theme-text-text-primary">{{contact.firstName}} {{ contact.lastName }}</p>
               <div class="grouping-07">
                 <read-only-component label="Associated location" v-if="$features.BCEID_MULTI_ADDRESS">
                   <span class="body-compact-01">{{ contact.locations.join(", ") }}</span>

diff --git a/frontend/src/pages/bceidform/AddressWizardStep.vue b/frontend/src/pages/bceidform/AddressWizardStep.vue
@@ -182,7 +182,7 @@ onMounted(() => safeSetFocusedComponent("addr_0", 800));
       </div>
     </div>
     <div class="grouping-02">
-      <p class="body-02 heading-compact-01-dark">
+      <p class="body-02 light-theme-text-text-primary">
         If the business operates in more than one location you can include additional addresses.
       </p>
     </div>