From 5098719644fdd0876dd790a70f33723ecc6cb851 Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Wed, 3 Sep 2025 13:12:07 -0400
Subject: [PATCH] CASH-1477: Modal cta button color/type

---
 src/digital-components/modal/modal.vue         |  3 ++-
 .../modal-button-main/modal-button-main.vue    | 18 +++++++++++-------
 .../save-progress-modal-question.vue           |  1 +
 .../save-progress-popup-question.vue           |  1 +
 src/styles/ux-variables.scss                   |  4 ++--
 src/ux-components/button-main/button-main.vue  | 14 +++++++-------
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index f0d546782..89d428363 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -32,7 +32,7 @@
                 <div class="modal-footer">
                     <slot name="modal-footer-slot"></slot>
                     <modalButtonMain
-                        isPrimary
+                        :isPrimary="isFooterButtonPrimary"
                         class="w-100 modal-footer-button"
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
@@ -65,6 +65,7 @@ export default {
         suppressPageScroll: Boolean,
         staticBackdrop: Boolean,
         footerButtonDisabled: Boolean,
+        isFooterButtonPrimary: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
diff --git a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
index e05ff408a..c12dfe498 100644
--- a/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
+++ b/src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue
@@ -115,14 +115,16 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
-        &:hover {
+        &:hover,
+        &:active {
             color: $white;
-            @include blue-gradient;
+            background: $blue;
+            border: none;
         }
         &:focus, // Mouse, touch, stylus focus
         &:focus-visible {
@@ -130,16 +132,18 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
-            color: $white;
-            @include blue-gradient;
+                0 0 0 5.5px $blue;
+            color: $blue;
+            &:active {
+                color: $white;
+            }
         }
         &:disabled {
             background: transparent;
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            border: 1px solid $blue;
             cursor: pointer;
             pointer-events: all;
         }
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 21bcbdc40..df25373f0 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
@@ -19,6 +19,7 @@
             suppressPageScroll
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
+            :isFooterButtonPrimary="true"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner" v-html="modalBodyText"></p>
             <saveProgressQuestion
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 d85afb56e..0e1b07b8e 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
@@ -6,6 +6,7 @@
             suppressPageScroll
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
+            :isFooterButtonPrimary="true"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner">{{ modalBodyText }}</p>
             <saveProgressQuestion
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index c0a69a112..bec02081f 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -123,8 +123,8 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+$font-family-monospace:
+    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index d83758482..f5db583bb 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -63,9 +63,6 @@ export default {
 
 <style lang="scss">
 .btn {
-    &:first-child:active {
-        background-color: $red;
-    }
     &.btn-primary {
         position: relative;
         background: $red;
@@ -117,8 +114,8 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
-        color: $red;
+        border: 1px solid $blue;
+        color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
@@ -131,8 +128,11 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
-            color: $white;
+                0 0 0 5.5px $blue;
+            color: $blue;
+            &:hover {
+                color: $white;
+            }
         }
         &:disabled {
             background: transparent;