added dark mode for profile page
This commit is contained in:
Peer Richelsen
parent
01fc00b92f
commit
bf85cff76d
5 changed files with 280 additions and 233 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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't set up any event types yet.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 : ""}
|
||||
/>
|
||||
|
|
|
|||
449
pages/index.tsx
449
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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default function Success(props) {
|
|||
​
|
||||
</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>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue