From 5500ced694bc64dea5dc19fead61efde3f9f4d6a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 24 Apr 2025 11:17:50 -0400
Subject: [PATCH] CASH-464: final styling changes

---
 .../button-question/button-question.vue       |  2 +-
 .../date-picker/date-picker.vue               | 59 ++++++++++++++-----
 src/layouts/schedule/schedule.vue             | 59 ++++++++++++-------
 .../time-slot-question/time-slot-question.vue | 47 +++++++--------
 4 files changed, 103 insertions(+), 64 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 53f71eb9b..36f036379 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -31,7 +31,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                             : "Select an option below."
                     }}
                 </legend>
-                <div :class="getComponentLoopWrapperClasses">
+                <div :class="getComponentLoopWrapperClasses" class="button-inner-wrapper">
                     <div
                         :class="getComponentWrapperClasses"
                         v-for="answer in buttonsInfo"
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 09fe68970..64ec67c1c 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -13,7 +13,7 @@
                     hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
                     month.monthClass,
                 ]">
-                <div class="month-year body-small d-flex align-items-center small">
+                <div class="month-year body-small d-flex align-items-center">
                     {{ month.monthLabel }} {{ month.yearNum?.toString() }}
                 </div>
                 <div
@@ -22,36 +22,35 @@
                     <span class="legend-circle me-1"></span>
                     &equals; Available
                 </div>
-                <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
                 <div class="grid-item caption">
                     <span class="sr-only">Sunday</span>
-                    S
+                    SUN
                 </div>
                 <div class="grid-item caption">
                     <span class="sr-only">Monday</span>
-                    M
+                    MON
                 </div>
                 <div class="grid-item caption">
                     <span class="sr-only">Tuesday</span>
-                    T
+                    TUE
                 </div>
                 <div class="grid-item caption">
                     <span class="sr-only">Wednesday</span>
-                    W
+                    WED
                 </div>
                 <div class="grid-item caption">
                     <span class="sr-only">Thursday</span>
-                    T
+                    THU
                 </div>
                 <div class="grid-item caption">
                     <span class="sr-only">Friday</span>
-                    F
+                    FRI
                 </div>
                 <div class="grid-item caption">
                     <span class="sr-only">Saturday</span>
-                    S
+                    SAT
                 </div>
                 <div
                     v-for="date in month.dates"
@@ -93,7 +92,7 @@
             <button
                 v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
                 type="button"
-                class="btn btn-link"
+                class="btn btn-link view-more-dates"
                 id="viewMoreDates"
                 :disabled="isLoading"
                 @click="showAnotherMonth">
@@ -112,11 +111,11 @@
                 overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
                 :selectedDate="selectedDate"
                 :appointmentType="appointmentType"
-                :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                :premiumAppointmentFee="premiumAppointmentFee"
                 :displayWaitList="displayWaitList"
                 :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
-                :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
+                :estimatedServiceMinutesMinimum="estimatedServiceMinutesMinimum"
+                :estimatedServiceMinutesMaximum="estimatedServiceMinutesMaximum"
                 @waitListRequested="handleWaitListRequested"
                 @time-slot-modal-closed="timeSlotModalClosed" />
         </fieldset>
