added darkmode classs to ¢[type] and /book

components/booking/AvailableTimes.tsx

@@ -10,7 +10,7 @@ const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeForm
   return (
     <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3  md:max-h-97 overflow-y-auto">
       <div className="text-gray-600 font-light text-xl mb-4 text-left">
-        <span className="w-1/2">{date.format("dddd DD MMMM YYYY")}</span>
+        <span className="w-1/2 dark:text-white text-gray-600">{date.format("dddd DD MMMM YYYY")}</span>
       </div>
       {slots.length > 0 &&
         slots.map((slot) => (

components/booking/DatePicker.tsx

@@ -93,7 +93,7 @@ const DatePicker = ({
             (selectedDate && selectedDate.isSame(inviteeDate.date(day), "day")
               ? " bg-blue-600 text-white-important"
               : !isDisabled(day)
-              ? " bg-blue-50"
+              ? " bg-blue-50 dark:bg-gray-900 dark:bg-opacity-30"
               : "")
           }>
           {day}
@@ -103,9 +103,15 @@ const DatePicker = ({
   }, [selectedMonth, inviteeTimeZone, selectedDate]);
 
   return selectedMonth ? (
-    <div className={"mt-8 sm:mt-0 " + (selectedDate ? "sm:w-1/3 border-r sm:px-4" : "sm:w-1/2 sm:pl-4")}>
+    <div
+      className={
+        "mt-8 sm:mt-0 " +
+        (selectedDate ? "sm:w-1/3 sm:border-r sm:dark:border-gray-900 sm:px-4" : "sm:w-1/2 sm:pl-4")
+      }>
       <div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
-        <span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
+        <span className="w-1/2 text-gray-600 dark:text-white">
+          {dayjs().month(selectedMonth).format("MMMM YYYY")}
+        </span>
         <div className="w-1/2 text-right">
           <button
             onClick={decrementMonth}

components/booking/TimeOptions.tsx

@@ -28,19 +28,19 @@ const TimeOptions = (props) => {
 
   return (
     selectedTimeZone !== "" && (
-      <div className="w-full rounded shadow border bg-white px-4 py-2">
+      <div className="w-full rounded shadow border dark:bg-gray-700 dark:border-0 bg-white px-4 py-2">
         <div className="flex mb-4">
-          <div className="w-1/2 font-medium">Time Options</div>
+          <div className="w-1/2 dark:text-white text-gray-600 font-medium">Time Options</div>
           <div className="w-1/2">
             <Switch.Group as="div" className="flex items-center justify-end">
               <Switch.Label as="span" className="mr-3">
-                <span className="text-sm text-gray-500">am/pm</span>
+                <span className="text-sm dark:text-white text-gray-500">am/pm</span>
               </Switch.Label>
               <Switch
                 checked={is24hClock}
                 onChange={setIs24hClock}
                 className={classNames(
-                  is24hClock ? "bg-blue-600" : "bg-gray-200",
+                  is24hClock ? "bg-blue-600" : "dark:bg-gray-600 bg-gray-200",
                   "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                 )}>
                 <span className="sr-only">Use setting</span>
@@ -53,7 +53,7 @@ const TimeOptions = (props) => {
                 />
               </Switch>
               <Switch.Label as="span" className="ml-3">
-                <span className="text-sm text-gray-500">24h</span>
+                <span className="text-sm dark:text-white text-gray-500">24h</span>
               </Switch.Label>
             </Switch.Group>
           </div>

components/ui/PoweredByCalendso.tsx

@@ -3,14 +3,20 @@ import Link from "next/link";
 const PoweredByCalendso = () => (
   <div className="text-xs text-center sm:text-right pt-1">
     <Link href="https://calendso.com">
-      <a style={{ color: "#104D86" }} className="opacity-50 hover:opacity-100">
+      <a className="dark:text-white text-gray-500 opacity-50 hover:opacity-100">
         powered by{" "}
         <img
           style={{ top: -2 }}
-          className="w-auto inline h-3 relative"
+          className="dark:hidden w-auto inline h-3 relative"
           src="/calendso-logo-word.svg"
           alt="Calendso Logo"
         />
+        <img
+          style={{ top: -2 }}
+          className="hidden dark:inline w-auto h-3 relative"
+          src="/calendso-logo-word-dark.svg"
+          alt="Calendso Logo"
+        />
       </a>
     </Link>
   </div>