mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

added dark mode for profile page

Browse source
This commit is contained in:
Peer Richelsen 2021-07-09 13:34:00 +02:00
parent 01fc00b92f
commit bf85cff76d
5 changed files with 280 additions and 233 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/Shell.tsx
View file

@ -36,14 +36,18 @@ export default function Shell(props) {
return session ? ( return session ? (
<div> <div>
<div className="bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32"> <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="bg-blue-600"> <nav className="dark:bg-gray-900 bg-blue-600">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8"> <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 justify-between h-16 px-4 sm:px-0">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Link href="/">
<a>
<img className="h-6" src="/calendso-white.svg" alt="Calendso" /> <img className="h-6" src="/calendso-white.svg" alt="Calendso" />
</a>
</Link>
</div> </div>
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-10 flex items-baseline space-x-4">
@ -266,7 +270,7 @@ export default function Shell(props) {
</div> </div>
<main className="-mt-32"> <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> </main>
</div> </div>
) : null; ) : null;

18
pages/[user].tsx
View file

@ -6,14 +6,16 @@ import Avatar from "../components/Avatar";
export default function User(props): User { export default function User(props): User {
const eventTypes = props.eventTypes.map((type) => ( 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}`}> <Link href={`/${props.user.username}/${type.slug}`}>
<a className="block px-6 py-4"> <a className="block px-6 py-4">
<div <div
className="inline-block w-3 h-3 rounded-full mr-2" className="inline-block w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: getRandomColorCode() }}></div> style={{ backgroundColor: getRandomColorCode() }}></div>
<h2 className="inline-block font-medium">{type.title}</h2> <h2 className="inline-block font-medium dark:text-white">{type.title}</h2>
<p className="inline-block text-gray-400 ml-2">{type.description}</p> <p className="inline-block text-gray-400 dark:text-gray-100 ml-2">{type.description}</p>
</a> </a>
</Link> </Link>
</li> </li>
@ -28,15 +30,15 @@ export default function User(props): User {
<main className="max-w-2xl mx-auto my-24"> <main className="max-w-2xl mx-auto my-24">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" /> <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} {props.user.name || props.user.username}
</h1> </h1>
<p className="text-gray-600">{props.user.bio}</p> <p className="text-gray-600 dark:text-white">{props.user.bio}</p>
</div> </div>
<div className="bg-white shadow overflow-hidden rounded-md"> <div className="shadow overflow-hidden rounded-md">
<ul className="divide-y divide-gray-200">{eventTypes}</ul> <ul className="divide-y divide-gray-200 dark:divide-gray-900">{eventTypes}</ul>
{eventTypes.length == 0 && ( {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> <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> <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
</div> </div>

10
pages/[user]/book.tsx
View file

@ -187,7 +187,7 @@ export default function Book(props: any): JSX.Element {
name="name" name="name"
id="name" id="name"
required 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" placeholder="John Doe"
defaultValue={props.booking ? props.booking.attendees[0].name : ""} defaultValue={props.booking ? props.booking.attendees[0].name : ""}
/> />
@ -203,7 +203,7 @@ export default function Book(props: any): JSX.Element {
name="email" name="email"
id="email" id="email"
required 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" placeholder="you@example.com"
defaultValue={props.booking ? props.booking.attendees[0].email : ""} defaultValue={props.booking ? props.booking.attendees[0].email : ""}
/> />
@ -241,7 +241,7 @@ export default function Book(props: any): JSX.Element {
placeholder="Enter phone number" placeholder="Enter phone number"
id="phone" id="phone"
required 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={() => { onChange={() => {
/* DO NOT REMOVE: Callback required by PhoneInput, comment added to satisfy eslint:no-empty-function */ /* 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} id={"custom_" + input.id}
required={input.required} required={input.required}
rows={3} 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="" placeholder=""
/> />
)} )}
@ -317,7 +317,7 @@ export default function Book(props: any): JSX.Element {
name="notes" name="notes"
id="notes" id="notes"
rows={3} 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." placeholder="Please share anything that will help prepare for our meeting."
defaultValue={props.booking ? props.booking.description : ""} defaultValue={props.booking ? props.booking.description : ""}
/> />

143
pages/index.tsx
View file

@ -73,16 +73,14 @@ export default function Home(props) {
<Shell heading="Dashboard"> <Shell heading="Dashboard">
<div className="md:grid grid-cols-3 gap-4"> <div className="md:grid grid-cols-3 gap-4">
<div className="col-span-2"> <div className="col-span-2">
<div className="rounded-lg bg-white shadow"> <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"> <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"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your stats</h3>
Your stats
</h3>
</div> </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"> <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) => ( {stats.map((item) => (
<div key={item.name} className="px-4 py-5 sm:p-6"> <div key={item.name} className="px-4 py-5 sm:p-6">
<dt className="text-base font-normal text-gray-900">{item.name}</dt> <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"> <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"> <div className="flex items-baseline text-2xl font-semibold text-blue-600">
{item.stat} {item.stat}
@ -92,9 +90,9 @@ export default function Home(props) {
))} ))}
</dl> </dl>
</div> </div>
<div className="mt-8 bg-white shadow overflow-hidden rounded-md"> <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"> <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"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
Your event types Your event types
</h3> </h3>
</div> </div>
@ -106,36 +104,45 @@ export default function Home(props) {
<div className="truncate"> <div className="truncate">
<div className="flex text-sm"> <div className="flex text-sm">
<p className="font-medium text-blue-600 truncate">{type.title}</p> <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> <p className="ml-1 flex-shrink-0 font-normal text-gray-500">
in {type.description}
</p>
</div> </div>
<div className="mt-2 flex"> <div className="mt-2 flex">
<div className="flex items-center text-sm text-gray-500"> <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" /> <ClockIcon
<p> className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
{type.length} minutes aria-hidden="true"
</p> />
<p>{type.length} minutes</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="ml-5 flex-shrink-0"> <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> <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>
</div> </div>
</li> </li>
))} ))}
{props.eventTypes.length == 0 && {props.eventTypes.length == 0 && (
<div className="text-center text-gray-400 py-12"> <div className="text-center text-gray-400 py-12">
<p>You haven't created any event types.</p> <p>You haven't created any event types.</p>
</div> </div>
} )}
</ul> </ul>
</div> </div>
<div className="mt-8 bg-white shadow overflow-hidden rounded-md p-6 mb-8 md:mb-0"> <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:flex">
<div className="md:w-1/2 self-center mb-8 md:mb-0"> <div className="md:w-1/2 self-center mb-8 md:mb-0">
<h2 className="text-2xl font-semibold">Getting started</h2> <h2 className="text-2xl dark:text-white font-semibold">Getting started</h2>
<p className="text-gray-600 text-sm">Steps you should take to get started with Calendso.</p> <p className="text-gray-600 dark:text-gray-200 text-sm">
Steps you should take to get started with Calendso.
</p>
</div> </div>
<div className="md:w-1/2"> <div className="md:w-1/2">
<div className="flow-root"> <div className="flow-root">
@ -144,25 +151,27 @@ export default function Home(props) {
<li key={event.id}> <li key={event.id}>
<div className="relative pb-8"> <div className="relative pb-8">
{eventIdx !== timeline.length - 1 ? ( {eventIdx !== timeline.length - 1 ? (
<span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true" /> <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} ) : null}
<div className="relative flex space-x-3"> <div className="relative flex space-x-3">
<div> <div>
<span <span
className={classNames( className={classNames(
event.iconBackground, event.iconBackground,
'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white' "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" /> <event.icon className="h-5 w-5 text-white" aria-hidden="true" />
</span> </span>
</div> </div>
<div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4"> <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
<div> <div>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500 dark:text-gray-200">
{event.content}{' '} {event.content}{" "}
<Link href={event.href}> <Link href={event.href}>
<a className="font-medium text-gray-900"> <a className="font-medium dark:text-white text-gray-900">
{event.target} {event.target}
</a> </a>
</Link> </Link>
@ -180,11 +189,9 @@ export default function Home(props) {
</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="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"> <div className="mb-4 sm:flex sm:items-center sm:justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Your day</h3>
Your day
</h3>
<div className="mt-3 sm:mt-0 sm:ml-4"> <div className="mt-3 sm:mt-0 sm:ml-4">
<Link href="/availability"> <Link href="/availability">
<a className="text-sm text-gray-400">Configure</a> <a className="text-sm text-gray-400">Configure</a>
@ -192,12 +199,16 @@ export default function Home(props) {
</div> </div>
</div> </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> <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> </div>
<div className="mt-8 bg-white rounded-lg shadow px-5 py-6 md:py-7 sm:px-6"> <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"> <div className="mb-8 sm:flex sm:items-center sm:justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
Your integrations Your integrations
</h3> </h3>
<div className="mt-3 sm:mt-0 sm:ml-4"> <div className="mt-3 sm:mt-0 sm:ml-4">
@ -207,30 +218,56 @@ export default function Home(props) {
</div> </div>
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">
{props.credentials.map((integration) => {props.credentials.map((integration) => (
<li className="pb-4 flex"> <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 == "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" />} <img
{integration.type == 'zoom_video' && <img className="h-10 w-10 mr-2" src="integrations/zoom.png" alt="Zoom" />} 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"> <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 == "office365_calendar" && (
{integration.type == 'google_calendar' && <p className="text-sm font-medium text-gray-900">Google Calendar</p>} <p className="text-sm font-medium text-gray-900">
{integration.type == 'zoom_video' && <p className="text-sm font-medium text-gray-900">Zoom</p>} Office 365 / Outlook.com Calendar
{integration.type.endsWith('_calendar') && <p className="text-sm text-gray-500">Calendar Integration</p>} </p>
{integration.type.endsWith('_video') && <p className="text-sm text-gray-500">Video Conferencing</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> </div>
</li> </li>
)} ))}
{props.credentials.length == 0 && {props.credentials.length == 0 && (
<div className="text-center text-gray-400 py-2"> <div className="text-center text-gray-400 py-2">
<p>You haven't added any integrations.</p> <p>You haven't added any integrations.</p>
</div> </div>
} )}
</ul> </ul>
</div> </div>
<div className="mt-8 bg-white rounded-lg shadow px-5 py-6 md:py-7 sm:px-6"> <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"> <div className="mb-4 sm:flex sm:items-center sm:justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900"> <h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
Your event types Your event types
</h3> </h3>
<div className="mt-3 sm:mt-0 sm:ml-4"> <div className="mt-3 sm:mt-0 sm:ml-4">
@ -243,13 +280,14 @@ export default function Home(props) {
{props.eventTypes.map((type) => ( {props.eventTypes.map((type) => (
<li <li
key={type.id} 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" 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="flex justify-between space-x-3">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<a href="#" className="block focus:outline-none"> <a href="#" className="block focus:outline-none">
<span className="absolute inset-0" aria-hidden="true" /> <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 font-medium text-gray-900 dark:text-white truncate">
{type.title}
</p>
<p className="text-sm text-gray-500 truncate">{type.description}</p> <p className="text-sm text-gray-500 truncate">{type.description}</p>
</a> </a>
</div> </div>
@ -259,18 +297,17 @@ export default function Home(props) {
</div> </div>
</li> </li>
))} ))}
{props.eventTypes.length == 0 && {props.eventTypes.length == 0 && (
<div className="text-center text-gray-400 py-2"> <div className="text-center text-gray-400 py-2">
<p>You haven't created any event types.</p> <p>You haven't created any event types.</p>
</div> </div>
} )}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<DonateBanner /> <DonateBanner />
</Shell> </Shell>
</div> </div>
); );

22
pages/success.tsx
View file

@ -70,7 +70,7 @@ export default function Success(props) {
&#8203; &#8203;
</span> </span>
<div <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" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby="modal-headline"> aria-labelledby="modal-headline">
@ -79,17 +79,21 @@ export default function Success(props) {
<CheckIcon className="h-6 w-6 text-green-600" /> <CheckIcon className="h-6 w-6 text-green-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <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 Booking confirmed
</h3> </h3>
<div className="mt-2"> <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}. You are scheduled in with {props.user.name || props.user.username}.
</p> </p>
</div> </div>
<div className="mt-4 border-t border-b py-4"> <div className="mt-4 border-t border-b dark:border-gray-900 py-4">
<h2 className="text-lg font-medium text-gray-600 mb-2">{eventName}</h2> <h2 className="text-lg font-medium text-gray-600 dark:text-gray-100 mb-2">
<p className="text-gray-500 mb-1"> {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" /> <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{props.eventType.length} minutes {props.eventType.length} minutes
</p> </p>
@ -99,7 +103,7 @@ export default function Success(props) {
{location} {location}
</p> </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" /> <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{date.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")} {date.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
</p> </p>
@ -107,7 +111,7 @@ export default function Success(props) {
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-0 pt-2 text-center"> <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"> <div className="flex mt-2">
<Link <Link
href={ href={
@ -194,7 +198,7 @@ export default function Success(props) {
</div> </div>
</div> </div>
{!props.user.hideBranding && ( {!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> <a href="https://checkout.calendso.com">Create your own booking link with Calendso</a>
</div> </div>
)} )}