From 6d8e1dfd47fb1ad0ac432f45c4c3be0343f20b09 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 13 Jan 2025 13:35:20 -0500
Subject: [PATCH] CASH-79-bm Styles and modal update for order of items.

---
 src/digital-components/modal/modal.vue        | 45 ++++++++++++-----
 .../save-progress-modal-question.vue          | 49 +++++++++++++++++++
 2 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index f61238c2a..e412678ff 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -25,17 +25,17 @@
                 </div>
                 <div class="modal-body ps-5 pe-5 pb-4 pt-1">
                     <slot></slot>
-                </div>
-                <div class="modal-footer px-5 py-4">
-                    <modalButtonMain
-                        isPrimary
-                        class="w-100"
-                        id="modalbtn"
-                        ref="modalButtonMain"
-                        loaderColor="white"
-                        :buttonText="footerButtonText"
-                        @click-event="validateAndEmit"
-                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                    <div class="modal-footer px-5 py-4">
+                        <modalButtonMain
+                            isPrimary
+                            class="w-100"
+                            id="modalbtn"
+                            ref="modalButtonMain"
+                            loaderColor="white"
+                            :buttonText="footerButtonText"
+                            @click-event="validateAndEmit"
+                            :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -234,6 +234,29 @@ export default {
         }
     }
 }
+.save-progress-modal-question {
+    p.modal-body {
+        padding: 0;
+    }
+    .modal-body {
+        display: flex;
+        flex-direction: column;
+        .textbox-question {
+            padding: .25rem 0;
+            label {
+                text-align: left;
+                font-weight: 600;
+            }
+        }
+    }
+    .modal-disclaimer {
+        font-size: .75rem;
+        order: 2;
+    }
+    .modal-footer {
+        padding: 1.5rem 0;
+    }
+}
 body {
     .modal-backdrop {
         height: 100%;
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 6d0472541..609668de9 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
@@ -102,6 +102,55 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.save-progress-modal-question {
+    .btn-secondary {
+        position: relative;
+        background: $blue-100;
+        border: 1px solid transparent;
+        border-radius: $border-radius-lg;
+        color: $blue;
+        font-weight: 500;
+        font-size: .875rem;
+        transition: all 150ms linear;
+        height: 3.5rem;
+        width: 100%;
+        text-decoration: underline;
+        text-underline-offset: .5rem;
+        &:hover {
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+            color: $white;
+        }
+        &:focus, // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow:
+                0 0 0 3px $white,
+                0 0 0 5.5px $blue-700;
+            color: $white;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $blue;
+            background-color: $blue;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+}
 .applied-promo {
     font-size: 0.875rem;
     font-weight: 500;