diff --git a/components/Dialog.tsx b/components/Dialog.tsx new file mode 100644 index 00000000..08140d72 --- /dev/null +++ b/components/Dialog.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import * as DialogPrimitive from "@radix-ui/react-dialog"; + +export function Dialog({ children, ...props }) { + return ( + + + {children} + + ); +} + +export const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => ( + + {children} + +)); + +export function DialogHeader({ title, subtitle }: { title: string; subtitle: string }) { + return ( +
+ +
+

{subtitle}

+
+
+ ); +} + +DialogContent.displayName = "DialogContent"; + +export const DialogTrigger = DialogPrimitive.Trigger; +export const DialogClose = DialogPrimitive.Close; diff --git a/components/Loader.tsx b/components/Loader.tsx new file mode 100644 index 00000000..b6c49c94 --- /dev/null +++ b/components/Loader.tsx @@ -0,0 +1,7 @@ +export default function Loader() { + return ( +
+ +
+ ); +} diff --git a/components/Modal.tsx b/components/Modal.tsx index a2f6ab70..e03b1d12 100644 --- a/components/Modal.tsx +++ b/components/Modal.tsx @@ -8,7 +8,7 @@ export default function Modal(props) {
@@ -20,7 +20,7 @@ export default function Modal(props) { leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0"> - + {/* This element is to trick the browser into centering the modal contents. */} diff --git a/components/Settings.tsx b/components/Settings.tsx index d175a563..4d4354ef 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,10 +1,7 @@ import Link from "next/link"; import { CodeIcon, CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; - -function classNames(...classes) { - return classes.filter(Boolean).join(" "); -} +import classNames from "@lib/classNames"; export default function SettingsShell(props) { const router = useRouter(); @@ -38,9 +35,9 @@ export default function SettingsShell(props) { ]; return ( -
-
-
-
+ ) : null; } @@ -210,7 +212,7 @@ function UserDropdown({ session, small, bottom }: { session: any; small?: boolea {session.user.name} - {session.user.username} + /{session.user.username} )} diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx new file mode 100644 index 00000000..dfab8cdd --- /dev/null +++ b/components/Tooltip.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import { Slot } from "@radix-ui/react-slot"; + +export function Tooltip({ + children, + content, + open, + defaultOpen, + onOpenChange, + ...props +}: { + [x: string]: any; + children: React.ReactNode; + content: React.ReactNode; + open: boolean; + defaultOpen: boolean; + onOpenChange: (open: boolean) => void; +}) { + return ( + + {children} + + {content} + + + ); +} diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx index e2d6af3e..4f7a5fd4 100644 --- a/components/booking/AvailableTimes.tsx +++ b/components/booking/AvailableTimes.tsx @@ -2,6 +2,8 @@ import Link from "next/link"; import { useRouter } from "next/router"; import Slots from "./Slots"; import { ExclamationIcon } from "@heroicons/react/solid"; +import React from "react"; +import Loader from "@components/Loader"; const AvailableTimes = ({ date, @@ -25,7 +27,7 @@ const AvailableTimes = ({ }); return ( -
+
{date.format("dddd DD MMMM YYYY")}
@@ -37,7 +39,7 @@ const AvailableTimes = ({ `/${user.username}/book?date=${slot.utc().format()}&type=${eventTypeId}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "") }> - + {slot.format(timeFormat)} @@ -49,7 +51,7 @@ const AvailableTimes = ({
)} - {!isFullyBooked && slots.length === 0 && !hasErrors &&
} + {!isFullyBooked && slots.length === 0 && !hasErrors && } {hasErrors && (
diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx index c6a49fa0..41a4ab94 100644 --- a/components/booking/DatePicker.tsx +++ b/components/booking/DatePicker.tsx @@ -147,12 +147,14 @@ const DatePicker = ({ onClick={() => setSelectedDate(inviteeDate.date(day))} disabled={isDisabled(day)} className={ - "text-center w-10 h-10 rounded-full mx-auto" + - (isDisabled(day) ? " text-gray-400 font-light" : " text-blue-600 font-medium") + + "text-center w-10 h-10 mx-auto hover:border hover:border-black dark:hover:border-white" + + (isDisabled(day) + ? " text-gray-400 font-light hover:border-0 cursor-default" + : " dark:text-white text-primary-500 font-medium") + (selectedDate && selectedDate.isSame(inviteeDate.date(day), "day") - ? " bg-blue-600 text-white-important" + ? " bg-black text-white-important" : !isDisabled(day) - ? " bg-blue-50 dark:bg-gray-900 dark:bg-opacity-30" + ? " bg-gray-100 dark:bg-black dark:bg-opacity-30" : "") }> {day} @@ -164,26 +166,34 @@ const DatePicker = ({ return selectedMonth ? (
- {dayjs().month(selectedMonth).format("MMMM YYYY")} + + {dayjs().month(selectedMonth).format("MMMM")} + + {dayjs().month(selectedMonth).format("YYYY")} -
+
-
-
+
{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0)) .map((weekDay) => ( diff --git a/components/booking/TimeOptions.tsx b/components/booking/TimeOptions.tsx index 52023e79..9e51b6ae 100644 --- a/components/booking/TimeOptions.tsx +++ b/components/booking/TimeOptions.tsx @@ -2,10 +2,7 @@ import { Switch } from "@headlessui/react"; import TimezoneSelect from "react-timezone-select"; import { useEffect, useState } from "react"; import { is24h, timeZone } from "../../lib/clock"; - -function classNames(...classes) { - return classes.filter(Boolean).join(" "); -} +import classNames from "@lib/classNames"; const TimeOptions = (props) => { const [selectedTimeZone, setSelectedTimeZone] = useState(""); @@ -28,7 +25,7 @@ const TimeOptions = (props) => { return ( selectedTimeZone !== "" && ( -
+
Time Options
@@ -40,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/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx index 28312329..226b63ab 100644 --- a/components/team/EditTeamModal.tsx +++ b/components/team/EditTeamModal.tsx @@ -35,12 +35,14 @@ export default function EditTeamModal(props) { return (
- +