From 1dc6ae1d26cf59ba1756181ea1eb8d0c483d6741 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Thu, 12 Aug 2021 16:29:48 +0200
Subject: [PATCH] added border to date picker days on mobile

---
 components/booking/DatePicker.tsx  | 10 +++++-----
 components/booking/TimeOptions.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index 39175a94..a9b7bf3e 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -166,9 +166,9 @@ const DatePicker = ({
   return selectedMonth ? (
     <div
       className={
-        "mt-8 sm:mt-0 sm:min-w-[430px]" +
+        "mt-8 sm:mt-0 sm:min-w-[460px]" +
         (selectedDate
-          ? "w-full sm:min-w-[455px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-4"
+          ? "w-full sm:min-w-[465px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-4"
           : "sm:w-1/2 sm:pl-4")
       }>
       <div className="flex text-gray-600 font-light text-xl mb-4">
@@ -193,16 +193,16 @@ const DatePicker = ({
           </button>
         </div>
       </div>
-      <div className="grid grid-cols-7 gap-2 sm:gap-1 text-center">
+      <div className="grid grid-cols-7 gap-4 text-center border-b border-t sm:border-0">
         {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
           .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
           .map((weekDay) => (
-            <div key={weekDay} className="uppercase text-gray-500 text-xs tracking-widest my-2">
+            <div key={weekDay} className="uppercase text-gray-500 text-xs tracking-widest my-4">
               {weekDay}
             </div>
           ))}
-        {calendar}
       </div>
+      <div className="grid grid-cols-7 gap-y-2 gap-x-4 text-center">{calendar}</div>
     </div>
   ) : null;
 };
diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx
index 9e51b6ae..4e29bbf1 100644
--- a/components/booking/TimeOptions.tsx
+++ b/components/booking/TimeOptions.tsx
@@ -25,7 +25,7 @@ const TimeOptions = (props) => {
 
   return (
     selectedTimeZone !== "" && (
-      <div className="absolute w-full max-w-80 rounded-sm border border-gray-200 dark:bg-gray-700 dark:border-0 bg-white px-4 py-2">
+      <div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 dark:bg-gray-700 dark:border-0 bg-white px-4 py-2">
         <div className="flex mb-4">
           <div className="w-1/2 dark:text-white text-gray-600 font-medium">Time Options</div>
           <div className="w-1/2">