From 425055fd36c179a46e0892236625129a9823c9af Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Sun, 8 Aug 2021 17:29:45 +0200
Subject: [PATCH] minor styling to booking page

---
 components/booking/AvailableTimes.tsx |  2 +-
 components/booking/DatePicker.tsx     | 13 ++++++++-----
 styles/globals.css                    | 10 ++++++++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx
index 259eee100d..4f7a5fd4ad 100644
--- a/components/booking/AvailableTimes.tsx
+++ b/components/booking/AvailableTimes.tsx
@@ -39,7 +39,7 @@ const AvailableTimes = ({
                 `/${user.username}/book?date=${slot.utc().format()}&type=${eventTypeId}` +
                 (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")
               }>
-              <a className="block font-medium mb-4 bg-white dark:bg-neutral-900 text-primary-500 dark:text-neutral-200 border border-primary-500 dark:border-black rounded hover:text-white hover:bg-primary-500 dark:hover:border-black py-4 dark:hover:bg-black">
+              <a className="block font-medium mb-4 bg-white dark:bg-neutral-900 text-primary-500 dark:text-neutral-200 border border-primary-500 dark:border-black rounded-sm hover:text-white hover:bg-primary-500 dark:hover:border-black py-4 dark:hover:bg-black">
                 {slot.format(timeFormat)}
               </a>
             </Link>
diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index 28c1fa5600..8fa66ac4b0 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -171,20 +171,23 @@ const DatePicker = ({
       }>
       <div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
         <span className="w-1/2 text-gray-600 dark:text-white">
-          {dayjs().month(selectedMonth).format("MMMM YYYY")}
+          <strong className="text-gray-900 dark:text-white">
+            {dayjs().month(selectedMonth).format("MMMM")}
+          </strong>
+          <span className="text-gray-500"> {dayjs().month(selectedMonth).format("YYYY")}</span>
         </span>
         <div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
           <button
             onClick={decrementMonth}
             className={
-              "mr-4 " +
+              "group mr-2 p-1" +
               (selectedMonth <= dayjs().tz(inviteeTimeZone).month() && "text-gray-400 dark:text-gray-600")
             }
             disabled={selectedMonth <= dayjs().tz(inviteeTimeZone).month()}>
-            <ChevronLeftIcon className="w-5 h-5" />
+            <ChevronLeftIcon className="group-hover:text-black dark:group-hover:text-white w-5 h-5" />
           </button>
-          <button onClick={incrementMonth}>
-            <ChevronRightIcon className="w-5 h-5" />
+          <button className="group p-1" onClick={incrementMonth}>
+            <ChevronRightIcon className="group-hover:text-black dark:group-hover:text-white w-5 h-5" />
           </button>
         </div>
       </div>
diff --git a/styles/globals.css b/styles/globals.css
index 2fbe03bfca..316a2d8e59 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,6 +81,16 @@
     }
 }
 
+::-moz-selection { 
+  color: white;
+  background: black;
+}
+
+::selection {
+  color: white;
+  background: black;
+}
+
 /* add padding bottom to bottom nav on standalone mode */
 @media all and (display-mode: standalone) {
   .bottom-nav {