UI parity

src/layouts/schedule-page/recal-ack-modal/recal-ack-modal.vue

@@ -9,18 +9,18 @@
             :displayCloseButton="false"
             :displayCloseLink="true">
             <div class="form-test-invalid">
-                <h5>{{ modalHeadline }}</h5>
+                <h5 class="modal-headline">{{ modalHeadline }}</h5>
                 <div>
                     <div
-                        class="mb-4"
+                        class="mb-4 modal-body-text"
                         v-html="modalBodyText"></div>
                     <recalAckToggle
-                        class="mb-5"
+                        class="mb-3"
                         cmsWidgetName="RecalAckModalToggle" />
                     <checkBox
                         ref="recalAcknowledgement"
                         v-model="isAcknowledged"
-                        class="mb-2 mt-4"
+                        class="mb-4 mt-4 acknowledgement-checkbox"
                         :class="showAcknowledgementError && ' has-error'"
                         :validationRules="rules.optionRequired"
                         checkboxName="recalAcknowledgement"
@@ -112,6 +112,40 @@ export default {
     },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
-
+.modal-headline {
+    font-size: 1.625rem;
+    font-weight: 300;
+}
+.modal-body-text {
+    color: #4d4e53;
+    :deep(strong) {
+        font-weight: 600;
+    }
+}
+.acknowledgement-checkbox {
+    :deep(p) {
+        font-size: 1rem;
+        color: #4d4e53;
+    }
+    :deep(.form-check-input) {
+        &:checked + label p {
+            font-size: 1rem;
+            color: #4d4e53;
+            font-weight: 500;
+        }
+    }
+}
+:deep(.modal) {
+    .modal-footer {
+        button {
+            background-color: $green;
+            color: $white;
+            font-weight: $font-weight-bold;
+            &:hover {
+                background-color: $green;
+            }
+        }
+    }
+}
 </style>

src/layouts/schedule-page/recal-ack-modal/recal-ack-toggle/recal-ack-toggle.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="recal-ack-toggle mt-2 mb-3">
+    <div class="recal-ack-toggle">
       <textLink
         id="moreDetails"
         class="d-inline-block"
@@ -64,8 +64,9 @@ export default {
       &::after {
         content: "";
         transition: all 0.5s ease;
+        background-image: url($svg-tpa-recal-modal-toggle);
         background-repeat: no-repeat;
-        margin-left: 0.5rem;
+        margin-left: 1rem;
         width: 16px;
         height: 9px;
         display: inline-block;
@@ -100,6 +101,7 @@ export default {
     p {
       font-size: 1rem;
       margin-bottom: 0;
+      color: #4d4e53;
     }
     ol {
       margin-top: 0.5rem;

src/layouts/schedule-page/schedule-page.vue

@@ -46,19 +46,6 @@
                             :customSelectableDatesCallback="getAvailableDatesMethod"
                             @dateSelected="dateSelectedFromPicker"
                             @timeSlotSelected="timeSlotSelectedFromPicker" />
-                        <!-- <modal
-                            ref="recalAckModal"
-                            class="recal-ack-modal"
-                            :headerText="recalModalContent.headerText"
-                            :footerButtonText="recalModalContent.footerButtonText"
-                            @footerButtonEvent="closeRecalModal">
-                            <div class="recal-ack-modal-subheader">
-                                {{ recalModalContent.subHeaderText }}
-                            </div>
-                            <div
-                                class="recal-ack-modal-body"
-                                v-html="recalModalContent.bodyText"></div>
-                        </modal> -->
                     </div>
                 </div>
                 <div class="site-footer-container iss-heritage-content-container-width">
@@ -998,7 +985,6 @@ export default {
             this.mainStore.saveIsRecalAcknowledgedForScheduling(this.isRecalAcknowledged);
         },
         getIsRecalAcknowledgedForScheduling() {
-            console.log(this.mainStore.order.isRecalAcknowledgedForScheduling, 'isRecalAcknowledgedForScheduling from store');
             return this.mainStore.order.isRecalAcknowledgedForScheduling;
         },
     }