From bf85cff76d8832a75fff102d87ed46db48421453 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Fri, 9 Jul 2021 13:34:00 +0200
Subject: [PATCH 1/3] added dark mode for profile page

---
 components/Shell.tsx  |  14 +-
 pages/[user].tsx      |  18 +-
 pages/[user]/book.tsx |  10 +-
 pages/index.tsx       | 449 +++++++++++++++++++++++-------------------
 pages/success.tsx     |  22 ++-
 5 files changed, 280 insertions(+), 233 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 59cb8cf335..045cf4e6cf 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -36,14 +36,18 @@ export default function Shell(props) {
 
   return session ? (
     <div>
-      <div className="bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32">
-        <nav className="bg-blue-600">
+      <div className="dark:from-gray-900 dark:to-gray-900  bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32">
+        <nav className="dark:bg-gray-900 bg-blue-600">
           <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div className="border-b border-blue-500">
+            <div className="border-b border-blue-500 dark:border-gray-">
               <div className="flex items-center justify-between h-16 px-4 sm:px-0">
                 <div className="flex items-center">
                   <div className="flex-shrink-0">
-                    <img className="h-6" src="/calendso-white.svg" alt="Calendso" />
+                    <Link href="/">
+                      <a>
+                        <img className="h-6" src="/calendso-white.svg" alt="Calendso" />
+                      </a>
+                    </Link>
                   </div>
                   <div className="hidden md:block">
                     <div className="ml-10 flex items-baseline space-x-4">
@@ -266,7 +270,7 @@ export default function Shell(props) {
       </div>
 
       <main className="-mt-32">
-        <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">{props.children}</div>
+        <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-">{props.children}</div>
       </main>
     </div>
   ) : null;
diff --git a/pages/[user].tsx b/pages/[user].tsx
index 63bb08ad7b..bdb7872574 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -6,14 +6,16 @@ import Avatar from "../components/Avatar";
 
 export default function User(props): User {
   const eventTypes = props.eventTypes.map((type) => (
-    <li key={type.id}>
+    <li
+      key={type.id}
+      className="dark:bg-gray-800 dark:opacity-90 dark:hover:opacity-100 dark:hover:bg-gray-800 bg-white hover:bg-gray-50 ">
       <Link href={`/${props.user.username}/${type.slug}`}>
         <a className="block px-6 py-4">
           <div
             className="inline-block w-3 h-3 rounded-full mr-2"
             style={{ backgroundColor: getRandomColorCode() }}></div>
-          <h2 className="inline-block font-medium">{type.title}</h2>
-          <p className="inline-block text-gray-400 ml-2">{type.description}</p>
+          <h2 className="inline-block font-medium dark:text-white">{type.title}</h2>
+          <p className="inline-block text-gray-400 dark:text-gray-100 ml-2">{type.description}</p>
         </a>
       </Link>
     </li>
@@ -28,15 +30,15 @@ export default function User(props): User {
       <main className="max-w-2xl mx-auto my-24">
         <div className="mb-8 text-center">
           <Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
-          <h1 className="text-3xl font-semibold text-gray-800 mb-1">
+          <h1 className="text-3xl font-semibold text-gray-800 dark:text-white mb-1">
             {props.user.name || props.user.username}
           </h1>
-          <p className="text-gray-600">{props.user.bio}</p>
+          <p className="text-gray-600 dark:text-white">{props.user.bio}</p>
         </div>
-        <div className="bg-white shadow overflow-hidden rounded-md">
-          <ul className="divide-y divide-gray-200">{eventTypes}</ul>
+        <div className="shadow overflow-hidden rounded-md">
+          <ul className="divide-y divide-gray-200 dark:divide-gray-900">{eventTypes}</ul>
           {eventTypes.length == 0 && (
-            <div className="p-8 text-center text-gray-400">
+            <div className="p-8 text-center text-gray-400 dark:text-white">
               <h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
               <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
             </div>
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index 431bef4a48..ec348b69aa 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -187,7 +187,7 @@ export default function Book(props: any): JSX.Element {
                       name="name"
                       id="name"
                       required
-                      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"
+                      className="shadow-sm dark:bg-gray-700 dark:text-white 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 : ""}
                     />
@@ -203,7 +203,7 @@ export default function Book(props: any): JSX.Element {
                       name="email"
                       id="email"
                       required
-                      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"
+                      className="shadow-sm dark:bg-gray-700 dark:text-white 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 : ""}
                     />
@@ -241,7 +241,7 @@ export default function Book(props: any): JSX.Element {
                         placeholder="Enter phone number"
                         id="phone"
                         required
-                        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"
+                        className="shadow-sm dark:bg-gray-700 dark:text-white 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 */
                         }}
@@ -267,7 +267,7 @@ export default function Book(props: any): JSX.Element {
                             id={"custom_" + input.id}
                             required={input.required}
                             rows={3}
-                            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"
+                            className="shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                             placeholder=""
                           />
                         )}
@@ -317,7 +317,7 @@ export default function Book(props: any): JSX.Element {
                     name="notes"
                     id="notes"
                     rows={3}
-                    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"
+                    className="shadow-sm dark:bg-gray-700 dark:text-white 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 : ""}
                   />
diff --git a/pages/index.tsx b/pages/index.tsx
index bd687783dc..973e3dafe8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -64,215 +64,252 @@ export default function Home(props) {
     }
 
     return (
-        <div>
-            <Head>
-                <title>Calendso</title>
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
+      <div>
+        <Head>
+          <title>Calendso</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
 
-            <Shell heading="Dashboard">
-                <div className="md:grid grid-cols-3 gap-4">
-                    <div className="col-span-2">
-                        <div className="rounded-lg bg-white shadow">
-                            <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                                    Your stats
-                                </h3>
-                            </div>
-                            <dl className="grid grid-cols-1 overflow-hidden divide-y divide-gray-200 md:grid-cols-3 md:divide-y-0 md:divide-x">
-                                {stats.map((item) => (
-                                    <div key={item.name} className="px-4 py-5 sm:p-6">
-                                        <dt className="text-base font-normal text-gray-900">{item.name}</dt>
-                                        <dd className="mt-1 flex justify-between items-baseline md:block lg:flex">
-                                            <div className="flex items-baseline text-2xl font-semibold text-blue-600">
-                                                {item.stat}
-                                            </div>
-                                        </dd>
-                                    </div>
-                                ))}
-                            </dl>
-                        </div>
-                        <div className="mt-8 bg-white shadow overflow-hidden rounded-md">
-                            <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                                    Your event types
-                                </h3>
-                            </div>
-                            <ul className="divide-y divide-gray-200">
-                                {props.eventTypes.map((type) => (
-                                    <li key={type.id}>
-                                        <div className="px-4 py-4 flex items-center sm:px-6">
-                                            <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
-                                                <div className="truncate">
-                                                    <div className="flex text-sm">
-                                                        <p className="font-medium text-blue-600 truncate">{type.title}</p>
-                                                        <p className="ml-1 flex-shrink-0 font-normal text-gray-500">in {type.description}</p>
-                                                    </div>
-                                                    <div className="mt-2 flex">
-                                                        <div className="flex items-center text-sm text-gray-500">
-                                                            <ClockIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
-                                                            <p>
-                                                                {type.length} minutes
-                                                            </p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="ml-5 flex-shrink-0">
-                                                <Link href={"/" + session.user.username + "/" + type.slug}><a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2 font-medium">View</a></Link>
-                                            </div>
-                                        </div>
-                                    </li>
-                                ))}
-                                {props.eventTypes.length == 0 &&
-                                    <div className="text-center text-gray-400 py-12">
-                                        <p>You haven't created any event types.</p>
-                                    </div>
-                                }
-                            </ul>
-                        </div>
-                        <div className="mt-8 bg-white shadow overflow-hidden rounded-md p-6 mb-8 md:mb-0">
-                            <div className="md:flex">
-                                <div className="md:w-1/2 self-center mb-8 md:mb-0">
-                                    <h2 className="text-2xl font-semibold">Getting started</h2>
-                                    <p className="text-gray-600 text-sm">Steps you should take to get started with Calendso.</p>
-                                </div>
-                                <div className="md:w-1/2">
-                                    <div className="flow-root">
-                                        <ul className="-mb-8">
-                                            {timeline.map((event, eventIdx) => (
-                                                <li key={event.id}>
-                                                    <div className="relative pb-8">
-                                                        {eventIdx !== timeline.length - 1 ? (
-                                                            <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" />
-                                                        ) : null}
-                                                        <div className="relative flex space-x-3">
-                                                            <div>
-                                                                <span
-                                                                    className={classNames(
-                                                                        event.iconBackground,
-                                                                        'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white'
-                                                                    )}
-                                                                >
-                                                                    <event.icon className="h-5 w-5 text-white" aria-hidden="true" />
-                                                                </span>
-                                                            </div>
-                                                            <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                                                                <div>
-                                                                    <p className="text-sm text-gray-500">
-                                                                        {event.content}{' '}
-                                                                        <Link href={event.href}>
-                                                                            <a className="font-medium text-gray-900">
-                                                                                {event.target}
-                                                                            </a>
-                                                                        </Link>
-                                                                    </p>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div>
-                        <div className="bg-white rounded-lg shadow px-5 py-6 md:py-7 sm:px-6">
-                            <div className="mb-4 sm:flex sm:items-center sm:justify-between">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                                    Your day
-                                </h3>
-                                <div className="mt-3 sm:mt-0 sm:ml-4">
-                                    <Link href="/availability">
-                                        <a className="text-sm text-gray-400">Configure</a>
-                                    </Link>
-                                </div>
-                            </div>
-                            <div>
-                                <p className="text-2xl font-semibold text-gray-600">Offering time slots between <span className="text-blue-600">{convertMinsToHrsMins(props.user.startTime)}</span> and <span className="text-blue-600">{convertMinsToHrsMins(props.user.endTime)}</span></p>
-                            </div>
-                        </div>
-                        <div className="mt-8 bg-white rounded-lg shadow px-5 py-6 md:py-7 sm:px-6">
-                            <div className="mb-8 sm:flex sm:items-center sm:justify-between">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                                    Your integrations
-                                </h3>
-                                <div className="mt-3 sm:mt-0 sm:ml-4">
-                                    <Link href="/integrations">
-                                        <a className="text-sm text-gray-400">View more</a>
-                                    </Link>
-                                </div>
-                            </div>
-                            <ul className="divide-y divide-gray-200">
-                                {props.credentials.map((integration) =>
-                                    <li className="pb-4 flex">
-                                        {integration.type == 'google_calendar' && <img className="h-10 w-10 mr-2" src="integrations/google-calendar.png" alt="Google Calendar" />}
-                                        {integration.type == 'office365_calendar' && <img className="h-10 w-10 mr-2" src="integrations/office-365.png" alt="Office 365 / Outlook.com Calendar" />}
-                                        {integration.type == 'zoom_video' && <img className="h-10 w-10 mr-2" src="integrations/zoom.png" alt="Zoom" />}
-                                        <div className="ml-3">
-                                            {integration.type == 'office365_calendar' && <p className="text-sm font-medium text-gray-900">Office 365 / Outlook.com Calendar</p>}
-                                            {integration.type == 'google_calendar' && <p className="text-sm font-medium text-gray-900">Google Calendar</p>}
-                                            {integration.type == 'zoom_video' && <p className="text-sm font-medium text-gray-900">Zoom</p>}
-                                            {integration.type.endsWith('_calendar') && <p className="text-sm text-gray-500">Calendar Integration</p>}
-                                            {integration.type.endsWith('_video') && <p className="text-sm text-gray-500">Video Conferencing</p>}
-                                        </div>
-                                    </li>
-                                )}
-                                {props.credentials.length == 0 &&
-                                    <div className="text-center text-gray-400 py-2">
-                                        <p>You haven't added any integrations.</p>
-                                    </div>
-                                }
-                            </ul>
-                        </div>
-                        <div className="mt-8 bg-white rounded-lg shadow px-5 py-6 md:py-7 sm:px-6">
-                            <div className="mb-4 sm:flex sm:items-center sm:justify-between">
-                                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                                    Your event types
-                                </h3>
-                                <div className="mt-3 sm:mt-0 sm:ml-4">
-                                    <Link href="/availability">
-                                        <a className="text-sm text-gray-400">View more</a>
-                                    </Link>
-                                </div>
-                            </div>
-                            <ul className="divide-y divide-gray-200">
-                                {props.eventTypes.map((type) => (
-                                    <li
-                                        key={type.id}
-                                        className="relative bg-white py-5 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
-                                    >
-                                        <div className="flex justify-between space-x-3">
-                                            <div className="min-w-0 flex-1">
-                                                <a href="#" className="block focus:outline-none">
-                                                    <span className="absolute inset-0" aria-hidden="true" />
-                                                    <p className="text-sm font-medium text-gray-900 truncate">{type.title}</p>
-                                                    <p className="text-sm text-gray-500 truncate">{type.description}</p>
-                                                </a>
-                                            </div>
-                                            <span className="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">
-                                                {type.length} minutes
-                                            </span>
-                                        </div>
-                                    </li>
-                                ))}
-                                {props.eventTypes.length == 0 &&
-                                    <div className="text-center text-gray-400 py-2">
-                                        <p>You haven't created any event types.</p>
-                                    </div>
-                                }
-                            </ul>
-                        </div>
-                    </div>
+        <Shell heading="Dashboard">
+          <div className="md:grid grid-cols-3 gap-4">
+            <div className="col-span-2">
+              <div className="rounded-lg bg-white shadow dark:bg-gray-800">
+                <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your stats</h3>
                 </div>
+                <dl className="grid grid-cols-1 overflow-hidden divide-y divide-gray-200 dark:divide-gray-900 md:grid-cols-3 md:divide-y-0 md:divide-x">
+                  {stats.map((item) => (
+                    <div key={item.name} className="px-4 py-5 sm:p-6">
+                      <dt className="text-base font-normal dark:text-white text-gray-900">{item.name}</dt>
+                      <dd className="mt-1 flex justify-between items-baseline md:block lg:flex">
+                        <div className="flex items-baseline text-2xl font-semibold text-blue-600">
+                          {item.stat}
+                        </div>
+                      </dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+              <div className="mt-8 bg-white shadow dark:bg-gray-800 overflow-hidden rounded-md">
+                <div className="pt-5 pb-2 px-6 sm:flex sm:items-center sm:justify-between">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                    Your event types
+                  </h3>
+                </div>
+                <ul className="divide-y divide-gray-200">
+                  {props.eventTypes.map((type) => (
+                    <li key={type.id}>
+                      <div className="px-4 py-4 flex items-center sm:px-6">
+                        <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
+                          <div className="truncate">
+                            <div className="flex text-sm">
+                              <p className="font-medium text-blue-600 truncate">{type.title}</p>
+                              <p className="ml-1 flex-shrink-0 font-normal text-gray-500">
+                                in {type.description}
+                              </p>
+                            </div>
+                            <div className="mt-2 flex">
+                              <div className="flex items-center text-sm text-gray-500">
+                                <ClockIcon
+                                  className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+                                  aria-hidden="true"
+                                />
+                                <p>{type.length} minutes</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="ml-5 flex-shrink-0">
+                          <Link href={"/" + session.user.username + "/" + type.slug}>
+                            <a target="_blank" className="text-blue-600 hover:text-blue-900 mr-2 font-medium">
+                              View
+                            </a>
+                          </Link>
+                        </div>
+                      </div>
+                    </li>
+                  ))}
+                  {props.eventTypes.length == 0 && (
+                    <div className="text-center text-gray-400 py-12">
+                      <p>You haven't created any event types.</p>
+                    </div>
+                  )}
+                </ul>
+              </div>
+              <div className="mt-8 bg-white dark:bg-gray-800 shadow overflow-hidden rounded-md p-6 mb-8 md:mb-0">
+                <div className="md:flex">
+                  <div className="md:w-1/2 self-center mb-8 md:mb-0">
+                    <h2 className="text-2xl dark:text-white font-semibold">Getting started</h2>
+                    <p className="text-gray-600 dark:text-gray-200 text-sm">
+                      Steps you should take to get started with Calendso.
+                    </p>
+                  </div>
+                  <div className="md:w-1/2">
+                    <div className="flow-root">
+                      <ul className="-mb-8">
+                        {timeline.map((event, eventIdx) => (
+                          <li key={event.id}>
+                            <div className="relative pb-8">
+                              {eventIdx !== timeline.length - 1 ? (
+                                <span
+                                  className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 dark:bg-gray-900"
+                                  aria-hidden="true"
+                                />
+                              ) : null}
+                              <div className="relative flex space-x-3">
+                                <div>
+                                  <span
+                                    className={classNames(
+                                      event.iconBackground,
+                                      "h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white dark:ring-gray-800"
+                                    )}>
+                                    <event.icon className="h-5 w-5 text-white" aria-hidden="true" />
+                                  </span>
+                                </div>
+                                <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                                  <div>
+                                    <p className="text-sm text-gray-500 dark:text-gray-200">
+                                      {event.content}{" "}
+                                      <Link href={event.href}>
+                                        <a className="font-medium dark:text-white text-gray-900">
+                                          {event.target}
+                                        </a>
+                                      </Link>
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div className="bg-white dark:bg-gray-800 rounded-lg shadow px-5 py-6 md:py-7 sm:px-6">
+                <div className="mb-4 sm:flex sm:items-center sm:justify-between">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your day</h3>
+                  <div className="mt-3 sm:mt-0 sm:ml-4">
+                    <Link href="/availability">
+                      <a className="text-sm text-gray-400">Configure</a>
+                    </Link>
+                  </div>
+                </div>
+                <div>
+                  <p className="text-2xl font-semibold text-gray-600 dark:text-white">
+                    Offering time slots between{" "}
+                    <span className="text-blue-600">{convertMinsToHrsMins(props.user.startTime)}</span> and{" "}
+                    <span className="text-blue-600">{convertMinsToHrsMins(props.user.endTime)}</span>
+                  </p>
+                </div>
+              </div>
+              <div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow px-5 py-6 md:py-7 sm:px-6">
+                <div className="mb-8 sm:flex sm:items-center sm:justify-between">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                    Your integrations
+                  </h3>
+                  <div className="mt-3 sm:mt-0 sm:ml-4">
+                    <Link href="/integrations">
+                      <a className="text-sm text-gray-400">View more</a>
+                    </Link>
+                  </div>
+                </div>
+                <ul className="divide-y divide-gray-200">
+                  {props.credentials.map((integration) => (
+                    <li className="pb-4 flex">
+                      {integration.type == "google_calendar" && (
+                        <img
+                          className="h-10 w-10 mr-2"
+                          src="integrations/google-calendar.png"
+                          alt="Google Calendar"
+                        />
+                      )}
+                      {integration.type == "office365_calendar" && (
+                        <img
+                          className="h-10 w-10 mr-2"
+                          src="integrations/office-365.png"
+                          alt="Office 365 / Outlook.com Calendar"
+                        />
+                      )}
+                      {integration.type == "zoom_video" && (
+                        <img className="h-10 w-10 mr-2" src="integrations/zoom.png" alt="Zoom" />
+                      )}
+                      <div className="ml-3">
+                        {integration.type == "office365_calendar" && (
+                          <p className="text-sm font-medium text-gray-900">
+                            Office 365 / Outlook.com Calendar
+                          </p>
+                        )}
+                        {integration.type == "google_calendar" && (
+                          <p className="text-sm font-medium text-gray-900">Google Calendar</p>
+                        )}
+                        {integration.type == "zoom_video" && (
+                          <p className="text-sm font-medium text-gray-900">Zoom</p>
+                        )}
+                        {integration.type.endsWith("_calendar") && (
+                          <p className="text-sm text-gray-500">Calendar Integration</p>
+                        )}
+                        {integration.type.endsWith("_video") && (
+                          <p className="text-sm text-gray-500">Video Conferencing</p>
+                        )}
+                      </div>
+                    </li>
+                  ))}
+                  {props.credentials.length == 0 && (
+                    <div className="text-center text-gray-400 py-2">
+                      <p>You haven't added any integrations.</p>
+                    </div>
+                  )}
+                </ul>
+              </div>
+              <div className="mt-8 bg-white dark:bg-gray-800  rounded-lg shadow px-5 py-6 md:py-7 sm:px-6">
+                <div className="mb-4 sm:flex sm:items-center sm:justify-between">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                    Your event types
+                  </h3>
+                  <div className="mt-3 sm:mt-0 sm:ml-4">
+                    <Link href="/availability">
+                      <a className="text-sm text-gray-400">View more</a>
+                    </Link>
+                  </div>
+                </div>
+                <ul className="divide-y divide-gray-200">
+                  {props.eventTypes.map((type) => (
+                    <li
+                      key={type.id}
+                      className="relative py-5  focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600">
+                      <div className="flex justify-between space-x-3">
+                        <div className="min-w-0 flex-1">
+                          <a href="#" className="block focus:outline-none">
+                            <span className="absolute inset-0" aria-hidden="true" />
+                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                              {type.title}
+                            </p>
+                            <p className="text-sm text-gray-500 truncate">{type.description}</p>
+                          </a>
+                        </div>
+                        <span className="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">
+                          {type.length} minutes
+                        </span>
+                      </div>
+                    </li>
+                  ))}
+                  {props.eventTypes.length == 0 && (
+                    <div className="text-center text-gray-400 py-2">
+                      <p>You haven't created any event types.</p>
+                    </div>
+                  )}
+                </ul>
+              </div>
+            </div>
+          </div>
 
-                <DonateBanner />
-
-            </Shell>
-        </div>
+          <DonateBanner />
+        </Shell>
+      </div>
     );
 }
 
diff --git a/pages/success.tsx b/pages/success.tsx
index 52c1f22b70..286897b9e7 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -70,7 +70,7 @@ export default function Success(props) {
                 &#8203;
               </span>
               <div
-                className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+                className="inline-block align-bottom dark:bg-gray-800 bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
@@ -79,17 +79,21 @@ export default function Success(props) {
                     <CheckIcon className="h-6 w-6 text-green-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
+                    <h3
+                      className="text-lg leading-6 font-medium dark:text-white text-gray-900"
+                      id="modal-headline">
                       Booking confirmed
                     </h3>
                     <div className="mt-2">
-                      <p className="text-sm text-gray-500">
+                      <p className="text-sm text-gray-500 dark:text-gray-300">
                         You are scheduled in with {props.user.name || props.user.username}.
                       </p>
                     </div>
-                    <div className="mt-4 border-t border-b py-4">
-                      <h2 className="text-lg font-medium text-gray-600 mb-2">{eventName}</h2>
-                      <p className="text-gray-500 mb-1">
+                    <div className="mt-4 border-t border-b dark:border-gray-900 py-4">
+                      <h2 className="text-lg font-medium text-gray-600 dark:text-gray-100 mb-2">
+                        {eventName}
+                      </h2>
+                      <p className="text-gray-500 dark:text-gray-50 mb-1">
                         <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                         {props.eventType.length} minutes
                       </p>
@@ -99,7 +103,7 @@ export default function Success(props) {
                           {location}
                         </p>
                       )}
-                      <p className="text-gray-500">
+                      <p className="text-gray-500 dark:text-gray-50">
                         <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                         {date.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
                       </p>
@@ -107,7 +111,7 @@ export default function Success(props) {
                   </div>
                 </div>
                 <div className="mt-5 sm:mt-0 pt-2 text-center">
-                  <span className="font-medium text-gray-500">Add to your calendar</span>
+                  <span className="font-medium text-gray-500 dark:text-gray-50">Add to your calendar</span>
                   <div className="flex mt-2">
                     <Link
                       href={
@@ -194,7 +198,7 @@ export default function Success(props) {
                   </div>
                 </div>
                 {!props.user.hideBranding && (
-                  <div className="mt-4 pt-4 border-t text-gray-400 text-center text-xs">
+                  <div className="mt-4 pt-4 border-t dark:border-gray-900  text-gray-400 text-center text-xs dark:text-white">
                     <a href="https://checkout.calendso.com">Create your own booking link with Calendso</a>
                   </div>
                 )}

From cc2dde6a841eb9bf762cb2134371f905e7def916 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Fri, 9 Jul 2021 15:08:55 +0200
Subject: [PATCH 2/3] wip

---
 components/Shell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 045cf4e6cf..5dfc9b66d3 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -270,7 +270,7 @@ export default function Shell(props) {
       </div>
 
       <main className="-mt-32">
-        <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-">{props.children}</div>
+        <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">{props.children}</div>
       </main>
     </div>
   ) : null;

From 73c4ef815b04f7d3b894bda16e27c7d24a2deb5a Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Fri, 9 Jul 2021 15:14:05 +0200
Subject: [PATCH 3/3] wip

---
 components/Shell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 5dfc9b66d3..beafc8ed1e 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -39,7 +39,7 @@ export default function Shell(props) {
       <div className="dark:from-gray-900 dark:to-gray-900  bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32">
         <nav className="dark:bg-gray-900 bg-blue-600">
           <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div className="border-b border-blue-500 dark:border-gray-">
+            <div className="border-b border-blue-500 dark:border-gray-400">
               <div className="flex items-center justify-between h-16 px-4 sm:px-0">
                 <div className="flex items-center">
                   <div className="flex-shrink-0">