Merge branch 'feature/CASH-1182' of https://github.com/Safelite/DigitalConsumer.FixMyGlass into feature/CASH-1182

src/digital-components/date-picker/date-picker.vue

@@ -7,7 +7,6 @@
             <textBlock
                 v-show="durationTextBlockCopy"
                 :customText="durationTextBlockCopy"
-                justifyText="center"
                 typeStyle="small"
                 marginTopSizeOverride="0"
                 class="duration-text-block" />
@@ -1029,6 +1028,10 @@ export default {
     align-items: flex-start;
     text-align: left;
 
+    .duration-text-block {
+        text-align: left;
+    }
+
     .date-picker-header {
         margin-bottom: 1.5rem;
     }
@@ -1052,7 +1055,6 @@ export default {
     }
     .calendar-grid-container {
         margin: 0 auto 1rem auto;
-        max-width: 360px;
         position: relative;
         transition:
             height ease 2s,
@@ -1190,8 +1192,6 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                min-width: 2.5rem;
-                width: 2.5rem;
                 height: 2.5rem;
                 border: 2px solid transparent;
 
@@ -1229,14 +1229,8 @@ export default {
             &.selectable-day {
                 label {
                     background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
                     border-radius: 50%;
                     cursor: pointer;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
                     &:hover {
                         border: 2px solid $blue;
                     }
@@ -1415,18 +1409,13 @@ export default {
                 line-height: 1.2;
                 justify-content: center;
                 padding: 0.25rem;
+                margin: 0.15rem;
             }
             &.selectable-day {
                 label {
                     color: $black;
                     background-color: $blue-100;
-                    min-width: 2.75rem;
-                    width: 2.75rem;
                     border-radius: 0.25rem;
-                    @include media-breakpoint-up(md) {
-                        min-width: 3rem;
-                        width: 3rem;
-                    }
                 }
             }
             &.current-day {
@@ -1434,7 +1423,6 @@ export default {
                     font-weight: 600;
                     font-family: "UrbanistSemibold";
                     color: $black;
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
             }
         }
@@ -1445,7 +1433,6 @@ export default {
                     color: $black;
                     font-weight: 400;
                     font-family: "UrbanistSemibold";
-                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
 
                     &.price {
                         font-weight: 400;

src/digital-components/modal/modal.vue

@@ -9,7 +9,9 @@
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         @keypress.enter="onEnter"
-        aria-hidden="true">
+        aria-hidden="true"
+        @click.self="closeModal">
+        <!--Close modal when clicking other than close button-->
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header mb-0 mt-6">

src/layouts/quote/quote.vue

@@ -922,6 +922,37 @@ export default {
             width: -moz-available;
         }
     }
+    //Save email modal ONLY centered on screen for quote page only
+    .save-progress-popup-question {
+        :deep(.modal-component) {
+            .modal-dialog {
+                max-width: 767px;
+                margin: 0 auto;
+                @include media-breakpoint-up(md) {
+                    width: 50%;
+                    max-width: 600px;
+                    top: 0;
+                    right: 0;
+                    left: 0;
+                    transform: none;
+                }
+                .modal-content {
+                    @include media-breakpoint-up(md) {
+                        box-shadow: none;
+                        border-radius: 0;
+                        margin: auto;
+                        height: auto;
+                        border-radius: 0.5rem;
+                    }
+                }
+            }
+            .modal-footer {
+                button.btn.skip-button {
+                    margin: 0 auto;
+                }
+            }
+        }
+    }
 }
 .quote-page.show-save-progress-popup .row.justify-content-center {
     display: none;

src/layouts/schedule/schedule.vue

@@ -44,7 +44,7 @@
                         alertClass="alert-success" />
                 </div>
             </div>
-            <div class="row justify-content-left appointment-type">
+            <div class="row appointment-type">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader cmsWidgetName="ScheduleYourServiceWidget" class="mt-4" />
                     <appointmentTypeQuestion
@@ -83,9 +83,9 @@
                     modalWidgetName="ServiceZipModalWidget" />
             </div>
             <div
-                class="row justify-content-left your-shop-location"
+                class="row your-shop-location"
                 v-if="appointmentType && appointmentType !== appointmentTypeStrings.MOBILE">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <button-question
                         class="shop-question-button"
                         ref="buttonQuestion"
@@ -96,9 +96,8 @@
                         :questionText="questionText"
                         buttonTypeString="shopListButton"
                         :buttonTypeObject="shopListButton"
-                        groupName="chooseShop"
+                        groupName="chooseShop" />
-                        textPosition="text-start" />
+                    <div>
-                    <div class="text-center">
                         <textBlock
                             v-if="mobileFeeApplies && isMobileSelected"
                             :customText="mobileFeeText"
@@ -118,7 +117,7 @@
                     <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
                 </div>
             </div>
-            <div class="row justify-content-left date-picker-wrapper">
+            <div class="row date-picker-wrapper">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
                     <datePicker
@@ -1753,7 +1752,7 @@ export default {
 </script>
 
 <style lang="scss">
-.container-fluid {
+.container {
     &.page-schedule {
         padding: 0 1rem;
         .text-link-small {
@@ -1790,18 +1789,17 @@ export default {
             padding: 0 0.75rem;
         }
     }
+    .question-text > span {
+        display: flex;
+        justify-content: flex-start;
+    }
 }
 .shop-question-button .list-button-content {
     background: $blue-100;
     box-shadow: 0 0 0 1px $primary;
 }
-.schedule-header {
-    font-weight: 400;
-    font-size: 20px;
-    text-align: left;
-}
 
-.container .row .col-12 .alert-success .alert-heading{
+.container .row .col-12 .alert-success .alert-heading {
     color: $black;
     font-weight: 600;
 }