CASH-177: necessary structure and CSS updates due to modal markup changes made on SYP modal question

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -1,13 +1,12 @@
 <template>
     <div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
         <buttonMain
-            ref="buttonMain"
             type="button"
             v-if="!isProgressSaved"
             :buttonText="buttonText"
             loaderColor="white"
             :suppressLoader="true"
-            class="save-progress-button"
+            class="open-save-progress-button"
             @click-event="openModal" />
         <alert
             class="my-4"
@@ -21,12 +20,14 @@
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">
-            <p class="modal-body-inner">{{ modalBodyText }}</p>
+            <p class="modal-body-inner" v-html="modalBodyText"></p>
             <saveProgressQuestion
                 ref="saveProgressQuestion"
                 v-model="userInput"
                 cmsWidgetName="SaveProgressQuestionWidget" />
-            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+            <template v-slot:modal-footer-slot>
+                <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+            </template>
         </modal>
     </div>
 </template>
@@ -112,7 +113,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .save-progress-modal-question {
     margin-bottom: 1.5rem;
     order: 2;
@@ -128,7 +129,7 @@ export default {
         background: none;
     }
 
-    .save-progress-button {
+    .open-save-progress-button {
         order: 4;
         position: relative;
         color: $blue;
@@ -160,12 +161,57 @@ export default {
             transition: background 0s 0s ease-in-out;
         }
     }
-    :deep(.alert) {
+    .modal.modal-component .modal-dialog .modal-content {
+        .modal-header {
+            padding-top: 0;
+            margin-top: 1.875rem;
+        }
+        .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-disclaimer {
+            font-size: 0.75rem;
+            order: 2;
+            text-align: left;
+            margin: 0;
+
+            a {
+                text-decoration: none;
+            }
+        }
+        .modal-footer {
+            margin: 0 0 1.5rem 0;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            button.btn {
+                margin-bottom: 1.5rem;
+            }
+        }
+    }
+    
+    .alert {
         border-radius: $border-radius-lg;
         border: 1px solid $green;
         margin-top: 0;
     }
-    :deep(.alert-heading) {
+    .alert-heading {
         position: relative;
         font-weight: 600;
         font-size: 1rem;
@@ -183,20 +229,4 @@ export default {
         }
     }
 }
-.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>