CASH-845 UI updates, content and CSS

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

@@ -2,12 +2,16 @@
     <div
         class="date-picker text-center"
         :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
-        <textBlock
+        <div class="date-picker-header">
-            v-show="durationTextBlockCopy"
+            <funnelSubHeader cmsWidgetName="DatePickerSubHeaderWidget" class="mt-5" />
-            :customText="durationTextBlockCopy"
+            <textBlock
-            justifyText="center"
+                v-show="durationTextBlockCopy"
-            typeStyle="small"
+                :customText="durationTextBlockCopy"
-            class="duration-text-block" />
+                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;

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");
         },

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 {