Merge pull request #346 from calendso/darkmode

added darkmode classes to [type] and /book and dashboard

components/booking/AvailableTimes.tsx

@@ -25,7 +25,7 @@ const AvailableTimes = ({
   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>

pages/[user]/[type].tsx

@@ -97,12 +97,17 @@ export default function Type(props): Type {
           "mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " +
           (selectedDate ? "max-w-6xl" : "max-w-3xl")
         }>
-        <div className="bg-white sm:shadow sm:rounded-lg">
+        <div className="dark:bg-gray-800 bg-white sm:shadow sm:rounded-lg">
           <div className="sm:flex px-4 py-5 sm:p-4">
-            <div className={"pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")}>
+            <div
+              className={
+                "pr-8 sm:border-r sm:dark:border-gray-900 " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
+              }>
               <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
-              <h2 className="font-medium text-gray-500">{props.user.name}</h2>
+              <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
-              <h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
+              <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
+                {props.eventType.title}
+              </h1>
               <p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
                 <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                 {props.eventType.length} minutes
@@ -120,7 +125,7 @@ export default function Type(props): Type {
                   onToggle24hClock={handleToggle24hClock}
                 />
               )}
-              <p className="text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
+              <p className="dark:text-gray-200 text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
             </div>
             <DatePicker
               weekStart={props.user.weekStart}

pages/[user]/book.tsx

