From 085cd21da6a202aa252da4712aab0dd2cecbd4a9 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Mon, 25 Aug 2025 17:59:38 -0400
Subject: [PATCH 1/2] CASH-1340: update hop styling for focus button states

---
 public/css/hop-styling.css   | 6 +++---
 public/scss/hop-styling.scss | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index dde5f231b..ba441329c 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -153,13 +153,13 @@ body .buttonContainer button {
   }
 }
 body .buttonContainer button:focus {
-  box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+  box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
 }
 body .buttonContainer button:focus, body .buttonContainer button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+  box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
   color: #fff;
-  background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%);
+  background: #db0020;
 }
 body .buttonContainer button:disabled {
   background: #e3e4e4 !important;
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index f0eb05836..cfd2c9727 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -161,15 +161,15 @@ body {
                 cursor: pointer;
             }
             &:focus {
-                box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
             }
             &:focus, // Mouse, touch, stylus focus
             &:focus-visible {
                 // Keyboard focus for accessibility
                 outline: none;
-                box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
                 color: #fff;
-                background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+                background: #db0020;
             }
             &:disabled {
                 background: #e3e4e4 !important;

From 1be9b54e1077eafd542bc8809c8f789483ed6cd0 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 26 Aug 2025 12:01:31 -0400
Subject: [PATCH 2/2] Pull success alert outside of containing block.

---
 .../save-progress-modal-question.vue          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

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..67ba45ae6 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
@@ -1,18 +1,15 @@
 <template>
-    <div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
+    <div
+        class="save-progress-modal-question"
+        :class="isProgressSaved ? 'progress-saved' : ''"
+        v-if="!isProgressSaved">
         <buttonMain
             type="button"
-            v-if="!isProgressSaved"
             :buttonText="buttonText"
             loaderColor="white"
             :suppressLoader="true"
             class="open-save-progress-button"
             @click-event="openModal" />
-        <alert
-            class="my-4"
-            v-else
-            cmsWidgetName="SaveProgressModalAlertWidget"
-            alertClass="alert-success" />
         <modal
             :ref="modalName"
             :headerText="modalHeaderText"
@@ -30,6 +27,11 @@
             </template>
         </modal>
     </div>
+    <alert
+        class="my-4 save-your-progress-alert"
+        v-else
+        cmsWidgetName="SaveProgressModalAlertWidget"
+        alertClass="alert-success" />
 </template>
 
 <script>
@@ -239,7 +241,9 @@ export default {
             }
         }
     }
+}
 
+.save-your-progress-alert {
     .alert {
         border-radius: $border-radius-lg;
         border: 1px solid $green;
@@ -250,7 +254,6 @@ export default {
         font-weight: 600;
         font-size: 1rem;
         color: $black;
-        text-align: left;
         padding-left: 1.5rem;
         &::before {
             position: absolute;