diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx index d55c2202..259eee10 100644 --- a/components/booking/AvailableTimes.tsx +++ b/components/booking/AvailableTimes.tsx @@ -14,7 +14,6 @@ const AvailableTimes = ({ timeFormat, user, organizerTimeZone, - height, }) => { const router = useRouter(); const { rescheduleUid } = router.query; @@ -28,11 +27,9 @@ const AvailableTimes = ({ }); return ( -
-
- {date.format("dddd DD MMMM YYYY")} +
+
+ {date.format("dddd DD MMMM YYYY")}
{slots.length > 0 && slots.map((slot) => ( @@ -42,7 +39,7 @@ const AvailableTimes = ({ `/${user.username}/book?date=${slot.utc().format()}&type=${eventTypeId}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "") }> - + {slot.format(timeFormat)} diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index e977ea04..28c1fa56 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -1,4 +1,4 @@ -import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/outline"; +import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid"; import { useEffect, useState } from "react"; import dayjs, { Dayjs } from "dayjs"; import utc from "dayjs/plugin/utc"; @@ -24,7 +24,6 @@ const DatePicker = ({ periodDays, periodCountCalendarDays, minimumBookingNotice, - setHeight, }) => { const [calendar, setCalendar] = useState([]); const [selectedMonth, setSelectedMonth] = useState(); @@ -148,14 +147,14 @@ const DatePicker = ({ onClick={() => setSelectedDate(inviteeDate.date(day))} disabled={isDisabled(day)} className={ - "w-36 mx-auto h-28 mx-auto p-3 text-left flex self-start" + + "text-center w-10 h-10 mx-auto" + (isDisabled(day) - ? " text-neutral-400 font-light" - : " text-neutral-900 dark:text-neutral-200 font-medium") + + ? " text-gray-400 font-light" + : " dark:text-white text-primary-500 font-medium") + (selectedDate && selectedDate.isSame(inviteeDate.date(day), "day") - ? " bg-neutral-100 dark:bg-neutral-700 border border-neutral-900 dark:border-neutral-600 dark:text-white" + ? " bg-black text-white-important" : !isDisabled(day) - ? " bg-neutral-100 dark:bg-neutral-700 dark:bg-opacity-30" + ? " bg-gray-100 dark:bg-black dark:bg-opacity-30" : "") }> {day} @@ -165,44 +164,35 @@ const DatePicker = ({ }, [selectedMonth, inviteeTimeZone, selectedDate]); return selectedMonth ? ( -
-
-
- - {dayjs().month(selectedMonth).format("MMMM")} - -   - {dayjs().month(selectedMonth).format("YYYY")} -
+
+
+ + {dayjs().month(selectedMonth).format("MMMM YYYY")} +
-
-
{ - if (!el) return; - setHeight(el.getBoundingClientRect().height); - }}> +
{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0)) .map((weekDay) => ( -
+
{weekDay}
))} diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx index 59cd7a2e..9e51b6ae 100644 --- a/components/booking/TimeOptions.tsx +++ b/components/booking/TimeOptions.tsx @@ -25,7 +25,7 @@ const TimeOptions = (props) => { return ( selectedTimeZone !== "" && ( -
+
Time Options
@@ -37,7 +37,7 @@ const TimeOptions = (props) => { checked={is24hClock} onChange={setIs24hClock} className={classNames( - is24hClock ? "bg-blue-600" : "dark:bg-gray-600 bg-gray-200", + is24hClock ? "bg-black" : "dark:bg-gray-600 bg-gray-200", "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black" )}> Use setting diff --git a/components/ui/PoweredByCalendso.tsx b/components/ui/PoweredByCalendso.tsx index 6f2596c8..1e0ce6ab 100644 --- a/components/ui/PoweredByCalendso.tsx +++ b/components/ui/PoweredByCalendso.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; const PoweredByCalendso = () => ( -
+
powered by{" "} diff --git a/pages/404.tsx b/pages/404.tsx new file mode 100644 index 00000000..1f3a5025 --- /dev/null +++ b/pages/404.tsx @@ -0,0 +1,161 @@ +import { ChevronRightIcon } from "@heroicons/react/solid"; +import { DocumentTextIcon, BookOpenIcon, CodeIcon, CheckIcon } from "@heroicons/react/outline"; +import { useRouter } from "next/router"; +import React from "react"; +import Link from "next/link"; +import Head from "next/head"; + +const links = [ + { + title: "Documentation", + description: "Learn how to integrate our tools with your app", + icon: DocumentTextIcon, + href: "https://docs.calendso.com", + }, + { + title: "API Reference", + description: "A complete API reference for our libraries", + icon: CodeIcon, + href: "https://api.docs.calendso.com", + }, + { + title: "Blog", + description: "Read our latest news and articles", + icon: BookOpenIcon, + href: "https://calendso.com/blog", + }, +]; + +export default function Custom404() { + const router = useRouter(); + const username = router.asPath.replace("%20", "-"); + + return ( + <> + + 404: This page could not be found. + + + + ); +} diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx index 86136631..8b2787b9 100644 --- a/pages/[user]/[type].tsx +++ b/pages/[user]/[type].tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { GetServerSideProps, GetServerSidePropsContext } from "next"; import Head from "next/head"; -import { ChevronDownIcon, ClockIcon, GlobeIcon, InformationCircleIcon } from "@heroicons/react/solid"; +import { ChevronDownIcon, ChevronUpIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import dayjs, { Dayjs } from "dayjs"; import * as Collapsible from "@radix-ui/react-collapsible"; @@ -30,8 +30,6 @@ export default function Type(props): Type { const [timeFormat, setTimeFormat] = useState("h:mma"); const telemetry = useTelemetry(); - const [calHeight, setCalHeight] = useState(0); - useEffect(() => { handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true"); telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())); @@ -81,7 +79,7 @@ export default function Type(props): Type { return ( isReady && ( -
+
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username}{" "} @@ -128,72 +126,77 @@ export default function Type(props): Type { } /> </Head> - <main className={"flex sm:py-12 w-11/12 mx-auto"}> - <div className="w-2/12 md:pt-32"> - <Avatar user={props.user} className="w-12 h-12 rounded-full mb-4" /> - <h1 className="text-xl font-semibold dark:text-neutral-100 text-neutral-900 mb-2"> - {props.user.name} - </h1> - <p className="text-neutral-500 mb-1 px-2 py-1 -ml-2"> - <InformationCircleIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> - {props.eventType.title} - </p> - <p className="text-neutral-500 mb-1 px-2 py-1 -ml-2"> - <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> - {props.eventType.length} minutes - </p> - <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}> - <Collapsible.Trigger className="text-neutral-500 mb-1 px-2 py-1 -ml-2"> - <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> - {timeZone()} - <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" /> - </Collapsible.Trigger> - <Collapsible.Content> - <TimeOptions - onSelectTimeZone={handleSelectTimeZone} - onToggle24hClock={handleToggle24hClock} - /> - </Collapsible.Content> - </Collapsible.Root> - </div> - <div className="w-8/12"> - <DatePicker - date={selectedDate} - periodType={props.eventType?.periodType} - periodStartDate={props.eventType?.periodStartDate} - periodEndDate={props.eventType?.periodEndDate} - periodDays={props.eventType?.periodDays} - periodCountCalendarDays={props.eventType?.periodCountCalendarDays} - weekStart={props.user.weekStart} - onDatePicked={changeDate} - workingHours={props.workingHours} - organizerTimeZone={props.eventType.timeZone || props.user.timeZone} - inviteeTimeZone={timeZone()} - eventLength={props.eventType.length} - minimumBookingNotice={props.eventType.minimumBookingNotice} - setHeight={setCalHeight} - /> - </div> - <div className="w-2/12"> - {selectedDate && ( - <AvailableTimes - workingHours={props.workingHours} - timeFormat={timeFormat} - organizerTimeZone={props.eventType.timeZone || props.user.timeZone} - minimumBookingNotice={props.eventType.minimumBookingNotice} - eventTypeId={props.eventType.id} - eventLength={props.eventType.length} + <main + className={ + "mx-auto my-0 sm:my-24 transition-max-width ease-in-out duration-500 " + + (selectedDate ? "max-w-6xl" : "max-w-3xl") + }> + <div className="dark:bg-neutral-900 bg-white border border-gray-200 rounded-sm dark:border-0"> + <div className="sm:flex px-4 py-5 sm:p-4"> + <div + className={ + "pr-8 sm:border-r sm:dark:border-black " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2") + }> + <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" /> + <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2> + <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4"> + {props.eventType.title} + </h1> + <p className="text-gray-500 mb-1 px-2 py-1 -ml-2"> + <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> + {props.eventType.length} minutes + </p> + + <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}> + <Collapsible.Trigger className="text-gray-500 mb-1 px-2 py-1 -ml-2"> + <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> + {timeZone()} + {isTimeOptionsOpen ? ( + <ChevronUpIcon className="inline-block w-4 h-4 ml-1 -mt-1" /> + ) : ( + <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" /> + )} + </Collapsible.Trigger> + <Collapsible.Content> + <TimeOptions + onSelectTimeZone={handleSelectTimeZone} + onToggle24hClock={handleToggle24hClock} + /> + </Collapsible.Content> + </Collapsible.Root> + + <p className="dark:text-gray-200 text-gray-600 mt-3 mb-8">{props.eventType.description}</p> + </div> + <DatePicker date={selectedDate} - user={props.user} - height={calHeight} + periodType={props.eventType?.periodType} + periodStartDate={props.eventType?.periodStartDate} + periodEndDate={props.eventType?.periodEndDate} + periodDays={props.eventType?.periodDays} + periodCountCalendarDays={props.eventType?.periodCountCalendarDays} + weekStart={props.user.weekStart} + onDatePicked={changeDate} + workingHours={props.workingHours} + organizerTimeZone={props.eventType.timeZone || props.user.timeZone} + inviteeTimeZone={timeZone()} + eventLength={props.eventType.length} + minimumBookingNotice={props.eventType.minimumBookingNotice} /> - )} - </div> - {!props.user.hideBranding && ( - <div className="absolute top-4 right-4"> - <PoweredByCalendso /> + {selectedDate && ( + <AvailableTimes + workingHours={props.workingHours} + timeFormat={timeFormat} + organizerTimeZone={props.eventType.timeZone || props.user.timeZone} + minimumBookingNotice={props.eventType.minimumBookingNotice} + eventTypeId={props.eventType.id} + eventLength={props.eventType.length} + date={selectedDate} + user={props.user} + /> + )} </div> - )} + </div> + {!props.user.hideBranding && <PoweredByCalendso />} </main> </div> ) diff --git a/pages/_document.tsx b/pages/_document.tsx index 6ec9ef95..29e3027b 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -18,7 +18,7 @@ class MyDocument extends Document { <meta name="msapplication-TileColor" content="#ff0000" /> <meta name="theme-color" content="#ffffff" /> </Head> - <body className="dark:bg-neutral-900 bg-white"> + <body className="dark:bg-black bg-gray-100"> <Main /> <NextScript /> </body> diff --git a/public/calendso-logo-word.svg b/public/calendso-logo-word.svg index 4a01ade1..e4592085 100644 --- a/public/calendso-logo-word.svg +++ b/public/calendso-logo-word.svg @@ -3,7 +3,7 @@ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 427 97.5" style="enable-background:new 0 0 427 97.5;" xml:space="preserve"> <style type="text/css"> - .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#104D86;} + .st0{fillRule:evenodd;clipRule:evenodd;fill:#104D86;} </style> <path class="st0" d="M27.5,88.2c-4.9,0-9.7-1.2-14-3.6c-4.2-2.4-7.6-5.8-9.9-10c-4.8-8.8-4.8-19.4,0-28.2c2.3-4.2,5.8-7.7,10-10 c4.3-2.4,9.1-3.7,14-3.6c6-0.1,11.8,1.7,16.5,5.3s8,8.7,9.9,15.4H42.8c-1.3-3-3.4-5.5-6.2-7.2c-2.6-1.6-5.6-2.5-8.7-2.5