From 5fae2e79a879cc1028c90118fc1a8ef4dfe34bf7 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 29 Apr 2025 10:35:26 -0400
Subject: [PATCH] CASH-464: more styling changes if drop off appointment

---
 src/digital-components/date-picker/date-picker.vue          | 6 ++++++
 .../schedule/time-slot-question/time-slot-question.vue      | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 13348f5fe..ac8514ea4 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1260,6 +1260,7 @@ export default {
         max-width: 100%;
         flex-wrap: wrap;
         gap: 0 0.5rem;
+        justify-content: center;
 
         & > div {
             flex: 0 0 calc(50% - 0.25rem);
@@ -1270,6 +1271,11 @@ export default {
             flex: 0 0 100%;
         }
     }
+    :deep(.button-question.is-drop-off-appointment) {
+        .button-inner-wrapper > div {
+            flex: 0 0 100%;
+        }
+    }
 }
 
 .btn-link {
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 36a94cf59..d28e82bb8 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -12,7 +12,7 @@
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
             class="mt-4"
-            :class="isMobileAppointment ? 'is-mobile-appointment' : ''"
+            :class="[isMobileAppointment ? 'is-mobile-appointment' : '', isDropOffAppointment ? 'is-drop-off-appointment' : '']"
             :answers="availableTimeSlots"
             groupName="chooseTimeSlot"
             textPosition="text-center"
@@ -357,6 +357,9 @@ export default {
         isMobileAppointment() {
             return this.appointmentType === AppointmentTypeStrings.MOBILE;
         },
+        isDropOffAppointment() {
+            return this.appointmentType === AppointmentTypeStrings.DROP_OFF;
+        },
     },
     methods: {
         async setSelectedTimeSlot() {