From bec8b3d87320c5a78152901aa924b6602f1bdbd8 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Thu, 10 Jul 2025 15:45:05 -0400
Subject: [PATCH] CASH-845 UI updates, content and CSS

---
 .../date-picker/date-picker.vue               | 22 ++++++++++++++-----
 src/layouts/schedule/schedule.vue             |  2 --
 .../time-slot-question/time-slot-question.vue |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index d822ae899..164010f5d 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -2,12 +2,16 @@
     <div
         class="date-picker text-center"
         :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
-        <textBlock
-            v-show="durationTextBlockCopy"
-            :customText="durationTextBlockCopy"
-            justifyText="center"
-            typeStyle="small"
-            class="duration-text-block" />
+        <div class="date-picker-header">
+            <funnelSubHeader cmsWidgetName="DatePickerSubHeaderWidget" class="mt-5" />
+            <textBlock
+                v-show="durationTextBlockCopy"
+                :customText="durationTextBlockCopy"
+                justifyText="center"
+                typeStyle="small"
+                marginTopSizeOverride="0"
+                class="duration-text-block" />
+        </div>
 
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
@@ -164,6 +168,7 @@
 <script>
 import timeSlotQuestion from "@/layouts/schedule/time-slot-question/time-slot-question.vue";
 import textBlock from "@/digital-components/text-block/text-block";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 
 // Supporting files
 import loader from "@/ux-components/loader/loader";
@@ -977,6 +982,7 @@ export default {
         ErrorMessage,
         timeSlotQuestion,
         textBlock,
+        funnelSubHeader,
     },
 };
 </script>
@@ -992,6 +998,10 @@ export default {
     display: flex;
     flex-direction: column;
 
+    .date-picker-header {
+        margin-bottom: 1.5rem;
+    }
+
     fieldset {
         flex-grow: 1;
         position: relative;
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index a11ba4720..8c37c7487 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -129,7 +129,6 @@
             <div class="row justify-content-center date-picker-wrapper">
                 <div class="col-md-6 col-xl-4">
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-
                     <datePicker
                         v-show="appointmentType"
                         customComponentId="dateQuestion"
@@ -863,7 +862,6 @@ export default {
         appointmentTypeStrings() {
             return AppointmentTypeStrings;
         },
-
         ChangeShopLinkText() {
             return this.getCmsContent("ChangeShopLink", "Text");
         },
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 9f3ab455a..290651668 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -32,6 +32,7 @@
             groupName="chooseTimeSlot"
             textPosition="text-center"
             v-model="selectedAnswerForTimeSlots"
+            questionText="Available times:"
             isRequired
             validationRules="time-slot-required" />
         <div
@@ -578,7 +579,6 @@ export default {
 
 <style lang="scss">
 .time-slots-question {
-    border-top: 1px solid $gray-500;
     margin-top: 1.5rem;
 
     .time-slot-header {