Merge pull request #2268 from Safelite/feature/CASH-177

Feature/CASH-177 - structure and CSS updates due to modal markup changes

src/digital-components/modal/modal.vue

@@ -29,9 +29,10 @@
                     <slot></slot>
                 </div>
                 <div class="modal-footer">
+                    <slot name="modal-footer-slot"></slot>
                     <modalButtonMain
                         isPrimary
-                        class="w-100"
+                        class="w-100 modal-footer-button"
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
                         loaderColor="white"
@@ -258,56 +259,7 @@ export default {
         }
     }
 }
-.save-progress-modal-question {
-    p.modal-body {
-        padding: 0;
-    }
-    .modal-body {
-        display: flex;
-        flex-direction: column;
 
-        .textbox-question {
-            padding: 0;
-
-            margin: 0 0 1.5rem 0;
-        }
-    }
-}
-
-.save-progress-modal-question,
-.save-progress-popup-question {
-    p.modal-body {
-        padding: 0;
-    }
-    .modal-body {
-        display: flex;
-        flex-direction: column;
-
-        .textbox-question {
-            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;
-        a {
-            text-decoration: none;
-        }
-    }
-    .modal-footer {
-        margin: 0 0 1.5rem 0;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-}
 body {
     .modal-backdrop {
         height: 100%;

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>

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
+            <template v-slot:modal-footer-slot>
-                ref="skipButton"
+                <buttonMain
-                type="button"
+                    ref="skipButton"
-                :buttonText="buttonText"
+                    type="button"
-                loaderColor="white"
+                    :buttonText="buttonText"
-                :suppressLoader="true"
+                    loaderColor="white"
-                class="skip-button"
+                    :suppressLoader="true"
-                @click-event="closeModal" />
+                    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 {
+    .modal.modal-component .modal-dialog .modal-content {
-        order: 3;
+        p.modal-body {
-        padding: 0;
+            padding: 0;
-    }
+        }
-    .modal-disclaimer {
+        .modal-body {
-        order: 4;
+            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,
+        .modal-footer-button,
-        .save-progress-popup-question {
+        .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>