From 45cb8c00b20913e262f2c4f77bb264687ea6ea87 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 8 May 2024 14:41:57 -0400
Subject: [PATCH] SSR-1201 subheader font style updates.

Spoke with Devyn about changing multiple gray color values to all use #4d5151 font weight 400 font size 14px.
---
 .../site-sub-header/site-sub-header.vue       | 42 ++++++++++---------
 .../order-confirmation/order-confirmation.vue |  1 -
 .../service-packages/service-packages.vue     |  1 +
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue
index 9c698fc3..37a6565f 100644
--- a/src/iss-components/site-sub-header/site-sub-header.vue
+++ b/src/iss-components/site-sub-header/site-sub-header.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div
-            class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden">
+            class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden mb-2">
             <h5
                 class="text-center fw-normal mb-0 subheader-primary"
                 :class="headerColor">
@@ -18,7 +18,7 @@
             class="subheader-secondary d-flex align-items-center overflow-hidden"
             :class="[justifySubheader, subHeaderClasses]">
             <p
-                class="fw-bold dark-header"
+                class="dark-header"
                 :class="[alternateFormatting, subTextClasses]">
                 <span v-html="subText"> </span>
             </p>
@@ -127,7 +127,7 @@ export default {
 }
 
 .light-header {
-    color: $gray-550;
+    color: $gray-600;
 }
 
 h5 {
@@ -140,28 +140,30 @@ h5 {
         color: $black;
     }
 }
-p.light-gray {
-    color: $gray-550;
-}
-
-p.dark-gray {
-    color: $darker-gray;
-}
-
-p.service-packages-subtext {
-    font-weight: 500 !important;
-    line-height: 24px;
+p {
+    margin: 0;
+    &.light-gray {
+        color: $gray-600;
+    }
+    &.dark-gray {
+        color: $darker-gray;
+    }
+    &.service-packages-subtext {
+        font-weight: 500;
+        line-height: 24px;
+        span {
+            font-size: 1rem;
+        }
+    }
 }
 
 .subheader-secondary {
-    &.justify-content-center {
-        p {
+    p {
+        font-size: .875rem;
+        &.justify-content-center {
             text-align: center;
         }
-    }
-
-    &.justify-content-left {
-        p {
+        &.justify-content-left {
             text-align: left;
         }
     }
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index 9341c7d6..1d858c9a 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -441,7 +441,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$page-side-padding: 1.5rem;
 
 .page-container-grouped-styles {
     overflow: auto;
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 37879fd5..83c53fb3 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -13,6 +13,7 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <siteSubHeader
+                        class="mb-2"
                         justification="left"
                         cmsWidgetName="SiteSubHeaderWidget"
                         issContainingPage="service-packages" />