From 29ed44c68b022d5cabf682f0c7ff5bfb087e0331 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Jan 2025 16:52:39 -0500
Subject: [PATCH] CASH-122: fix bug with edge case of styling of skip button

---
 .../modal-button-main/modal-button-main.vue          |  2 +-
 .../save-progress-popup-question.vue                 | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

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 687ae6858..41f9d2d8a 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
@@ -128,7 +128,7 @@ export default {
             @include blue-gradient;
         }
         &:focus, // Mouse, touch, stylus focus
-    &:focus-visible {
+        &:focus-visible {
             // Keyboard focus for accessibility
             outline: none;
             box-shadow:
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 e23266a51..4ab1213c4 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
@@ -143,11 +143,12 @@ export default {
         }
     }
 
-    .skip-button {
+    .btn.btn-secondary.skip-button {
         order: 4;
         position: relative;
         color: $black;
         border: none;
+        border-radius: .25rem;
         font-weight: 900;
         font-size: 0.875rem;
         text-align: center;
@@ -164,12 +165,17 @@ export default {
 
         &:hover,
         &:active,
-        &:focus,
-        &:focus-visible {
+        &:focus {
             color: $blue-700;
             background: none;
             box-shadow: none;
         }
+        &:focus-visible {
+            outline: none;
+            box-shadow:
+                0 0 0 3px $white,
+                0 0 0 5.5px $blue-300;
+        }
 
         &.delay {
             // fixes flicker while transitioning between states