From 6e2970ad8609ff5c516f78e5253681c1d849fcd3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 21 Mar 2025 12:04:52 -0400
Subject: [PATCH 1/2] CASH-404 desktop updates.

---
 .../dropdown-question/dropdown-question.vue              | 3 +++
 src/experiment-components/service-package-radio.vue      | 4 ++--
 .../funnel-sub-header/funnel-sub-header.vue              | 1 +
 .../save-progress-modal-question.vue                     | 3 +++
 .../save-progress-popup-question.vue                     | 8 +++++++-
 src/layouts/quote/quote.vue                              | 9 ++++++---
 src/layouts/schedule/schedule.vue                        | 3 +++
 .../service-location/shop-question/shop-question.vue     | 4 ++++
 src/styles/common-typography-styles.scss                 | 2 ++
 src/styles/mixins/customMixins.scss                      | 9 +++++++++
 src/styles/ux-variables.scss                             | 2 +-
 src/ux-components/list-button/list-button.vue            | 2 +-
 src/ux-components/text-link/text-link.vue                | 4 ++++
 13 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index 70bf6c90c..8b3cf023f 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -142,6 +142,9 @@ export default {
         border: 1px solid $gray-500;
         border-radius: 0.5rem;
         min-height: 3rem;
+        @include media-breakpoint-up(md) {
+            min-height: 3.5rem;
+        }
         &:focus,
         &:focus-visible {
             box-shadow: 0 0 0 2.5px $blue;
diff --git a/src/experiment-components/service-package-radio.vue b/src/experiment-components/service-package-radio.vue
index f0eb991c6..440bcbb58 100644
--- a/src/experiment-components/service-package-radio.vue
+++ b/src/experiment-components/service-package-radio.vue
@@ -169,10 +169,10 @@ export default {
             display: flex;
             flex-direction: column;
             &:first-child {
-                margin: 1rem 0.5rem 0 0;
+                margin: 1rem 1rem 0 0;
             }
             &:last-child {
-                margin: 1rem 0 0 0.5rem;
+                margin: 1rem 0 0 1rem;
             }
         }
 
diff --git a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
index fa8aea13f..e296206ac 100644
--- a/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/fmg-components/funnel-sub-header/funnel-sub-header.vue
@@ -89,6 +89,7 @@ p.small {
 }
 .sub-text {
     margin: 0;
+    @include responsive-heading-md(0.875rem, 1rem);
 }
 
 .justify-content-start {
diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index 76ee7c6a2..ef4677371 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -148,6 +148,9 @@ export default {
         margin: 0 auto;
         transition: all 150ms linear;
         background: none;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
 
         &.btn {
             &.btn-secondary {
diff --git a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
index 34ef44e71..ce6b45118 100644
--- a/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
+++ b/src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue
@@ -164,6 +164,9 @@ export default {
         margin: 0 auto 1.5rem auto;
         transition: all 150ms linear;
         background: none;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
 
         &:hover,
         &:active,
@@ -241,7 +244,10 @@ export default {
             button.btn.skip-button {
                 padding: 0;
                 order: 2;
-                font-size: 1rem;
+                font-size: 0.875rem;
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
             }
             .modal-disclaimer {
                 font-size: 0.75rem;
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 615662013..49d116946 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -57,7 +57,7 @@
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="small mt-6 d-flex justify-content-center"
+                        class="mt-6 d-flex justify-content-center"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -533,7 +533,7 @@ export default {
     methods: {
         getColCount() {
             if (this.packageNumber > 2) {
-                return "col-xl-8";
+                return "col-xl-10";
             } else {
                 return "col-xl-6";
             }
@@ -775,7 +775,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;
 
@@ -793,4 +793,7 @@ export default {
 .text-block {
     display: block;
 }
+:deep(.promo-modal-question a) {
+    @include responsive-heading-md(0.875rem, 1rem);
+}
 </style>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 2704cdaf6..90bd3d727 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -744,6 +744,9 @@ export default {
         &:focus {
             outline: 1px solid $blue;
         }
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
     }
 }
 .funnel-sub-header {
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index a15d8bb0b..98d7e537e 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -271,6 +271,10 @@ export default {
     margin-top: 1rem;
     text-align: center;
 
+    a {
+        @include responsive-heading-md(0.875rem, 1rem);
+    }
+
     .button-question {
         .question-text {
             margin-top: 0.5rem;
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 6a9c4f893..fc3e87896 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -8,6 +8,7 @@ body {
 
 //Headings
 //add helper fw-bold to any element to get bold style (500)
+
 h1,
 .h1 {
     line-height: 1.325;
@@ -36,6 +37,7 @@ h5,
 .h5 {
     line-height: 1.325;
     font-weight: 400;
+    @include responsive-heading-md(1.25rem, 1.625rem);
 }
 
 h6,
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index d0670ad6c..33649319f 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -8,3 +8,12 @@
 @mixin box-shadow-hover($color) {
     box-shadow: 0 0 0 4px $color;
 }
+
+//Define heading sizes for medium breakpoints
+@mixin responsive-heading-md($font-size, $md-font-size) {
+    font-size: $font-size;
+
+    @include media-breakpoint-up(md) {
+        font-size: $md-font-size;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index df984b224..5c4045fd7 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -141,7 +141,7 @@ $h1-font-size: $font-size-base * 3;
 $h2-font-size: $font-size-base * 2.625;
 $h3-font-size: $font-size-base * 2;
 $h4-font-size: $font-size-base * 1.625;
-$h5-font-size: $font-size-base * 1.25;
+//$h5-font-size: $font-size-base * 1.25;// Font size set in customMixins.scss
 $h6-font-size: $font-size-base * 0.875;
 
 //Border Radius
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 1ebc46cc7..d31f20e5d 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -5,7 +5,7 @@
         v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
-            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
             <span class="m-0" :class="textPosition">
                 {{ buttonLabel }}
             </span>
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 30cd2d7e5..7c19d7911 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -80,10 +80,14 @@ a {
     }
     &.navigation-link,
     &.new-window-link {
+        font-size: .875rem;
         color: $black;
         line-height: 26px;
         white-space: nowrap;
         align-items: center;
+        @include media-breakpoint-up(md) {
+            font-size: 1rem;
+        }
     }
     &.new-window-link {
         margin-bottom: 1.5rem;

From 9b336d3c4feafcacd08ff97e6b4a6d4cca59b8d3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 24 Mar 2025 09:25:29 -0400
Subject: [PATCH 2/2] Format code.

---
 src/styles/mixins/customMixins.scss       | 2 +-
 src/ux-components/text-link/text-link.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 33649319f..e5f0caa86 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -16,4 +16,4 @@
     @include media-breakpoint-up(md) {
         font-size: $md-font-size;
     }
-}
\ No newline at end of file
+}
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 7c19d7911..9283c08e7 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -80,7 +80,7 @@ a {
     }
     &.navigation-link,
     &.new-window-link {
-        font-size: .875rem;
+        font-size: 0.875rem;
         color: $black;
         line-height: 26px;
         white-space: nowrap;