@@ -198,6 +197,11 @@ export default {
         pricingByDayUpcharge: Number,
         isPricingByDayExperiment: Boolean,
         timeSlotsForSelectedDate: Object,
+        appointmentType: String,
+        premiumAppointmentFee: Object,
+        estimatedServiceMinutesMinimum: Number,
+        estimatedServiceMinutesMaximum: Number,
+        displayWaitList: Boolean,
     },
     setup(props) {
         const uuid = uuidv4();
@@ -792,6 +796,9 @@ export default {
         getSupportingItems() {
             return store.getters.lineItems.supportingItems;
         },
+        handleWaitListRequested(value) {
+            this.$emit("waitListRequested", value);
+        },
     },
     watch: {
         modelValue(newValue) {
@@ -831,6 +838,10 @@ export default {
     fieldset {
         flex-grow: 1;
         position: relative;
+
+        .view-more-dates {
+            color: $blue;
+        }
     }
     .loader {
         height: 2rem;
@@ -858,9 +869,13 @@ export default {
         .grid-item {
             text-align: center;
             margin: 10px 3px;
-            font-size: 0.875rem;
+            font-size: 0.75rem;
             line-height: 1.5;
 
+            &.caption {
+                color: $gray-550;
+            }
+
             &.first-day-,
             &.first-day-0 {
                 grid-column-start: 1;
@@ -893,9 +908,11 @@ export default {
 
         .month-year {
             grid-area: 1 / 1 / 2 / 5;
-            text-transform: uppercase;
-            font-weight: 300;
+            font-family: AvertaBold;
             letter-spacing: 0.75px;
+            color: $black;
+            justify-content: center;
+            margin-bottom: 0.5rem;
         }
         .legend {
             grid-area: 1 / 5 / 2 / 8;
@@ -1241,6 +1258,16 @@ export default {
             }
         }
     }
+    :deep(.button-inner-wrapper) {
+        display: flex;
+        max-width: 100%;
+        flex-wrap: wrap;
+        gap: 0 0.5rem;
+
+        & > div {
+            flex: 0 0 calc(50% - 0.25rem);
+        }
+    }
 }
 
 .btn-link {
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index de55c14ee..4a5a91324 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles page-schedule">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -14,7 +14,7 @@
                         <textBlock
                             cmsWidgetName="ChangeShopLink"
                             justifyText="center"
-                            class="mb-3 text-link-small"
+                            class="mb-5 text-link-small change-location"
                             marginTopSizeOverride="1" />
                     </template>
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
@@ -26,13 +26,23 @@
                         class="text-link-small"
                         :customSelectableDatesCallback="getAvailableDatesMethod"
                         validationRules="date-required"
+                        @date-clicked="handleDateClicked"
                         :pricingByDayBasePrice="pricingByDayBasePrice"
                         :pricingByDayUpcharge="pricingByDayUpcharge"
                         :showPricingByDay="showPricingByDay"
                         :isPricingByDayExperiment="isPricingByDayExperiment"
                         :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                        :appointmentType="appointmentType"
+                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                        :estimatedServiceMinutesMinimum="
+                            selectableDatesData.estimatedServiceMinutesMinimum
+                        "
+                        :estimatedServiceMinutesMaximum="
+                            selectableDatesData.estimatedServiceMinutesMaximum
+                        "
                         @TimeSlotSelected="updateTimeSlot"
-                        @date-clicked="handleDateClicked" />
+                        :displayWaitList="displayWaitList"
+                        @waitListRequested="handleWaitListRequested" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -717,27 +727,32 @@ export default {
 </script>
 
 <style lang="scss">
-.text-link-small {
-    a,
-    .btn-link {
-        width: auto;
-        margin: 0 auto;
-        height: auto;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        padding: 0;
-        border-radius: 0;
-        &:focus {
-            outline: 1px solid $blue;
-        }
-        @include media-breakpoint-up(md) {
-            font-size: 1rem;
+.page-schedule {
+    .text-link-small {
+        a,
+        .btn-link {
+            width: auto;
+            margin: 0 auto;
+            height: auto;
+            font-size: 0.875rem;
+            line-height: 1.75;
+            padding: 0;
+            border-radius: 0;
+            &:focus {
+                outline: 1px solid $blue;
+            }
+            @include media-breakpoint-up(md) {
+                font-size: 1rem;
+            }
         }
     }
-}
-.funnel-sub-header {
-    h5.dark-header {
-        margin-bottom: 0.25rem;
+    .funnel-sub-header {
+        h5.dark-header {
+            margin-bottom: 0.25rem;
+        }
+    }
+    .change-location a {
+        font-family: AvertaSemibold;
     }
 }
 </style>
diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue
index 309080eea..cbfb6e4db 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -1,5 +1,6 @@
 <template>
-    <div class="time-slots-modal">
+    <div class="time-slots-question">
+        <textBlock customText="Select a time:" justifyText="center" class="time-slot-header" />
         <textBlock
             v-show="durationTextBlockCopy"
             :customText="durationTextBlockCopy"
@@ -10,7 +11,7 @@
             ref="buttonQuestion"
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
-            class="mt-5"
+            class="mt-4"
             :answers="availableTimeSlots"
             groupName="chooseTimeSlot"
             textPosition="text-center"
@@ -20,8 +21,16 @@
         <div
             v-if="hasWaitListExperiment && displayWaitListFeature"
             class="mt-5 bg-light rounded waitlist">
-            <textBlock marginTopSizeOverride="0" />
-            <checkboxQuestion class="mt-3" v-model="waitListRequested" @click="waitListChecked" />
+            <textBlock
+                cmsWidgetName="WaitListLabelWidget"
+                typeStyle="medium"
+                fontWeight="600"
+                marginTopSizeOverride="0" />
+            <checkboxQuestion
+                class="mt-3"
+                cmsWidgetName="WaitListQuestionWidget"
+                v-model="waitListRequested"
+                @click="waitListChecked" />
         </div>
         <div
             v-if="waitListRequested"
@@ -88,7 +97,6 @@ defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "time-slot-no-modal-question",
-    // Removed 'modal' emits
     emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
     props: {
         modelValue: {
@@ -295,22 +303,9 @@ export default {
             }
         },
         isSameDay() {
-            console.log(
-                "%c                 TSQ - calculating isSameDay; this.selectedDate  ",
-                "color: beige;",
-                this.selectedDate
-            );
-            console.log(
-                "%c                 TSQ - calculating isSameDay; IS THIS WORKING OK?  ",
-                "color: beige;"
-            );
-            debugger; // eslint-disable-line no-debugger
-
             if (!this.timeSlotsForSelectedDate) {
                 return false;
             }
-
-            // const selectedDate = this.timeSlotsForSelectedDate.date;
             const todaysDate = new Date().toISOString().split("T")[0];
             return this.selectedDate === todaysDate;
         },
@@ -554,13 +549,16 @@ export default {
 </script>
 
 <style lang="scss">
-.time-slots-modal {
-    .modal-header {
-        padding-bottom: 0;
-        margin-bottom: 0 !important;
+.time-slots-question {
+    border-top: 1px solid $gray-500;
+    margin-top: 1.5rem;
+
+    .time-slot-header {
+        font-family: AvertaBold;
+        margin-top: 1.5rem;
     }
     .text-block.duration-text-block {
-        margin-top: 4px !important;
+        margin-top: 0;
     }
     .supplemental-information {
         line-height: 1.5rem;
@@ -577,8 +575,7 @@ export default {
         border-radius: 8px;
         font-size: 1rem;
         padding: 16px;
-        margin-top: 16px;
-        margin-bottom: -8px;
+
         .ui-checkbox {
             padding-left: 0px;
             input {