From 9443e3182510b4819605774fb24fbaf9ab81df93 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 31 Jan 2025 17:02:10 -0500
Subject: [PATCH] CASH-177: necessary structure and CSS updates due to modal
 markup changes made on SYP /quote popup question

---
 .../save-progress-popup-question.vue          | 96 ++++++++++++-------
 1 file changed, 63 insertions(+), 33 deletions(-)

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 808163fe6..5d98d5c4b 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
@@ -14,20 +14,22 @@
                 v-model="userInput"
                 cmsWidgetName="SaveProgressPopupQuestionWidget"
                 class="save-progress-popup-question" />
-            <buttonMain
-                ref="skipButton"
-                type="button"
-                :buttonText="buttonText"
-                loaderColor="white"
-                :suppressLoader="true"
-                class="skip-button"
-                @click-event="closeModal" />
+            <template v-slot:modal-footer-slot>
+                <buttonMain
+                    ref="skipButton"
+                    type="button"
+                    :buttonText="buttonText"
+                    loaderColor="white"
+                    :suppressLoader="true"
+                    class="skip-button"
+                    @click-event="closeModal" />
+                <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+            </template>
             <alert
                 class="my-4"
                 v-if="isProgressSaved"
                 cmsWidgetName="SaveProgressModalAlertWidget"
                 alertClass="alert-success" />
-            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
         </modal>
     </div>
 </template>
@@ -205,35 +207,63 @@ export default {
             left: 0;
         }
     }
-    .modal-footer {
-        order: 3;
-        padding: 0;
-    }
-    .modal-disclaimer {
-        order: 4;
+    .modal.modal-component .modal-dialog .modal-content {
+        p.modal-body {
+            padding: 0;
+        }
+        .modal-body {
+            display: flex;
+            flex-direction: column;
+            padding: 0 1.5rem;
+
+            .textbox-question {
+                padding: 0;
+                margin: 0 0 1.5rem 0;
+                
+                label {
+                    text-align: left;
+                    font-weight: 900;
+                }
+            }
+        }
+        .modal-body-inner {
+            text-align: center;
+            margin-bottom: 1.5rem;
+        }
+        .modal-footer {
+            padding: 0 1.5rem;
+            margin: 0 0 1.5rem 0;
+
+            button.btn {
+                order: 1;
+                margin-bottom: 1.5rem;
+            }
+            button.btn.skip-button {
+                padding: 0;
+                order: 2;
+                font-size: 1rem;
+            }
+            .modal-disclaimer {
+                font-size: 0.75rem;
+                text-align: left;
+                order: 3;
+                margin: 0;
+
+                a {
+                    text-decoration: none;
+                }
+            }
+        }
     }
 
     &.progress-saved {
-        .modal-footer,
-        .save-progress-popup-question {
+        .modal-footer-button,
+        .modal-disclaimer  {
             display: none;
         }
+        .skip-button {
+            margin-bottom: 0;
+        }
     }
 }
-.applied-promo {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 24px;
-    color: $green;
-
-    .promo-code {
-        text-transform: uppercase;
-    }
-}
-.alert {
-    color: $red;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 24px;
-}
 </style>