@@ -148,12 +148,14 @@ export default function Book(props: any): JSX.Element {
       </Head>
 
       <main className="max-w-3xl mx-auto my-0 sm:my-24">
-        <div className="bg-white overflow-hidden sm:shadow sm:rounded-lg">
+        <div className="dark:bg-gray-800 bg-white overflow-hidden sm:shadow sm:rounded-lg">
-          <div className="sm:flex px-4 py-5 sm:p-6">
+          <div className="sm:flex px-4 py-5 sm:p-4">
-            <div className="sm:w-1/2 sm:border-r">
+            <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-900">
               <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
-              <h2 className="font-medium text-gray-500">{props.user.name}</h2>
+              <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
-              <h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
+              <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
+                {props.eventType.title}
+              </h1>
               <p className="text-gray-500 mb-2">
                 <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                 {props.eventType.length} minutes
@@ -171,12 +173,12 @@ export default function Book(props: any): JSX.Element {
                     .tz(preferredTimeZone)
                     .format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
               </p>
-              <p className="text-gray-600 mb-8">{props.eventType.description}</p>
+              <p className="dark:text-white text-gray-600 mb-8">{props.eventType.description}</p>
             </div>
             <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
               <form onSubmit={bookingHandler}>
                 <div className="mb-4">
-                  <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                  <label htmlFor="name" className="block text-sm font-medium dark:text-white text-gray-700">
                     Your name
                   </label>
                   <div className="mt-1">
@@ -185,14 +187,14 @@ export default function Book(props: any): JSX.Element {
                       name="name"
                       id="name"
                       required
-                      className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                      className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                       placeholder="John Doe"
                       defaultValue={props.booking ? props.booking.attendees[0].name : ""}
                     />
                   </div>
                 </div>
                 <div className="mb-4">
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                  <label htmlFor="email" className="block text-sm font-medium dark:text-white text-gray-700">
                     Email address
                   </label>
                   <div className="mt-1">
@@ -201,7 +203,7 @@ export default function Book(props: any): JSX.Element {
                       name="email"
                       id="email"
                       required
-                      className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                      className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                       placeholder="you@example.com"
                       defaultValue={props.booking ? props.booking.attendees[0].email : ""}
                     />
@@ -228,7 +230,9 @@ export default function Book(props: any): JSX.Element {
                 )}
                 {selectedLocation === LocationType.Phone && (
                   <div className="mb-4">
-                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
+                    <label
+                      htmlFor="phone"
+                      className="block text-sm font-medium dark:text-white text-gray-700">
                       Phone Number
                     </label>
                     <div className="mt-1">
@@ -237,7 +241,7 @@ export default function Book(props: any): JSX.Element {
                         placeholder="Enter phone number"
                         id="phone"
                         required
-                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                         onChange={() => {
                           /* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */
                         }}
@@ -263,7 +267,7 @@ export default function Book(props: any): JSX.Element {
                             id={"custom_" + input.id}
                             required={input.required}
                             rows={3}
-                            className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                            className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                             placeholder=""
                           />
                         )}
@@ -273,7 +277,7 @@ export default function Book(props: any): JSX.Element {
                             name={"custom_" + input.id}
                             id={"custom_" + input.id}
                             required={input.required}
-                            className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                            className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                             placeholder=""
                           />
                         )}
@@ -283,7 +287,7 @@ export default function Book(props: any): JSX.Element {
                             name={"custom_" + input.id}
                             id={"custom_" + input.id}
                             required={input.required}
-                            className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                            className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                             placeholder=""
                           />
                         )}
@@ -304,14 +308,16 @@ export default function Book(props: any): JSX.Element {
                       </div>
                     ))}
                 <div className="mb-4">
-                  <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">
+                  <label
+                    htmlFor="notes"
+                    className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
                     Additional notes
                   </label>
                   <textarea
                     name="notes"
                     id="notes"
                     rows={3}
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                    className="shadow-sm dark:bg-gray-700 dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                     placeholder="Please share anything that will help prepare for our meeting."
                     defaultValue={props.booking ? props.booking.description : ""}
                   />

pages/_document.tsx

@@ -0,0 +1,22 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body className="dark:bg-gray-900 bg-white">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

public/calendso-logo-word-dark.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 427 97.5" style="enable-background:new 0 0 427 97.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#fff;}
+</style>
+<path class="st0" d="M27.5,88.2c-4.9,0-9.7-1.2-14-3.6c-4.2-2.4-7.6-5.8-9.9-10c-4.8-8.8-4.8-19.4,0-28.2c2.3-4.2,5.8-7.7,10-10
+	c4.3-2.4,9.1-3.7,14-3.6c6-0.1,11.8,1.7,16.5,5.3s8,8.7,9.9,15.4H42.8c-1.3-3-3.4-5.5-6.2-7.2c-2.6-1.6-5.6-2.5-8.7-2.5
+	c-2.8,0-5.6,0.7-8.1,2s-4.7,3.3-6.1,5.8c-3,5.3-3.1,11.9-0.2,17.3c1.4,2.5,3.4,4.5,5.8,6s5.2,2.3,8,2.2c7.2,0,12.4-3.3,15.4-9.9
+	h11.4c-1.1,4.2-3.1,8.1-5.8,11.5c-2.5,3-5.6,5.4-9.2,7C35.5,87.4,31.5,88.1,27.5,88.2L27.5,88.2z M99.6,82.1
+	c-4.6,4-10.6,6.2-16.8,6.1c-4.9,0-9.7-1.2-14-3.6c-4.1-2.4-7.5-5.8-9.8-10c-2.5-4.5-3.7-9.5-3.6-14.6c-0.1-15,11.9-27.2,26.9-27.3
+	c0.1,0,0.2,0,0.3,0c6.4-0.2,12.6,2.1,17.5,6.2v-5.2h11.5V87h-12V82.1z M83.5,43.7c-3,0-5.9,0.7-8.4,2.2c-2.5,1.4-4.6,3.5-6,6
+	c-1.5,2.5-2.2,5.4-2.2,8.4c-0.2,4.5,1.5,8.9,4.7,12.2c3.2,3.2,7.6,4.9,12.1,4.8c2.9,0,5.8-0.7,8.3-2.2c2.5-1.4,4.5-3.5,5.9-6
+	c2.9-5.3,2.9-11.7,0-17c-1.4-2.5-3.5-4.6-6-6C89.3,44.5,86.4,43.8,83.5,43.7L83.5,43.7z M122,14.8h9.7V87H122
+	C122,87.1,122,14.8,122,14.8z M149.8,65.2c0.5,2.3,1.5,4.4,3,6.3c1.4,1.8,3.3,3.2,5.4,4.1c2.2,1,4.6,1.5,7,1.5
+	c2.8,0.1,5.6-0.5,8.1-1.8c2.4-1.4,4.3-3.4,5.5-5.9h11.9c-2.7,6.5-6.2,11.2-10.4,14.2c-4.4,3.1-9.8,4.7-15.2,4.5
+	c-4.8,0.1-9.6-1.2-13.8-3.6c-4.1-2.4-7.5-5.8-9.7-10c-2.4-4.3-3.6-9.2-3.5-14.1c-0.1-4.9,1.1-9.8,3.5-14.1c2.3-4.2,5.7-7.6,9.8-10
+	c8.6-4.8,19.2-4.8,27.7,0.1c4.1,2.4,7.4,6,9.6,10.2c2.2,4.3,3.3,9.1,3.3,14c0,1-0.1,2.5-0.3,4.5h-41.9V65.2z M165.2,43.6
+	c-3.4-0.1-6.8,0.9-9.6,2.9c-2.7,2-4.7,4.8-5.6,8h30.2c-0.9-3.2-2.9-6-5.6-8C171.9,44.5,168.6,43.5,165.2,43.6z M234.8,57.3
+	c0-4.7-1-8.2-3-10.5s-4.9-3.5-8.7-3.5c-2.3,0-4.6,0.7-6.5,2c-2,1.3-3.7,3.2-4.8,5.4c-1.2,2.3-1.8,4.8-1.8,7.4V87h-11.2V33.8h10.5
+	v4.8c3.9-3.9,9.3-6,14.9-5.8c3.9,0,7.7,1,11,3s6,4.8,7.9,8.2c1.9,3.5,2.9,7.5,2.9,11.5v31.6h-11.2L234.8,57.3L234.8,57.3z
+	 M296.7,82.2c-2.4,1.9-5,3.4-7.9,4.4c-3,1-6.2,1.5-9.4,1.5c-4.8,0.1-9.6-1.2-13.8-3.7c-4.1-2.4-7.5-5.9-9.8-10.1
+	c-2.4-4.3-3.6-9.1-3.6-14.1c-0.1-5.1,1.1-10.1,3.5-14.7c2.3-4.2,5.7-7.7,9.8-10.1c4.3-2.5,9.2-3.8,14.1-3.7c3.1,0,6.1,0.5,9,1.4
+	c2.8,0.9,5.4,2.3,7.8,4.1V14.9h11.3v72.2h-11.1L296.7,82.2L296.7,82.2z M280.4,43.1c-3,0-5.9,0.7-8.4,2.2c-2.5,1.4-4.6,3.5-6,6
+	c-1.5,2.6-2.2,5.5-2.2,8.5c-0.2,4.6,1.5,9.1,4.7,12.4c3.2,3.2,7.5,5,12.1,4.8c2.9,0,5.8-0.7,8.3-2.3c2.5-1.5,4.5-3.6,5.9-6.1
+	c2.9-5.4,2.9-11.8,0-17.2C291.8,46.2,286.3,43,280.4,43.1z M335.8,88.2c-3.8,0.1-7.5-0.8-10.8-2.4c-3.1-1.6-5.7-4-7.5-7
+	c-1.9-3.3-2.9-7.1-3-10.9h11c0,2.7,1.1,5.3,3.1,7.1c2.1,1.7,4.8,2.6,7.5,2.5c1.8,0,3.6-0.2,5.3-0.8c1.3-0.4,2.4-1.2,3.3-2.2
+	c0.7-0.8,1.1-1.9,1.1-3c0.1-1.2-0.4-2.4-1.2-3.2c-0.5-0.5-1.1-0.8-1.7-1.2c-0.7-0.3-1.4-0.6-2.2-0.8c-1.8-0.4-3.9-0.9-6.1-1.3
+	c-1.8-0.2-3.5-0.6-5.1-1s-3.5-1-5-1.6c-0.8-0.2-1.6-0.6-2.4-1l-1-0.7c-0.4-0.4-0.8-0.7-1.2-1c-0.7-0.5-1.3-1.1-1.8-1.8
+	c-0.6-0.8-1.1-1.7-1.5-2.6c-0.9-2-1.3-4.2-1.2-6.4c0-3,0.9-6,2.7-8.5c1.8-2.5,4.3-4.5,7.2-5.7c3.3-1.4,6.8-2.1,10.3-2
+	c3.6-0.1,7.1,0.7,10.3,2.4c3,1.5,5.4,3.8,7.1,6.7c1.8,3.2,2.7,6.8,2.7,10.4H345c-0.1-3-1-5.2-2.7-6.7s-4-2.3-7-2.3s-5.2,0.5-6.8,1.5
+	c-1.4,0.8-2.3,2.2-2.3,3.8c-0.1,1,0.3,2,1,2.6c0.6,0.5,1.2,0.9,1.8,1.2c0.6,0.3,1.3,0.5,2,0.7c0.8,0.2,1.7,0.4,2.7,0.6l3.1,0.5
+	c3.4,0.5,6.7,1.2,10,2.2c2.6,0.8,5,2.3,6.7,4.5c1.8,2.4,2.9,5.3,3,8.4l0.1,1.8c0.1,3.2-0.9,6.4-2.8,9.1s-4.5,4.8-7.5,6
+	C343.2,87.6,339.5,88.3,335.8,88.2L335.8,88.2z M412.4,74.6c-2.4,4.2-5.9,7.7-10.2,10c-4.5,2.4-9.6,3.7-14.8,3.6
+	c-4.9,0.1-9.7-1.2-14-3.6c-4.2-2.4-7.7-5.8-10.1-9.9c-2.5-4.2-3.8-9-3.7-13.8c-0.1-5.1,1.1-10.1,3.6-14.6c2.4-4.2,6-7.7,10.2-10
+	c4.4-2.4,9.3-3.6,14.3-3.6s9.9,1.2,14.3,3.6c4.2,2.3,7.8,5.7,10.2,9.9c2.4,4.3,3.7,9.2,3.6,14.2C416.1,65.4,414.8,70.3,412.4,74.6
+	L412.4,74.6z M387.8,43.3c-3,0-6,0.8-8.6,2.3s-4.8,3.6-6.3,6.2c-1.5,2.6-2.3,5.5-2.3,8.5c0,4.6,1.8,9,5.2,12.2
+	c3.2,3.4,7.6,5.3,12.3,5.3c3,0,6-0.8,8.5-2.4c2.6-1.5,4.7-3.7,6.2-6.3c1.5-2.6,2.3-5.6,2.3-8.6s-0.8-6-2.3-8.6s-3.7-4.7-6.3-6.2
+	C393.9,44.1,390.9,43.3,387.8,43.3z"/>
+</svg>

tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   mode: "jit",
   purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: "media",
   theme: {
     extend: {
       colors: {