3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-05-10 15:36:49 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use prettier to order tailwind classes

Browse source
This commit is contained in:
Luke Vella 2022-04-16 10:25:29 +01:00
parent c5c2816c3d
commit eee23c1bb5
52 changed files with 268 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/button/button.tsx
View file

@ -44,7 +44,7 @@ const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
"btn-danger": type === "danger", "btn-danger": type === "danger",
"btn-link": type === "link", "btn-link": type === "link",
"btn-disabled": disabled, "btn-disabled": disabled,
"rounded-full p-2 h-auto": rounded, "h-auto rounded-full p-2": rounded,
"w-10 p-0": !children, "w-10 p-0": !children,
}, },
className, className,
@ -54,7 +54,7 @@ const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
> >
{loading ? ( {loading ? (
<SpinnerIcon <SpinnerIcon
className={clsx("w-5 animate-spin inline-block", { className={clsx("inline-block w-5 animate-spin", {
"mr-2": !!children, "mr-2": !!children,
})} })}
/> />

4
components/compact-button.tsx
View file

@ -17,10 +17,10 @@ const CompactButton: React.VoidFunctionComponent<CompactButtonProps> = ({
return ( return (
<button <button
type="button" type="button"
className="h-5 w-5 rounded-full hover:bg-gray-200 transition-colors active:text-gray-500 active:bg-gray-300 text-gray-400 bg-gray-100 inline-flex items-center justify-center" className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 active:bg-gray-300 active:text-gray-500"
onClick={onClick} onClick={onClick}
> >
{Icon ? <Icon className="w-3 h-3" /> : children} {Icon ? <Icon className="h-3 w-3" /> : children}
</button> </button>
); );
}; };

6
components/cookie-consent.tsx
View file

@ -21,14 +21,14 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
leave="duration-200" leave="duration-200"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-8" leaveTo="opacity-0 translate-y-8"
className="bg-white z-50 p-4 pt-8 shadow-lg fixed rounded-lg w-60 text-sm bottom-8 right-8" className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
> >
<CookiesIllustration className="absolute -top-6" /> <CookiesIllustration className="absolute -top-6" />
<div className="mb-3"> <div className="mb-3">
Your privacy is important to us. We only use cookies to improve the Your privacy is important to us. We only use cookies to improve the
browsing experience on this website. browsing experience on this website.
</div> </div>
<div className="flex space-x-6 items-center"> <div className="flex items-center space-x-6">
<Link href="/privacy-policy"> <Link href="/privacy-policy">
<a className="text-slate-400 hover:text-indigo-500">Privacy Policy</a> <a className="text-slate-400 hover:text-indigo-500">Privacy Policy</a>
</Link> </Link>
@ -37,7 +37,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
Cookies.set("rallly_cookie_consent", "1", { expires: 365 }); Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
setVisible(false); setVisible(false);
}} }}
className="grow text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90 px-5 py-1 font-semibold shadow-sm rounded-md" className="grow rounded-md bg-indigo-500 px-5 py-1 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90"
> >
OK OK
</button> </button>

10
components/date-card.tsx
View file

@ -19,20 +19,20 @@ const DateCard: React.VoidFunctionComponent<DateCardProps> = ({
return ( return (
<div <div
className={clsx( className={clsx(
"inline-block bg-white text-center border h-14 w-14 rounded-md relative shadow-md shadow-slate-100", "relative inline-block h-14 w-14 rounded-md border bg-white text-center shadow-md shadow-slate-100",
className, className,
)} )}
> >
{annotation ? ( {annotation ? (
<div className="absolute -top-3 -right-3">{annotation}</div> <div className="absolute -top-3 -right-3">{annotation}</div>
) : null} ) : null}
<div className="text-xs -mt-2 mb-[-1px] text-slate-400 relative"> <div className="relative -mt-2 mb-[-1px] text-xs text-slate-400">
<span className="relative inline-block after:content-[''] after:inline-block after:absolute after:left-0 px-1 after:top-[7px] after:border-white after:-z-10 z-10 after:border-t after:w-full"> <span className="relative z-10 inline-block px-1 after:absolute after:left-0 after:top-[7px] after:-z-10 after:inline-block after:w-full after:border-t after:border-white after:content-['']">
{dow} {dow}
</span> </span>
</div> </div>
<div className="text-red-500 text-lg -mb-1 text-center">{day}</div> <div className="-mb-1 text-center text-lg text-red-500">{day}</div>
<div className="text-gray-800 text-center text-xs uppercase font-semibold"> <div className="text-center text-xs font-semibold uppercase text-gray-800">
{month} {month}
</div> </div>
</div> </div>

14
components/discussion/discussion.tsx
View file

@ -45,7 +45,7 @@ const Comments: React.VoidFunctionComponent<{
canDelete?: boolean; canDelete?: boolean;
}> = ({ comments, deletedComments, onDelete, canDelete }) => { }> = ({ comments, deletedComments, onDelete, canDelete }) => {
return ( return (
<div className="bg-slate-50 p-4 space-y-3 border-b"> <div className="space-y-3 border-b bg-slate-50 p-4">
{comments.map((comment, i) => { {comments.map((comment, i) => {
return ( return (
<div className="flex" key={i}> <div className="flex" key={i}>
@ -58,9 +58,9 @@ const Comments: React.VoidFunctionComponent<{
leave="transition transform duration-100" leave="transition transform duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
className="bg-white border rounded-xl px-3 py-2 shadow-sm w-fit" className="w-fit rounded-xl border bg-white px-3 py-2 shadow-sm"
> >
<div className="flex space-x-2 items-center"> <div className="flex items-center space-x-2">
<UserAvater name={comment.authorName} /> <UserAvater name={comment.authorName} />
<div className="mb-1"> <div className="mb-1">
<span className="mr-1">{comment.authorName}</span> <span className="mr-1">{comment.authorName}</span>
@ -175,8 +175,8 @@ const Discussion: React.VoidFunctionComponent<DiscussionProps> = ({
} }
return ( return (
<div className="border-t border-b md:border md:rounded-lg overflow-hidden shadow-sm"> <div className="overflow-hidden border-t border-b shadow-sm md:rounded-lg md:border">
<div className="px-4 py-2 bg-white border-b"> <div className="border-b bg-white px-4 py-2">
<div className="font-medium">Comments</div> <div className="font-medium">Comments</div>
</div> </div>
{comments.length ? ( {comments.length ? (
@ -211,10 +211,10 @@ const Discussion: React.VoidFunctionComponent<DiscussionProps> = ({
<textarea <textarea
id="comment" id="comment"
placeholder="Add your comment…" placeholder="Add your comment…"
className="input pl-3 pr-4 py-2 w-full" className="input w-full py-2 pl-3 pr-4"
{...register("content", { validate: requiredString })} {...register("content", { validate: requiredString })}
/> />
<div className="flex mt-1 space-x-3"> <div className="mt-1 flex space-x-3">
<Controller <Controller
name="authorName" name="authorName"
control={control} control={control}

6
components/dropdown.tsx
View file

@ -52,7 +52,7 @@ const Dropdown: React.VoidFunctionComponent<DropdownProps> = ({
ref={setPopperElement} ref={setPopperElement}
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
className="z-30 p-1 bg-white divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" className="z-30 divide-gray-100 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
> >
{children} {children}
</Menu.Items>, </Menu.Items>,
@ -74,7 +74,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
<button <button
onClick={onClick} onClick={onClick}
className={clsx( className={clsx(
"group flex rounded items-center w-full py-2 pl-2 pr-4", "group flex w-full items-center rounded py-2 pl-2 pr-4",
{ {
"bg-indigo-500 text-white": active, "bg-indigo-500 text-white": active,
"text-gray-700": !active, "text-gray-700": !active,
@ -84,7 +84,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
> >
{Icon && ( {Icon && (
<Icon <Icon
className={clsx("w-5 h-5 mr-2", { className={clsx("mr-2 h-5 w-5", {
"text-white": active, "text-white": active,
"text-indigo-500": !disabled, "text-indigo-500": !disabled,
})} })}

6
components/error-page.tsx
View file

@ -22,19 +22,19 @@ const ErrorPage: React.VoidFunctionComponent<ComponentProps> = ({
}) => { }) => {
return ( return (
<StandardLayout> <StandardLayout>
<div className="h-full bg-gray-50 px-4 py-8 flex items-center justify-center lg:w-[1024px] max-w-full"> <div className="flex h-full max-w-full items-center justify-center bg-gray-50 px-4 py-8 lg:w-[1024px]">
<Head> <Head>
<title>{title}</title> <title>{title}</title>
<meta name="robots" content="noindex,nofollow" /> <meta name="robots" content="noindex,nofollow" />
</Head> </Head>
<div className="flex items-start"> <div className="flex items-start">
<div className="text-center"> <div className="text-center">
<Icon className="w-24 inline-block mb-4 text-slate-400" /> <Icon className="mb-4 inline-block w-24 text-slate-400" />
<div className="text-3xl font-bold uppercase text-indigo-500 "> <div className="text-3xl font-bold uppercase text-indigo-500 ">
{title} {title}
</div> </div>
<p>{description}</p> <p>{description}</p>
<div className="flex space-x-3 justify-center"> <div className="flex justify-center space-x-3">
<Link href="/" passHref={true}> <Link href="/" passHref={true}>
<a className="btn-default">Go to home</a> <a className="btn-default">Go to home</a>
</Link> </Link>

6
components/forms/poll-options-form/date-navigation-toolbar.tsx
View file

@ -14,12 +14,12 @@ export interface DateNavigationToolbarProps {
const DateNavigationToolbar: React.VoidFunctionComponent<DateNavigationToolbarProps> = const DateNavigationToolbar: React.VoidFunctionComponent<DateNavigationToolbarProps> =
({ year, label, onPrevious, onToday, onNext }) => { ({ year, label, onPrevious, onToday, onNext }) => {
return ( return (
<div className="flex border-b items-center w-full px-4 h-14 shrink-0"> <div className="flex h-14 w-full shrink-0 items-center border-b px-4">
<div className="grow"> <div className="grow">
<span className="text-sm font-bold text-gray-400 mr-2">{year}</span> <span className="mr-2 text-sm font-bold text-gray-400">{year}</span>
<span className="text-lg font-bold text-gray-700">{label}</span> <span className="text-lg font-bold text-gray-700">{label}</span>
</div> </div>
<div className="flex space-x-2 items-center"> <div className="flex items-center space-x-2">
<div className="segment-button"> <div className="segment-button">
<button type="button" onClick={onPrevious}> <button type="button" onClick={onPrevious}>
<ChevronLeft className="h-5" /> <ChevronLeft className="h-5" />

32
components/forms/poll-options-form/month-calendar/month-calendar.tsx
View file

@ -81,17 +81,17 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
}); });
return ( return (
<div className="lg:flex overflow-hidden"> <div className="overflow-hidden lg:flex">
<div className="p-4 border-b lg:border-r lg:border-b-0 shrink-0"> <div className="shrink-0 border-b p-4 lg:border-r lg:border-b-0">
<div> <div>
<div className="w-full flex flex-col"> <div className="flex w-full flex-col">
<div className="flex space-x-4 items-center justify-center mb-3"> <div className="mb-3 flex items-center justify-center space-x-4">
<Button <Button
icon={<ChevronLeft />} icon={<ChevronLeft />}
title="Previous month" title="Previous month"
onClick={datepicker.prev} onClick={datepicker.prev}
/> />
<div className="grow text-center font-medium text-lg"> <div className="grow text-center text-lg font-medium">
{datepicker.label} {datepicker.label}
</div> </div>
<Button <Button
@ -105,14 +105,14 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
return ( return (
<div <div
key={dayOfWeek} key={dayOfWeek}
className="flex items-center justify-center pb-2 text-slate-400 text-sm font-medium" className="flex items-center justify-center pb-2 text-sm font-medium text-slate-400"
> >
{dayOfWeek.substring(0, 2)} {dayOfWeek.substring(0, 2)}
</div> </div>
); );
})} })}
</div> </div>
<div className="grid grid-cols-7 grow border shadow-sm rounded-lg overflow-hidden bg-white"> <div className="grid grow grid-cols-7 overflow-hidden rounded-lg border bg-white shadow-sm">
{datepicker.days.map((day, i) => { {datepicker.days.map((day, i) => {
return ( return (
<button <button
@ -152,13 +152,13 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
} }
}} }}
className={clsx( className={clsx(
"flex items-center relative lg:w-14 justify-center focus:ring-0 focus:ring-offset-0 hover:bg-slate-50 px-4 py-3 text-sm active:bg-slate-100", "relative flex items-center justify-center px-4 py-3 text-sm hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 active:bg-slate-100 lg:w-14",
{ {
"text-slate-400 bg-slate-50": day.outOfMonth, "bg-slate-50 text-slate-400": day.outOfMonth,
"font-bold text-indigo-500": day.today, "font-bold text-indigo-500": day.today,
"border-r": (i + 1) % 7 !== 0, "border-r": (i + 1) % 7 !== 0,
"border-b": i < datepicker.days.length - 7, "border-b": i < datepicker.days.length - 7,
"font-normal after:content-[''] after:animate-popIn after:absolute after:w-8 after:h-8 after:rounded-full after:bg-green-500 after:-z-0 text-white": "font-normal text-white after:absolute after:-z-0 after:h-8 after:w-8 after:animate-popIn after:rounded-full after:bg-green-500 after:content-['']":
day.selected, day.selected,
}, },
)} )}
@ -174,13 +174,13 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
</div> </div>
</div> </div>
</div> </div>
<div className="grow flex flex-col"> <div className="flex grow flex-col">
<div <div
className={clsx("border-b", { className={clsx("border-b", {
hidden: datepicker.selection.length === 0, hidden: datepicker.selection.length === 0,
})} })}
> >
<div className="p-4 flex space-x-3 items-center"> <div className="flex items-center space-x-3 p-4">
<div className="grow"> <div className="grow">
<div className="font-medium">Specify times</div> <div className="font-medium">Specify times</div>
<div className="text-sm text-slate-400"> <div className="text-sm text-slate-400">
@ -233,7 +233,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
return ( return (
<div <div
key={dateString} key={dateString}
className="py-4 space-y-3 xs:space-y-0 xs:space-x-4 xs:flex" className="space-y-3 py-4 xs:flex xs:space-y-0 xs:space-x-4"
> >
<div> <div>
<DateCard <DateCard
@ -249,7 +249,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
return ( return (
<div <div
key={index} key={index}
className="flex space-x-3 items-center" className="flex items-center space-x-3"
> >
<TimePicker <TimePicker
value={startDate} value={startDate}
@ -301,7 +301,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
</div> </div>
); );
})} })}
<div className="flex space-x-3 items-center"> <div className="flex items-center space-x-3">
<Button <Button
icon={<PlusSm />} icon={<PlusSm />}
onClick={() => { onClick={() => {
@ -414,7 +414,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
) : ( ) : (
<div className="flex h-full items-center justify-center py-12"> <div className="flex h-full items-center justify-center py-12">
<div className="text-center font-medium text-gray-400"> <div className="text-center font-medium text-gray-400">
<Calendar className="inline-block h-12 w-12 mb-2" /> <Calendar className="mb-2 inline-block h-12 w-12" />
<div>No dates selected</div> <div>No dates selected</div>
</div> </div>
</div> </div>

8
components/forms/poll-options-form/month-calendar/time-picker.tsx
View file

@ -79,12 +79,12 @@ const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
setQuery(e.target.value.toUpperCase().replace(/[\:\s]/g, "")); setQuery(e.target.value.toUpperCase().replace(/[\:\s]/g, ""));
}} }}
/> />
<Combobox.Button className="absolute inset-0 flex items-center cursor-default px-2 h-9 text-left"> <Combobox.Button className="absolute inset-0 flex h-9 cursor-default items-center px-2 text-left">
<span className="grow truncate"> <span className="grow truncate">
{!query ? format(value, "p") : null} {!query ? format(value, "p") : null}
</span> </span>
<span className="flex pointer-events-none"> <span className="pointer-events-none flex">
<ChevronDown className="w-5 h-5" /> <ChevronDown className="h-5 w-5" />
</span> </span>
</Combobox.Button> </Combobox.Button>
{portal && {portal &&
@ -93,7 +93,7 @@ const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
ref={setPopperElement} ref={setPopperElement}
className="z-50 w-32 py-1 overflow-auto bg-white rounded-md shadow-lg max-h-72 ring-1 ring-black ring-opacity-5 focus:outline-none" className="z-50 max-h-72 w-32 overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
> >
{options} {options}
</Combobox.Options>, </Combobox.Options>,

8
components/forms/poll-options-form/poll-options-form.tsx
View file

@ -144,7 +144,7 @@ const PollOptionsForm: React.VoidFunctionComponent<
> >
{calendarHelpModal} {calendarHelpModal}
{dateOrTimeRangeModal} {dateOrTimeRangeModal}
<div className="py-3 space-y-2 lg:space-y-0 border-b w-full lg:space-x-2 bg-slate-50 items-center lg:flex px-4"> <div className="w-full items-center space-y-2 border-b bg-slate-50 py-3 px-4 lg:flex lg:space-y-0 lg:space-x-2">
<div className="grow"> <div className="grow">
<Controller <Controller
control={control} control={control}
@ -172,7 +172,7 @@ const PollOptionsForm: React.VoidFunctionComponent<
}} }}
type="button" type="button"
> >
<Calendar className="h-5 w-5 mr-2" /> Month view <Calendar className="mr-2 h-5 w-5" /> Month view
</button> </button>
<button <button
className={clsx({ className={clsx({
@ -183,12 +183,12 @@ const PollOptionsForm: React.VoidFunctionComponent<
setValue("view", "week"); setValue("view", "week");
}} }}
> >
<Table className="h-5 w-5 mr-2" /> Week view <Table className="mr-2 h-5 w-5" /> Week view
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div className="w-full relative"> <div className="relative w-full">
<React.Suspense <React.Suspense
fallback={ fallback={
<FullPageLoader className="h-[400px]">Loading…</FullPageLoader> <FullPageLoader className="h-[400px]">Loading…</FullPageLoader>

10
components/forms/poll-options-form/week-calendar.tsx
View file

@ -95,7 +95,7 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
<div <div
// onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element // onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element
onMouseUp={props.onClick} onMouseUp={props.onClick}
className="absolute p-1 ml-1 max-h-full hover:bg-opacity-50 transition-colors cursor-pointer overflow-hidden bg-green-100 bg-opacity-80 text-green-500 rounded-md text-xs" className="absolute ml-1 max-h-full cursor-pointer overflow-hidden rounded-md bg-green-100 bg-opacity-80 p-1 text-xs text-green-500 transition-colors hover:bg-opacity-50"
style={{ style={{
top: `calc(${props.style?.top}% + 4px)`, top: `calc(${props.style?.top}% + 4px)`,
height: `calc(${props.style?.height}% - 8px)`, height: `calc(${props.style?.height}% - 8px)`,
@ -104,7 +104,7 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
}} }}
> >
<div>{format(props.event.start, "p")}</div> <div>{format(props.event.start, "p")}</div>
<div className="font-bold w-full truncate"> <div className="w-full truncate font-bold">
{props.event.title} {props.event.title}
</div> </div>
</div> </div>
@ -134,14 +134,14 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
} }
}} }}
className={clsx( className={clsx(
"inline-flex w-full justify-center hover:text-gray-700 hover:bg-slate-50 rounded-md items-center text-sm py-2", "inline-flex w-full items-center justify-center rounded-md py-2 text-sm hover:bg-slate-50 hover:text-gray-700",
{ {
"bg-green-50 text-green-600 hover:bg-opacity-75 hover:bg-green-50 hover:text-green-600": "bg-green-50 text-green-600 hover:bg-green-50 hover:bg-opacity-75 hover:text-green-600":
!!selectedOption, !!selectedOption,
}, },
)} )}
> >
<span className="font-normal opacity-50 mr-1"> <span className="mr-1 font-normal opacity-50">
{format(date, "E")} {format(date, "E")}
</span> </span>
<span className="font-medium">{format(date, "dd")}</span> <span className="font-medium">{format(date, "dd")}</span>

6
components/full-page-loader.tsx
View file

@ -14,10 +14,10 @@ const FullPageLoader: React.VoidFunctionComponent<FullPageLoaderProps> = ({
}) => { }) => {
return ( return (
<div <div
className={clsx(" h-full flex items-center justify-center", className)} className={clsx(" flex h-full items-center justify-center", className)}
> >
<div className="bg-indigo-500 text-white text-sm px-4 py-3 shadow-sm rounded-lg flex items-center"> <div className="flex items-center rounded-lg bg-indigo-500 px-4 py-3 text-sm text-white shadow-sm">
<Spinner className="h-5 mr-3 animate-spin" /> <Spinner className="mr-3 h-5 animate-spin" />
{children} {children}
</div> </div>
</div> </div>

4
components/header.tsx
View file

@ -5,10 +5,10 @@ const Header: React.FunctionComponent<{ className?: string }> = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div <div
className="h-10 shrink-0 border-gray-200 px-6 flex items-center" className="flex h-10 shrink-0 items-center border-gray-200 px-6"
{...props} {...props}
> >
<div className="text-base font-bold text-gray-400 uppercase"> <div className="text-base font-bold uppercase text-gray-400">
{t("appName")} {t("appName")}
</div> </div>
<div className="ml-2 text-xs text-gray-400">v2-alpha</div> <div className="ml-2 text-xs text-gray-400">v2-alpha</div>

2
components/home/bonus.tsx
View file

@ -8,7 +8,7 @@ import Ban from "./ban-ads.svg";
const Bonus: React.VoidFunctionComponent = () => { const Bonus: React.VoidFunctionComponent = () => {
return ( return (
<div className="pt-8 pb-24 max-w-7xl mx-auto px-8"> <div className="mx-auto max-w-7xl px-8 pt-8 pb-24">
<h2 className="heading">Principles</h2> <h2 className="heading">Principles</h2>
<p className="subheading">We&apos;re not like the others</p> <p className="subheading">We&apos;re not like the others</p>
<div className="grid grid-cols-4 gap-16"> <div className="grid grid-cols-4 gap-16">

20
components/home/features.tsx
View file

@ -7,17 +7,17 @@ import DeviceMobile from "@/components/icons/device-mobile.svg";
const Features: React.VoidFunctionComponent = () => { const Features: React.VoidFunctionComponent = () => {
return ( return (
<div className="py-16 px-8 max-w-7xl mx-auto"> <div className="mx-auto max-w-7xl py-16 px-8">
<h2 className="heading">Features</h2> <h2 className="heading">Features</h2>
<p className="subheading">Everything you need to get the job done</p> <p className="subheading">Everything you need to get the job done</p>
<div className="grid grid-cols-2 gap-12"> <div className="grid grid-cols-2 gap-12">
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="p-3 bg-green-100/50 text-green-400 inline-block rounded-2xl mb-4"> <div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-400">
<Clock className="w-8 h-8" /> <Clock className="h-8 w-8" />
</div> </div>
<h3 className="heading-sm flex items-center"> <h3 className="heading-sm flex items-center">
Time slots Time slots
<span className="ml-2 font-normal text-sm bg-green-500 text-white rounded-full px-2 py-1"> <span className="ml-2 rounded-full bg-green-500 px-2 py-1 text-sm font-normal text-white">
New New
</span> </span>
</h3> </h3>
@ -28,8 +28,8 @@ const Features: React.VoidFunctionComponent = () => {
</p> </p>
</div> </div>
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="p-3 bg-cyan-100/50 text-cyan-400 inline-block rounded-2xl mb-4"> <div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-400">
<DeviceMobile className="w-8 h-8" /> <DeviceMobile className="h-8 w-8" />
</div> </div>
<h3 className="heading-sm">Mobile friendly design</h3> <h3 className="heading-sm">Mobile friendly design</h3>
<p className="text"> <p className="text">
@ -38,8 +38,8 @@ const Features: React.VoidFunctionComponent = () => {
</p> </p>
</div> </div>
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="p-3 bg-rose-100/50 text-rose-400 inline-block rounded-2xl mb-4"> <div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-400">
<Bell className="w-8 h-8" /> <Bell className="h-8 w-8" />
</div> </div>
<h3 className="heading-sm">Notifications</h3> <h3 className="heading-sm">Notifications</h3>
<p className="text"> <p className="text">
@ -48,8 +48,8 @@ const Features: React.VoidFunctionComponent = () => {
</p> </p>
</div> </div>
<div className="col-span-2 md:col-span-1"> <div className="col-span-2 md:col-span-1">
<div className="p-3 bg-yellow-100/50 text-yellow-400 inline-block rounded-2xl mb-4"> <div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-400">
<Chat className="w-8 h-8" /> <Chat className="h-8 w-8" />
</div> </div>
<h3 className="heading-sm">Comments</h3> <h3 className="heading-sm">Comments</h3>
<p className="text"> <p className="text">

22
components/home/hero.tsx
View file

@ -12,27 +12,27 @@ const Hero: React.VoidFunctionComponent = () => {
const names = ["Peter", "Christine", "Samantha", "Joseph"]; const names = ["Peter", "Christine", "Samantha", "Joseph"];
return ( return (
<div className="lg:flex lg:justify-between p-8 items-end max-w-7xl mx-auto"> <div className="mx-auto max-w-7xl items-end p-8 lg:flex lg:justify-between">
<div className="my-8 text-center lg:text-left"> <div className="my-8 text-center lg:text-left">
<h1 className="text-4xl sm:text-5xl font-bold"> <h1 className="text-4xl font-bold sm:text-5xl">
Schedule Schedule
<br /> <br />
<span className="text-indigo-500">group&nbsp;meetings</span> <span className="text-indigo-500">group&nbsp;meetings</span>
<br /> <br />
with ease with ease
</h1> </h1>
<div className="text-xl text-gray-400 mb-12"> <div className="mb-12 text-xl text-gray-400">
Find the right date without the back and&nbsp;forth. Find the right date without the back and&nbsp;forth.
</div> </div>
<div className="space-x-3"> <div className="space-x-3">
<Link href="/new"> <Link href="/new">
<a className="focus:ring-2 focus:ring-indigo-200 transition-all text-white bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg"> <a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90">
{t("getStarted")} {t("getStarted")}
</a> </a>
</Link> </Link>
<Link href="/demo"> <Link href="/demo">
<a <a
className="text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-slate-500 hover:bg-slate-500/90 active:bg-slate-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg" className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-slate-600/90"
rel="nofollow" rel="nofollow"
> >
{t("viewDemo")} {t("viewDemo")}
@ -40,17 +40,17 @@ const Hero: React.VoidFunctionComponent = () => {
</Link> </Link>
</div> </div>
</div> </div>
<div className="hidden mt-16 lg:mt-0 lg:ml-24 pointer-events-none select-none h-[380px] md:flex items-end justify-center"> <div className="pointer-events-none mt-16 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-0 lg:ml-24">
<UserAvatarProvider seed="mock" names={names}> <UserAvatarProvider seed="mock" names={names}>
<div className="inline-block relative"> <div className="relative inline-block">
<motion.div <motion.div
className="absolute z-20 border-4 shadow-md bg-indigo-200/10 rounded-2xl border-indigo-500 h-full" className="absolute z-20 h-full rounded-2xl border-4 border-indigo-500 bg-indigo-200/10 shadow-md"
initial={{ opacity: 0, width: 100, scale: 1.2, translateX: 384 }} initial={{ opacity: 0, width: 100, scale: 1.2, translateX: 384 }}
animate={{ opacity: 1, scale: 1.1 }} animate={{ opacity: 1, scale: 1.1 }}
transition={{ type: "spring", delay: 1 }} transition={{ type: "spring", delay: 1 }}
/> />
<motion.div <motion.div
className="absolute bg-indigo-500 text-slate-100 py-1 px-3 rounded-full z-20 text-sm" className="absolute z-20 rounded-full bg-indigo-500 py-1 px-3 text-sm text-slate-100"
initial={{ initial={{
opacity: 0, opacity: 0,
right: 190, right: 190,
@ -61,10 +61,10 @@ const Hero: React.VoidFunctionComponent = () => {
transition={{ type: "spring", delay: 2 }} transition={{ type: "spring", delay: 2 }}
> >
Perfect! 🤩 Perfect! 🤩
<ScribbleArrow className="absolute text-slate-400 -right-8 top-3" /> <ScribbleArrow className="absolute -right-8 top-3 text-slate-400" />
</motion.div> </motion.div>
<motion.div <motion.div
className="shadow-lg rounded-lg" className="rounded-lg shadow-lg"
transition={{ type: "spring", delay: 0.5 }} transition={{ type: "spring", delay: 0.5 }}
initial={{ opacity: 0, translateY: -100 }} initial={{ opacity: 0, translateY: -100 }}
animate={{ opacity: 1, translateY: 0 }} animate={{ opacity: 1, translateY: 0 }}

2
components/home/how-it-works.tsx
View file

@ -3,7 +3,7 @@ import * as React from "react";
const HowItWorks: React.VoidFunctionComponent = () => { const HowItWorks: React.VoidFunctionComponent = () => {
return ( return (
<div className="bg-gradient-to-b from-transparent via-white to-white"> <div className="bg-gradient-to-b from-transparent via-white to-white">
<div className="py-16 px-8 mx-auto max-w-7xl"> <div className="mx-auto max-w-7xl py-16 px-8">
<h2 className="heading text-center">How it works</h2> <h2 className="heading text-center">How it works</h2>
<p className="subheading text-center">It&#39;s simple!</p> <p className="subheading text-center">It&#39;s simple!</p>
<div className="grid grid-cols-3 gap-16"> <div className="grid grid-cols-3 gap-16">

12
components/home/poll-demo.tsx
View file

@ -43,15 +43,15 @@ const PollDemo: React.VoidFunctionComponent = () => {
return ( return (
<div <div
className="rounded-lg bg-white border shadow-md" className="rounded-lg border bg-white shadow-md"
style={{ width: 600 }} style={{ width: 600 }}
> >
<div className="flex border-b shadow-sm"> <div className="flex border-b shadow-sm">
<div <div
className="flex items-center pl-4 pr-2 py-4 shrink-0 font-medium" className="flex shrink-0 items-center py-4 pl-4 pr-2 font-medium"
style={{ width: sidebarWidth }} style={{ width: sidebarWidth }}
> >
<div className="grow h-full flex items-end"> <div className="flex h-full grow items-end">
{t("participantCount", { count: participants.length })} {t("participantCount", { count: participants.length })}
</div> </div>
</div> </div>
@ -66,7 +66,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
return ( return (
<div <div
key={i} key={i}
className="py-4 text-center shrink-0 transition-colors" className="shrink-0 py-4 text-center transition-colors"
style={{ width: 100 }} style={{ width: 100 }}
> >
<DateCard <DateCard
@ -84,7 +84,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
{participants.map((participant, i) => ( {participants.map((participant, i) => (
<div className="flex h-14" key={i}> <div className="flex h-14" key={i}>
<div <div
className="flex items-center px-4 shrink-0" className="flex shrink-0 items-center px-4"
style={{ width: sidebarWidth }} style={{ width: sidebarWidth }}
> >
<UserAvater <UserAvater
@ -101,7 +101,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
return ( return (
<div <div
key={i} key={i}
className="justify-center items-center flex shrink-0" className="flex shrink-0 items-center justify-center"
style={{ width: 100 }} style={{ width: 100 }}
> >
{participant.votes.some((vote) => vote === i) ? ( {participant.votes.some((vote) => vote === i) ? (

6
components/home/stats.tsx
View file

@ -8,15 +8,15 @@ const Stats: React.VoidFunctionComponent = () => {
<div className="py-16"> <div className="py-16">
<h2 className="heading text-center">Stats</h2> <h2 className="heading text-center">Stats</h2>
<p className="subheading text-center">100,000+ polls created</p> <p className="subheading text-center">100,000+ polls created</p>
<div className="flex space-x-3 justify-center"> <div className="flex justify-center space-x-3">
<Link href="/new"> <Link href="/new">
<a className="focus:ring-2 focus:ring-indigo-200 transition-all text-white bg-indigo-500 hover:bg-indigo-500/90 active:bg-indigo-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg"> <a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90">
{t("getStarted")} {t("getStarted")}
</a> </a>
</Link> </Link>
<Link href="/demo"> <Link href="/demo">
<a <a
className="text-white focus:ring-2 focus:ring-indigo-200 transition-all bg-slate-500 hover:bg-slate-500/90 active:bg-slate-600/90 px-5 py-3 font-semibold hover:text-white hover:no-underline shadow-sm hover:shadow-md rounded-lg" className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-slate-600/90"
rel="nofollow" rel="nofollow"
> >
{t("viewDemo")} {t("viewDemo")}

10
components/modal/modal.tsx
View file

@ -35,13 +35,13 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
<Transition appear={true} as={React.Fragment} show={visible}> <Transition appear={true} as={React.Fragment} show={visible}>
<Dialog <Dialog
open={visible} open={visible}
className="fixed z-40 inset-0 overflow-y-auto" className="fixed inset-0 z-40 overflow-y-auto"
initialFocus={initialFocusRef} initialFocus={initialFocusRef}
onClose={() => { onClose={() => {
if (overlayClosable) onCancel?.(); if (overlayClosable) onCancel?.();
}} }}
> >
<div className="flex items-center justify-center min-h-screen"> <div className="flex min-h-screen items-center justify-center">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-200" enter="ease-out duration-200"
@ -62,13 +62,13 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<div <div
className="inline-block w-fit my-8 mx-4 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-xl" className="my-8 mx-4 inline-block w-fit transform overflow-hidden rounded-xl bg-white text-left align-middle shadow-xl transition-all"
onMouseDown={(e) => { onMouseDown={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
> >
{content ?? ( {content ?? (
<div className="p-4 max-w-lg"> <div className="max-w-lg p-4">
{title ? <Dialog.Title>{title}</Dialog.Title> : null} {title ? <Dialog.Title>{title}</Dialog.Title> : null}
{description ? ( {description ? (
<Dialog.Description>{description}</Dialog.Description> <Dialog.Description>{description}</Dialog.Description>
@ -76,7 +76,7 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
</div> </div>
)} )}
{footer ?? ( {footer ?? (
<div className="px-4 space-x-3 h-14 flex justify-end bg-slate-50 items-center border-t"> <div className="flex h-14 items-center justify-end space-x-3 border-t bg-slate-50 px-4">
{cancelText ? ( {cancelText ? (
<Button <Button
ref={initialFocusRef} ref={initialFocusRef}

2
components/name-input.tsx
View file

@ -17,7 +17,7 @@ const NameInput: React.ForwardRefRenderFunction<
NameInputProps NameInputProps
> = ({ value, defaultValue, className, ...forwardProps }, ref) => { > = ({ value, defaultValue, className, ...forwardProps }, ref) => {
return ( return (
<div className="flex items-center relative"> <div className="relative flex items-center">
<UserAvater <UserAvater
name={value ?? defaultValue ?? ""} name={value ?? defaultValue ?? ""}
className="absolute left-2" className="absolute left-2"

22
components/page-layout.tsx
View file

@ -28,9 +28,9 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
<Link href="/"> <Link href="/">
<a <a
className={clsx( className={clsx(
"text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors", "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
{ {
"font-bold text-gray-600 pointer-events-none": "pointer-events-none font-bold text-gray-600":
pathname === "/home", pathname === "/home",
}, },
)} )}
@ -41,7 +41,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
<Link href="https://blog.rallly.co"> <Link href="https://blog.rallly.co">
<a <a
className={clsx( className={clsx(
"text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors", "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
)} )}
> >
Blog Blog
@ -50,9 +50,9 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
<Link href="/support"> <Link href="/support">
<a <a
className={clsx( className={clsx(
"text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors", "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
{ {
"font-bold text-gray-600 pointer-events-none": "pointer-events-none font-bold text-gray-600":
pathname === "/support", pathname === "/support",
}, },
)} )}
@ -61,7 +61,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
</a> </a>
</Link> </Link>
<Link href="https://github.com/lukevella/rallly"> <Link href="https://github.com/lukevella/rallly">
<a className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors"> <a className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
<Github className="w-8" /> <Github className="w-8" />
</a> </a>
</Link> </Link>
@ -78,25 +78,25 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
<Head> <Head>
<title>Rallly - Support</title> <title>Rallly - Support</title>
</Head> </Head>
<div className="py-8 flex items-center px-8 max-w-7xl mx-auto"> <div className="mx-auto flex max-w-7xl items-center py-8 px-8">
<div className="grow"> <div className="grow">
<div className="inline-block relative"> <div className="relative inline-block">
<Link href="/"> <Link href="/">
<a> <a>
<Logo className="w-40 text-indigo-500" alt="Rallly" /> <Logo className="w-40 text-indigo-500" alt="Rallly" />
</a> </a>
</Link> </Link>
<span className="absolute transition-colors text-sm text-slate-400 -bottom-6 right-0"> <span className="absolute -bottom-6 right-0 text-sm text-slate-400 transition-colors">
Yes&mdash;with 3 <em>L</em>s Yes&mdash;with 3 <em>L</em>s
</span> </span>
</div> </div>
</div> </div>
<Menu className="hidden md:flex space-x-8 items-center" /> <Menu className="hidden items-center space-x-8 md:flex" />
{breakpoint === "sm" ? ( {breakpoint === "sm" ? (
<Popover <Popover
placement="left-start" placement="left-start"
trigger={ trigger={
<button className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors"> <button className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
<DotsVertical className="w-5" /> <DotsVertical className="w-5" />
</button> </button>
} }

24
components/page-layout/footer.tsx
View file

@ -10,9 +10,9 @@ const Footer: React.VoidFunctionComponent = () => {
const { t } = useTranslation("homepage"); const { t } = useTranslation("homepage");
return ( return (
<div className="mt-16 bg-slate-50/70"> <div className="mt-16 bg-slate-50/70">
<div className="py-20 px-8 mx-auto max-w-7xl grid grid-cols-10 gap-8"> <div className="mx-auto grid max-w-7xl grid-cols-10 gap-8 py-20 px-8">
<div className="col-span-12 md:col-span-4"> <div className="col-span-12 md:col-span-4">
<Logo className="w-32 mb-4 text-gray-400" /> <Logo className="mb-4 w-32 text-gray-400" />
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
<Trans <Trans
t={t} t={t}
@ -20,7 +20,7 @@ const Footer: React.VoidFunctionComponent = () => {
components={{ components={{
a: ( a: (
<a <a
className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose" className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
href="https://twitter.com/imlukevella" href="https://twitter.com/imlukevella"
/> />
), ),
@ -46,11 +46,11 @@ const Footer: React.VoidFunctionComponent = () => {
</div> </div>
</div> </div>
<div className="col-span-6 md:col-span-2"> <div className="col-span-6 md:col-span-2">
<div className="font-medium mb-4">Links</div> <div className="mb-4 font-medium">Links</div>
<ul> <ul>
<li> <li>
<a <a
className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose" className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
href="https://github.com/lukevella/rallly/discussions" href="https://github.com/lukevella/rallly/discussions"
> >
Forum Forum
@ -58,21 +58,21 @@ const Footer: React.VoidFunctionComponent = () => {
</li> </li>
<li> <li>
<Link href="/blog"> <Link href="/blog">
<a className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"> <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
Blog Blog
</a> </a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/support"> <Link href="/support">
<a className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"> <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
Support Support
</a> </a>
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/privacy-policy"> <Link href="/privacy-policy">
<a className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose"> <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
Privacy Policy Privacy Policy
</a> </a>
</Link> </Link>
@ -80,11 +80,11 @@ const Footer: React.VoidFunctionComponent = () => {
</ul> </ul>
</div> </div>
<div className="col-span-6 md:col-span-2"> <div className="col-span-6 md:col-span-2">
<div className="font-medium mb-4">Follow</div> <div className="mb-4 font-medium">Follow</div>
<ul> <ul>
<li> <li>
<a <a
className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose" className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
href="https://github.com/lukevella/rallly" href="https://github.com/lukevella/rallly"
> >
Github Github
@ -92,7 +92,7 @@ const Footer: React.VoidFunctionComponent = () => {
</li> </li>
<li> <li>
<a <a
className="text-gray-400 hover:text-gray-800 hover:no-underline font-normal leading-loose" className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
href="https://twitter.com/ralllyco" href="https://twitter.com/ralllyco"
> >
Twitter Twitter
@ -105,7 +105,7 @@ const Footer: React.VoidFunctionComponent = () => {
href="https://vercel.com?utm_source=rallly&utm_campaign=oss" href="https://vercel.com?utm_source=rallly&utm_campaign=oss"
className="inline-block text-white" className="inline-block text-white"
> >
<span className="inline-block w-full text-right italic text-gray-400 text-xs mb-1"> <span className="mb-1 inline-block w-full text-right text-xs italic text-gray-400">
Powered by Powered by
</span> </span>
<Vercel className="w-24" /> <Vercel className="w-24" />

8
components/poll/legacy-poll-notice.tsx
View file

@ -28,16 +28,16 @@ const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({
}; };
return ( return (
<div className="md:flex md:items-center space-y-3 md:space-y-0 text-sm shadow-sm rounded-lg mb-4 border md:space-x-4 p-2 bg-yellow-200 text-yellow-700"> <div className="mb-4 space-y-3 rounded-lg border bg-yellow-200 p-2 text-sm text-yellow-700 shadow-sm md:flex md:items-center md:space-y-0 md:space-x-4">
<div className="flex space-x-3 md:grow md:items-center"> <div className="flex space-x-3 md:grow md:items-center">
<div className="bg-yellow-400 w-9 h-9 p-2 rounded-lg"> <div className="h-9 w-9 rounded-lg bg-yellow-400 p-2">
<Speakerphone className="w-5" /> <Speakerphone className="w-5" />
</div> </div>
<div className="grow"> <div className="grow">
Notice anything different? We&apos;ve announced a new version release. Notice anything different? We&apos;ve announced a new version release.
</div> </div>
</div> </div>
<div className="flex space-x-3 ml-12"> <div className="ml-12 flex space-x-3">
<a <a
onClick={() => setCookie()} onClick={() => setCookie()}
className="btn-default border-0" className="btn-default border-0"
@ -47,7 +47,7 @@ const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({
</a> </a>
<button <button
onClick={() => setCookie()} onClick={() => setCookie()}
className="py-2 px-3 transition-colors bg-yellow-300 rounded-lg active:bg-yellow-400" className="rounded-lg bg-yellow-300 py-2 px-3 transition-colors active:bg-yellow-400"
> >
Hide Hide
</button> </button>

2
components/poll/manage-poll.tsx
View file

@ -1,6 +1,6 @@
import { Placement } from "@popperjs/core"; import { Placement } from "@popperjs/core";
import { format } from "date-fns"; import { format } from "date-fns";
import { Trans,useTranslation } from "next-i18next"; import { Trans, useTranslation } from "next-i18next";
import * as React from "react"; import * as React from "react";
import { decodeDateOption, encodeDateOption } from "utils/date-time-utils"; import { decodeDateOption, encodeDateOption } from "utils/date-time-utils";

22
components/poll/mobile-poll/mobile-poll.tsx
View file

@ -92,7 +92,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
return ( return (
<form <form
className="border-t border-b shadow-sm bg-white" className="border-t border-b bg-white shadow-sm"
onSubmit={handleSubmit((data) => { onSubmit={handleSubmit((data) => {
return new Promise<ParticipantForm>((resolve, reject) => { return new Promise<ParticipantForm>((resolve, reject) => {
if (selectedParticipant) { if (selectedParticipant) {
@ -124,7 +124,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
})} })}
> >
{checkboxGroupHack} {checkboxGroupHack}
<div className="sticky top-0 px-4 py-2 space-y-2 flex flex-col border-b z-30 bg-gray-50"> <div className="sticky top-0 z-30 flex flex-col space-y-2 border-b bg-gray-50 px-4 py-2">
{mode === "default" ? ( {mode === "default" ? (
<div className="flex space-x-3"> <div className="flex space-x-3">
<Listbox <Listbox
@ -135,7 +135,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
<Listbox.Button className="btn-default w-full text-left"> <Listbox.Button className="btn-default w-full text-left">
<div className="grow"> <div className="grow">
{selectedParticipant ? ( {selectedParticipant ? (
<div className="flex space-x-2 items-center"> <div className="flex items-center space-x-2">
<UserAvater name={selectedParticipant.name} /> <UserAvater name={selectedParticipant.name} />
<span>{selectedParticipant.name}</span> <span>{selectedParticipant.name}</span>
</div> </div>
@ -146,7 +146,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
<ChevronDown className="h-5" /> <ChevronDown className="h-5" />
</Listbox.Button> </Listbox.Button>
<TransitionPopInOut> <TransitionPopInOut>
<Listbox.Options className="menu-items w-full max-h-72 overflow-auto"> <Listbox.Options className="menu-items max-h-72 w-full overflow-auto">
<Listbox.Option value={undefined} className={styleMenuItem}> <Listbox.Option value={undefined} className={styleMenuItem}>
Show all Show all
</Listbox.Option> </Listbox.Option>
@ -156,7 +156,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
value={participant.id} value={participant.id}
className={styleMenuItem} className={styleMenuItem}
> >
<div className="flex space-x-2 items-center"> <div className="flex items-center space-x-2">
<UserAvater name={participant.name} /> <UserAvater name={participant.name} />
<span>{participant.name}</span> <span>{participant.name}</span>
</div> </div>
@ -240,7 +240,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
return ( return (
<div <div
key={option.id} key={option.id}
className="px-4 py-2 flex items-center space-x-4" className="flex items-center space-x-4 px-4 py-2"
> >
<div> <div>
<DateCard <DateCard
@ -257,11 +257,11 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
/> />
) : null} ) : null}
<div className="grow space-y-1 items-center"> <div className="grow items-center space-y-1">
<div> <div>
<span <span
className={clsx( className={clsx(
"inline-block px-2 leading-relaxed border rounded-full text-xs", "inline-block rounded-full border px-2 text-xs leading-relaxed",
{ {
"border-slate-200": numVotes !== highScore, "border-slate-200": numVotes !== highScore,
"border-rose-500 text-rose-500": numVotes === highScore, "border-rose-500 text-rose-500": numVotes === highScore,
@ -286,14 +286,14 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
); );
})} })}
{option.votes.length > 6 ? ( {option.votes.length > 6 ? (
<span className="inline-flex ring-1 ring-white items-center justify-center rounded-full font-medium bg-slate-100 text-xs px-1 h-5"> <span className="inline-flex h-5 items-center justify-center rounded-full bg-slate-100 px-1 text-xs font-medium ring-1 ring-white">
+{option.votes.length - 5} +{option.votes.length - 5}
</span> </span>
) : null} ) : null}
</div> </div>
) : null} ) : null}
</div> </div>
<div className="w-12 items-center justify-center h-14 flex"> <div className="flex h-14 w-12 items-center justify-center">
{mode === "edit" ? ( {mode === "edit" ? (
<input <input
type="checkbox" type="checkbox"
@ -314,7 +314,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
})} })}
</div> </div>
{mode === "edit" ? ( {mode === "edit" ? (
<div className="p-2 border-t flex space-x-3"> <div className="flex space-x-3 border-t p-2">
<Button className="grow" onClick={() => setMode("default")}> <Button className="grow" onClick={() => setMode("default")}>
Cancel Cancel
</Button> </Button>

2
components/poll/notifications-toggle.tsx
View file

@ -40,7 +40,7 @@ const NotificationsToggle: React.VoidFunctionComponent<NotificationsToggleProps>
}} }}
components={{ components={{
b: ( b: (
<span className="text-indigo-300 whitespace-nowrap font-medium font-mono " /> <span className="whitespace-nowrap font-mono font-medium text-indigo-300 " />
), ),
}} }}
/> />

8
components/poll/participant-row-form.tsx
View file

@ -74,7 +74,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
}); });
reset(); reset();
})} })}
className={clsx("flex shrink-0 h-14", className)} className={clsx("flex h-14 shrink-0", className)}
> >
{checkboxGroupHack} {checkboxGroupHack}
<div className="flex items-center px-2" style={{ width: sidebarWidth }}> <div className="flex items-center px-2" style={{ width: sidebarWidth }}>
@ -88,7 +88,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
<NameInput <NameInput
autoFocus={true} autoFocus={true}
className={clsx("w-full", { className={clsx("w-full", {
"animate-wiggle input-error": "input-error animate-wiggle":
errors.name && submitCount > 0, errors.name && submitCount > 0,
})} })}
placeholder="Your name" placeholder="Your name"
@ -114,7 +114,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
<div <div
key={option.id} key={option.id}
className={clsx( className={clsx(
"flex justify-center items-center shrink-0 transition-colors", "flex shrink-0 items-center justify-center transition-colors",
{ {
"bg-slate-50": activeOptionId === option.id, "bg-slate-50": activeOptionId === option.id,
}, },
@ -160,7 +160,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
); );
})} })}
</ControlledScrollDiv> </ControlledScrollDiv>
<div className="flex items-center px-2 space-x-2 transition-all"> <div className="flex items-center space-x-2 px-2 transition-all">
<Tooltip content="Save" placement="top"> <Tooltip content="Save" placement="top">
<Button <Button
htmlType="submit" htmlType="submit"

8
components/poll/participant-row.tsx
View file

@ -81,11 +81,11 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
return ( return (
<div <div
key={participant.id} key={participant.id}
className="group flex hover:bg-slate-50 h-14 transition-colors" className="group flex h-14 transition-colors hover:bg-slate-50"
> >
{deleteParticipantConfirModal} {deleteParticipantConfirModal}
<div <div
className="flex items-center px-4 shrink-0" className="flex shrink-0 items-center px-4"
style={{ width: sidebarWidth }} style={{ width: sidebarWidth }}
> >
<UserAvater className="mr-2" name={participant.name} /> <UserAvater className="mr-2" name={participant.name} />
@ -99,7 +99,7 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
<div <div
key={option.id} key={option.id}
className={clsx( className={clsx(
"justify-center items-center flex shrink-0 transition-colors", "flex shrink-0 items-center justify-center transition-colors",
{ {
"bg-slate-50": activeOptionId === option.id, "bg-slate-50": activeOptionId === option.id,
}, },
@ -122,7 +122,7 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
{!poll.closed ? ( {!poll.closed ? (
<div <div
style={{ width: actionColumnWidth }} style={{ width: actionColumnWidth }}
className="flex items-center overflow-hidden px-2 opacity-0 group-hover:opacity-100 delay-100 transition-all space-x-2" className="flex items-center space-x-2 overflow-hidden px-2 opacity-0 transition-all delay-100 group-hover:opacity-100"
> >
<Button <Button
icon={<Pencil />} icon={<Pencil />}

6
components/poll/poll-subheader.tsx
View file

@ -45,13 +45,13 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
&nbsp; &nbsp;
{poll.role === "admin" ? ( {poll.role === "admin" ? (
poll.verified ? ( poll.verified ? (
<span className="cursor-default inline-block border px-1 rounded-lg text-sm border-green-400 bg-green-50 text-green-500"> <span className="inline-block cursor-default rounded-lg border border-green-400 bg-green-50 px-1 text-sm text-green-500">
Verified Verified
</span> </span>
) : ( ) : (
<Popover <Popover
trigger={ trigger={
<button className="inline-block border px-2 rounded-lg text-sm hover:shadow-sm transition-colors hover:text-slate-700 hover:bg-white text-slate-400 active:bg-gray-100"> <button className="inline-block rounded-lg border px-2 text-sm text-slate-400 transition-colors hover:bg-white hover:text-slate-700 hover:shadow-sm active:bg-gray-100">
Unverified Unverified
</button> </button>
} }
@ -64,7 +64,7 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
values={{ email: poll.user.email }} values={{ email: poll.user.email }}
components={{ components={{
b: ( b: (
<span className="text-indigo-500 font-medium font-mono whitespace-nowrap" /> <span className="whitespace-nowrap font-mono font-medium text-indigo-500" />
), ),
}} }}
/> />

22
components/poll/poll.tsx
View file

@ -171,17 +171,17 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
}} }}
> >
<div <div
className="relative max-w-full min-w-full" // Don't add styles like border, margin, padding – that can mess up the sizing calculations className="relative min-w-full max-w-full" // Don't add styles like border, margin, padding – that can mess up the sizing calculations
style={{ width: `min(${pollWidth}px, calc(100vw - 3rem))` }} style={{ width: `min(${pollWidth}px, calc(100vw - 3rem))` }}
ref={ref} ref={ref}
> >
<div className="md:rounded-lg shadow-sm bg-white border-t border-b md:border"> <div className=" border-t border-b bg-white shadow-sm md:rounded-lg md:border">
<div className="shadow-sm shadow-slate-50 bg-white/80 backdrop-blur-md rounded-t-lg border-gray-200 border-b sticky top-0 z-10"> <div className="sticky top-0 z-10 rounded-t-lg border-b border-gray-200 bg-white/80 shadow-sm shadow-slate-50 backdrop-blur-md">
{role !== "readOnly" ? ( {role !== "readOnly" ? (
<div className="flex px-4 h-14 items-center justify-end space-x-4 border-b bg-gray-50 rounded-t-lg"> <div className="flex h-14 items-center justify-end space-x-4 rounded-t-lg border-b bg-gray-50 px-4">
{timeZone ? ( {timeZone ? (
<div className="flex items-center grow"> <div className="flex grow items-center">
<div className="text-sm mr-2 font-medium text-slate-500"> <div className="mr-2 text-sm font-medium text-slate-500">
{t("timeZone")} {t("timeZone")}
</div> </div>
<TimeZonePicker <TimeZonePicker
@ -191,7 +191,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
/> />
</div> </div>
) : null} ) : null}
<div className="shrink-0 flex"> <div className="flex shrink-0">
{!shouldShowNewParticipantForm && !poll.closed ? ( {!shouldShowNewParticipantForm && !poll.closed ? (
<Button <Button
type="primary" type="primary"
@ -208,10 +208,10 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
) : null} ) : null}
<div className="flex"> <div className="flex">
<div <div
className="flex items-center pl-4 pr-2 py-4 shrink-0 font-medium" className="flex shrink-0 items-center py-4 pl-4 pr-2 font-medium"
style={{ width: sidebarWidth }} style={{ width: sidebarWidth }}
> >
<div className="grow h-full flex items-end"> <div className="flex h-full grow items-end">
{t("participantCount", { count: participants.length })} {t("participantCount", { count: participants.length })}
</div> </div>
<TransitionPopInOut show={scrollPosition > 0}> <TransitionPopInOut show={scrollPosition > 0}>
@ -232,7 +232,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
<div <div
key={option.id} key={option.id}
className={clsx( className={clsx(
"py-4 text-center shrink-0 transition-colors", "shrink-0 py-4 text-center transition-colors",
{ {
"bg-slate-50": activeOptionId === option.id, "bg-slate-50": activeOptionId === option.id,
}, },
@ -281,7 +281,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
}} }}
> >
{didUsePagination ? ( {didUsePagination ? (
<ArrowRight className="w-4 h-4" /> <ArrowRight className="h-4 w-4" />
) : ( ) : (
`+${numberOfInvisibleColumns} more…` `+${numberOfInvisibleColumns} more…`
)} )}

2
components/poll/score.tsx
View file

@ -17,7 +17,7 @@ const Score: React.VoidFunctionComponent<ScoreProps> = ({
return ( return (
<div <div
className={clsx( className={clsx(
" rounded-full text-xs w-5 h-5 flex justify-center items-center shadow-slate-200 shadow-sm transition-colors z-20", " z-20 flex h-5 w-5 items-center justify-center rounded-full text-xs shadow-sm shadow-slate-200 transition-colors",
{ {
"bg-rose-500 text-white": highlight, "bg-rose-500 text-white": highlight,
"bg-slate-200 text-slate-500": !highlight, "bg-slate-200 text-slate-500": !highlight,

2
components/poll/time-range.tsx
View file

@ -15,7 +15,7 @@ const TimeRange: React.VoidFunctionComponent<TimeRangeProps> = ({
return ( return (
<div <div
className={clsx( className={clsx(
"inline-block font-mono text-xs text-right pr-2 relative after:content-[''] after:absolute after:w-1 after:h-4 after:border-t after:border-r after:border-b after:border-slate-300 after:top-2 after:right-0", "relative inline-block pr-2 text-right font-mono text-xs after:absolute after:top-2 after:right-0 after:h-4 after:w-1 after:border-t after:border-r after:border-b after:border-slate-300 after:content-['']",
className, className,
)} )}
> >

2
components/poll/truncated-linkify.tsx
View file

@ -22,7 +22,7 @@ export const truncateLink = (href: string, text: string, key: number) => {
<Tooltip <Tooltip
key={key} key={key}
content={ content={
<div className="text-xs font-mono max-w-md break-all">{href}</div> <div className="max-w-md break-all font-mono text-xs">{href}</div>
} }
> >
<a href={href}>{finalText}</a> <a href={href}>{finalText}</a>

6
components/poll/user-avatar.tsx
View file

@ -91,11 +91,11 @@ const UserAvater: React.VoidFunctionComponent<UserAvaterProps> = ({
return ( return (
<span <span
className={clsx( className={clsx(
"inline-block w-5 h-5 text-white rounded-full shrink-0 text-center", "inline-block h-5 w-5 shrink-0 rounded-full text-center text-white",
color, color,
{ {
"w-5 h-5 text-xs leading-5": size === "default", "h-5 w-5 text-xs leading-5": size === "default",
"w-10 h-10 leading-10": size === "large", "h-10 w-10 leading-10": size === "large",
}, },
className, className,
)} )}

2
components/poll/vote-icon.tsx
View file

@ -8,7 +8,7 @@ const VoteIcon: React.VoidFunctionComponent<{
if (type === "yes") { if (type === "yes") {
return <CheckCircle className="h-5 w-5 text-green-400" />; return <CheckCircle className="h-5 w-5 text-green-400" />;
} }
return <span className="inline-block bg-slate-300 w-2 h-2 rounded-full" />; return <span className="inline-block h-2 w-2 rounded-full bg-slate-300" />;
}; };
export default VoteIcon; export default VoteIcon;

2
components/popover.tsx
View file

@ -45,7 +45,7 @@ const Popover: React.VoidFunctionComponent<PopoverProps> = ({
{portal && {portal &&
ReactDOM.createPortal( ReactDOM.createPortal(
<HeadlessPopover.Panel <HeadlessPopover.Panel
className="shadow-md bg-white rounded-lg max-w-full border p-4" className="max-w-full rounded-lg border bg-white p-4 shadow-md"
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
ref={setPopperElement} ref={setPopperElement}

6
components/sharing.tsx
View file

@ -53,7 +53,7 @@ const Sharing: React.VoidFunctionComponent<SharingProps> = ({ links }) => {
const [didCopy, setDidCopy] = React.useState(false); const [didCopy, setDidCopy] = React.useState(false);
return ( return (
<div className="w-[300px] md:w-[400px]"> <div className="w-[300px] md:w-[400px]">
<div className="segment-button inline-flex mb-3"> <div className="segment-button mb-3 inline-flex">
<button <button
className={clsx({ className={clsx({
"segment-button-active": role === "participant", "segment-button-active": role === "participant",
@ -77,10 +77,10 @@ const Sharing: React.VoidFunctionComponent<SharingProps> = ({ links }) => {
{roleData["admin"].label} {roleData["admin"].label}
</button> </button>
</div> </div>
<div className="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3 mb-2"> <div className="mb-2 flex flex-col space-y-3 lg:flex-row lg:space-y-0 lg:space-x-3">
<input readOnly={true} className="input lg:w-[280px]" value={pollUrl} /> <input readOnly={true} className="input lg:w-[280px]" value={pollUrl} />
<Button <Button
className="shrink-0 w-24" className="w-24 shrink-0"
disabled={didCopy} disabled={didCopy}
onClick={() => { onClick={() => {
copyToClipboard(pollUrl); copyToClipboard(pollUrl);

26
components/standard-layout.tsx
View file

@ -8,40 +8,40 @@ import Support from "./icons/support.svg";
const StandardLayout: React.FunctionComponent = ({ children, ...rest }) => { const StandardLayout: React.FunctionComponent = ({ children, ...rest }) => {
return ( return (
<div className="relative min-h-full lg:flex bg-gray-50" {...rest}> <div className="relative min-h-full bg-gray-50 lg:flex" {...rest}>
<div className="bg-gray-100 border-b lg:border-b-0 px-4 py-2 lg:py-6 lg:px-4 lg:border-r lg:grow"> <div className="border-b bg-gray-100 px-4 py-2 lg:grow lg:border-b-0 lg:border-r lg:py-6 lg:px-4">
<div className="flex lg:float-right items-center lg:items-start lg:w-40 lg:flex-col"> <div className="flex items-center lg:float-right lg:w-40 lg:flex-col lg:items-start">
<div className="grow lg:grow-0 lg:mb-8"> <div className="grow lg:mb-8 lg:grow-0">
<Link href="/"> <Link href="/">
<a> <a>
<Logo className="text-slate-500 transition-colors w-24 lg:w-28 hover:text-indigo-500 active:text-indigo-600" /> <Logo className="w-24 text-slate-500 transition-colors hover:text-indigo-500 active:text-indigo-600 lg:w-28" />
</a> </a>
</Link> </Link>
</div> </div>
<div className="flex shrink-0 lg:block lg:w-full text-sm lg:text-base items-center lg:pb-4 lg:mb-4"> <div className="flex shrink-0 items-center text-sm lg:mb-4 lg:block lg:w-full lg:pb-4 lg:text-base">
<Link passHref={true} href="/new"> <Link passHref={true} href="/new">
<a className="flex items-center whitespace-nowrap hover:text-gray-600 hover:bg-gray-200 px-2 py-1 lg:-ml-2 rounded-md font-medium hover:no-underline space-x-2 text-gray-600 cursor-pointer transition-colors active:bg-gray-300"> <a className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-600 hover:no-underline active:bg-gray-300 lg:-ml-2">
<Pencil className="w-6 h-6 opacity-75" /> <Pencil className="h-6 w-6 opacity-75" />
<span className="hidden md:inline-block">New Poll</span> <span className="hidden md:inline-block">New Poll</span>
</a> </a>
</Link> </Link>
<a <a
href="https://blog.rallly.co" href="https://blog.rallly.co"
className="flex items-center whitespace-nowrap hover:text-gray-600 hover:bg-gray-200 px-2 py-1 lg:-ml-2 rounded-md font-medium hover:no-underline space-x-2 text-gray-600 cursor-pointer transition-colors active:bg-gray-300" className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-600 hover:no-underline active:bg-gray-300 lg:-ml-2"
> >
<Newspaper className="w-6 h-6 opacity-75" /> <Newspaper className="h-6 w-6 opacity-75" />
<span className="hidden md:inline-block">Blog</span> <span className="hidden md:inline-block">Blog</span>
</a> </a>
<Link passHref={true} href="/support"> <Link passHref={true} href="/support">
<a className="flex items-center whitespace-nowrap hover:text-gray-600 hover:bg-gray-200 px-2 py-1 lg:-ml-2 rounded-md font-medium hover:no-underline space-x-2 text-gray-600 cursor-pointer transition-colors active:bg-gray-300"> <a className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 font-medium text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-600 hover:no-underline active:bg-gray-300 lg:-ml-2">
<Support className="w-6 h-6 opacity-75" /> <Support className="h-6 w-6 opacity-75" />
<span className="hidden md:inline-block">Support</span> <span className="hidden md:inline-block">Support</span>
</a> </a>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="grow min-w-0">{children}</div> <div className="min-w-0 grow">{children}</div>
</div> </div>
); );
}; };

8
components/steps/steps.tsx
View file

@ -17,21 +17,21 @@ const Steps: React.VoidFunctionComponent<StepsProps> = ({
return ( return (
<div className={clsx("inline-flex items-center", className)}> <div className={clsx("inline-flex items-center", className)}>
<div className="font-medium text-sm tracking-tight"> <div className="text-sm font-medium tracking-tight">
{t("stepSummary", { {t("stepSummary", {
current: current + 1, current: current + 1,
total, total,
})} })}
</div> </div>
<div className="flex ml-2 items-center"> <div className="ml-2 flex items-center">
{[...Array(total)].map((_, i) => { {[...Array(total)].map((_, i) => {
return ( return (
<span <span
key={i} key={i}
className={clsx("w-2 h-2 rounded-full ml-3 transition-all", { className={clsx("ml-3 h-2 w-2 rounded-full transition-all", {
"bg-indigo-400": i <= current, "bg-indigo-400": i <= current,
"bg-gray-300": i > current, "bg-gray-300": i > current,
"ring-4 ring-indigo-200 animate-pulse": i === current, "animate-pulse ring-4 ring-indigo-200": i === current,
})} })}
/> />
); );

48
components/support.tsx
View file

@ -12,16 +12,16 @@ const Support: React.VoidFunctionComponent = () => {
const { t } = useTranslation("support"); const { t } = useTranslation("support");
return ( return (
<PageLayout> <PageLayout>
<div className="pt-16 px-8 mx-auto max-w-7xl"> <div className="mx-auto max-w-7xl px-8 pt-16">
<h1 className="text-5xl">Support</h1> <h1 className="text-5xl">Support</h1>
<div className="lg:flex py-16"> <div className="py-16 lg:flex">
<div className="grow mb-8"> <div className="mb-8 grow">
<h2 className="text-3xl mb-4">General</h2> <h2 className="mb-4 text-3xl">General</h2>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
<Trans t={t} i18nKey="howDoIShareQuestion" /> <Trans t={t} i18nKey="howDoIShareQuestion" />
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="text py-2 px-3"> <Disclosure.Panel className="text py-2 px-3">
@ -34,9 +34,9 @@ const Support: React.VoidFunctionComponent = () => {
</Disclosure> </Disclosure>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
<Trans <Trans
t={t} t={t}
i18nKey="canRalllyDoQuestion" i18nKey="canRalllyDoQuestion"
@ -57,9 +57,9 @@ const Support: React.VoidFunctionComponent = () => {
</Disclosure> </Disclosure>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
{t("legacyPollsQuestion")} {t("legacyPollsQuestion")}
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="text py-2 px-3"> <Disclosure.Panel className="text py-2 px-3">
@ -72,9 +72,9 @@ const Support: React.VoidFunctionComponent = () => {
</Disclosure> </Disclosure>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
{t("contributeQuestion")} {t("contributeQuestion")}
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="text py-2 px-3"> <Disclosure.Panel className="text py-2 px-3">
@ -87,12 +87,12 @@ const Support: React.VoidFunctionComponent = () => {
/> />
</Disclosure.Panel> </Disclosure.Panel>
</Disclosure> </Disclosure>
<h2 className="text-3xl mb-4 mt-8">Privacy & Security</h2> <h2 className="mb-4 mt-8 text-3xl">Privacy & Security</h2>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
{t("isMyDataSafeQuestion")} {t("isMyDataSafeQuestion")}
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="text py-2 px-3"> <Disclosure.Panel className="text py-2 px-3">
@ -103,12 +103,12 @@ const Support: React.VoidFunctionComponent = () => {
/> />
</Disclosure.Panel> </Disclosure.Panel>
</Disclosure> </Disclosure>
<h2 className="text-3xl mb-4 mt-8">Self-hosting</h2> <h2 className="mb-4 mt-8 text-3xl">Self-hosting</h2>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
{t("selfHostQuestion")} {t("selfHostQuestion")}
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="text py-2 px-3"> <Disclosure.Panel className="text py-2 px-3">
@ -123,9 +123,9 @@ const Support: React.VoidFunctionComponent = () => {
</Disclosure> </Disclosure>
<Disclosure <Disclosure
as="div" as="div"
className="bg-white p-2 rounded-lg mb-4 shadow-md" className="mb-4 rounded-lg bg-white p-2 shadow-md"
> >
<Disclosure.Button className="font-medium text-lg py-2 px-3 rounded-md active:bg-slate-100 block w-full text-left font-slate hover:text-indigo-500 hover:bg-slate-50 cursor-pointer"> <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
{t("canYouHelpMeSetUpRalllyQuestion")} {t("canYouHelpMeSetUpRalllyQuestion")}
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="text py-2 px-3"> <Disclosure.Panel className="text py-2 px-3">
@ -141,10 +141,10 @@ const Support: React.VoidFunctionComponent = () => {
</Disclosure.Panel> </Disclosure.Panel>
</Disclosure> </Disclosure>
</div> </div>
<div className="lg:ml-16 shrink-0 lg:w-96"> <div className="shrink-0 lg:ml-16 lg:w-96">
<div className="p-8 bg-white rounded-xl shadow-md"> <div className="rounded-xl bg-white p-8 shadow-md">
<div className="flex lg:flex-col items-start max-w-3xl"> <div className="flex max-w-3xl items-start lg:flex-col">
<Chat className="hidden sm:block w-20 text-indigo-500 shrink-0 mr-8 mb-8" /> <Chat className="mr-8 mb-8 hidden w-20 shrink-0 text-indigo-500 sm:block" />
<div> <div>
<h2 className="mb-2">{t("supportContactTitle")}</h2> <h2 className="mb-2">{t("supportContactTitle")}</h2>
<p className="text"> <p className="text">

4
components/switch.tsx
View file

@ -19,7 +19,7 @@ const Switch: React.VoidFunctionComponent<SwitchProps> = ({
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
className={clsx( className={clsx(
"relative inline-flex flex-shrink-0 h-6 w-10 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75", "relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75",
{ {
"bg-gray-200": !checked, "bg-gray-200": !checked,
"bg-green-500": checked, "bg-green-500": checked,
@ -31,7 +31,7 @@ const Switch: React.VoidFunctionComponent<SwitchProps> = ({
<span <span
aria-hidden="true" aria-hidden="true"
className={clsx( className={clsx(
"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200", "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out",
{ {
"translate-x-4": checked, "translate-x-4": checked,
"translate-x-0": !checked, "translate-x-0": !checked,

8
components/time-zone-picker/time-zone-picker.tsx
View file

@ -174,15 +174,15 @@ const TimeZonePicker: React.VoidFunctionComponent<{
}} }}
onBlur={onBlur} onBlur={onBlur}
/> />
<Combobox.Button className="absolute inset-0 w-full flex items-center cursor-default px-2 h-9 text-left"> <Combobox.Button className="absolute inset-0 flex h-9 w-full cursor-default items-center px-2 text-left">
<span className="grow truncate"> <span className="grow truncate">
{!query ? selectedTimeZone.label : null} {!query ? selectedTimeZone.label : null}
</span> </span>
<span className="flex pointer-events-none"> <span className="pointer-events-none flex">
<ChevronDown className="w-5 h-5" /> <ChevronDown className="h-5 w-5" />
</span> </span>
</Combobox.Button> </Combobox.Button>
<Combobox.Options className="absolute w-full z-50 py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg max-h-72 ring-1 ring-black ring-opacity-5 focus:outline-none"> <Combobox.Options className="absolute z-50 mt-1 max-h-72 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{filteredTimeZones.map((timeZone) => ( {filteredTimeZones.map((timeZone) => (
<Combobox.Option <Combobox.Option
key={timeZone.value} key={timeZone.value}

4
components/tooltip.tsx
View file

@ -99,7 +99,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
{...attributes.popper} {...attributes.popper}
> >
<Transition <Transition
className="px-3 py-2 rounded-md pointer-events-none bg-slate-700 text-slate-200 shadow-md" className="pointer-events-none rounded-md bg-slate-700 px-3 py-2 text-slate-200 shadow-md"
as={"div"} as={"div"}
show={debouncedValue} show={debouncedValue}
enter="transition transform duration-100" enter="transition transform duration-100"
@ -108,7 +108,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
> >
<div <div
ref={setArrowElement} ref={setArrowElement}
className="tooltip-arrow w-3 h-3 border-transparent border-[6px]" className="tooltip-arrow h-3 w-3 border-[6px] border-transparent"
style={styles.arrow} style={styles.arrow}
data-popper-arrow data-popper-arrow
></div> ></div>

1
package.json
View file

@ -74,6 +74,7 @@
"eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-simple-import-sort": "^7.0.0",
"postcss": "^8.4.6", "postcss": "^8.4.6",
"prettier": "^2.3.0", "prettier": "^2.3.0",
"prettier-plugin-tailwindcss": "^0.1.8",
"tailwindcss": "^3.0.23", "tailwindcss": "^3.0.23",
"wait-on": "^6.0.1" "wait-on": "^6.0.1"
} }

6
pages/maintenance.tsx
View file

@ -5,9 +5,9 @@ import { isInMaintenanceMode } from "../utils/constants";
const Maintenance: NextPage = () => { const Maintenance: NextPage = () => {
return ( return (
<div className="h-full bg-gray-100 flex flex-col justify-center items-center"> <div className="flex h-full flex-col items-center justify-center bg-gray-100">
<div className="bg-white text-center p-8 rounded-lg border shadow-sm w-96"> <div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
<Logo className="h-8 inline-block text-indigo-500 mb-4" /> <Logo className="mb-4 inline-block h-8 text-indigo-500" />
<div className=""> <div className="">
The site is currently under maintenance and will be back shortly… The site is currently under maintenance and will be back shortly…
</div> </div>

12
pages/new.tsx
View file

@ -148,18 +148,18 @@ const Page: NextPage<{
<Head> <Head>
<title>{formData?.eventDetails?.title ?? t("newPoll")}</title> <title>{formData?.eventDetails?.title ?? t("newPoll")}</title>
</Head> </Head>
<div className="max-w-full w-[1024px] py-4 px-3 lg:px-6"> <div className="w-[1024px] max-w-full py-4 px-3 lg:px-6">
<div className="flex space-x-4 items-center mb-4"> <div className="mb-4 flex items-center space-x-4">
<h1 className="m-0">New Poll</h1> <h1 className="m-0">New Poll</h1>
<Steps current={currentStepIndex} total={steps.length} /> <Steps current={currentStepIndex} total={steps.length} />
</div> </div>
<div className="bg-white overflow-hidden rounded-lg max-w-full w-fit shadow-sm border"> <div className="w-fit max-w-full overflow-hidden rounded-lg border bg-white shadow-sm">
{(() => { {(() => {
switch (currentStepName) { switch (currentStepName) {
case "eventDetails": case "eventDetails":
return ( return (
<PollDetailsForm <PollDetailsForm
className="px-4 pt-4 max-w-full" className="max-w-full px-4 pt-4"
name={currentStepName} name={currentStepName}
defaultValues={formData?.eventDetails} defaultValues={formData?.eventDetails}
onSubmit={handleSubmit} onSubmit={handleSubmit}
@ -180,7 +180,7 @@ const Page: NextPage<{
case "userDetails": case "userDetails":
return ( return (
<UserDetailsForm <UserDetailsForm
className="px-4 pt-4 grow" className="grow px-4 pt-4"
name={currentStepName} name={currentStepName}
defaultValues={formData?.userDetails} defaultValues={formData?.userDetails}
onSubmit={handleSubmit} onSubmit={handleSubmit}
@ -189,7 +189,7 @@ const Page: NextPage<{
); );
} }
})()} })()}
<div className="bg-slate-50 w-full justify-end px-4 py-3 flex border-t space-x-3"> <div className="flex w-full justify-end space-x-3 border-t bg-slate-50 px-4 py-3">
{currentStepIndex > 0 ? ( {currentStepIndex > 0 ? (
<Button <Button
disabled={isBusy} disabled={isBusy}

18
pages/poll.tsx
View file

@ -216,7 +216,7 @@ const PollPage: NextPage = () => {
return ( return (
<UserAvatarProvider seed={poll.pollId} names={names}> <UserAvatarProvider seed={poll.pollId} names={names}>
<StandardLayout> <StandardLayout>
<div className="max-w-full lg:w-[1024px] bg-gray-50 relative py-4 md:px-4 lg:px-8"> <div className="relative max-w-full bg-gray-50 py-4 md:px-4 lg:w-[1024px] lg:px-8">
<Head> <Head>
<title>{poll.title}</title> <title>{poll.title}</title>
<meta name="robots" content="noindex,nofollow" /> <meta name="robots" content="noindex,nofollow" />
@ -228,14 +228,14 @@ const PollPage: NextPage = () => {
}} }}
> >
<div className="mb-6 px-4 md:px-0"> <div className="mb-6 px-4 md:px-0">
<div className="md:flex md:space-x-4 items-start mb-3"> <div className="mb-3 items-start md:flex md:space-x-4">
<div className="mb-3 md:mb-0 grow"> <div className="mb-3 grow md:mb-0">
<div className="flex flex-col-reverse md:flex-row"> <div className="flex flex-col-reverse md:flex-row">
<h1 className="grow mb-2 leading-tight text-3xl"> <h1 className="mb-2 grow text-3xl leading-tight">
{preventWidows(poll.title)} {preventWidows(poll.title)}
</h1> </h1>
{poll.role === "admin" ? ( {poll.role === "admin" ? (
<div className="flex space-x-2 mb-4 md:mb-2"> <div className="mb-4 flex space-x-2 md:mb-2">
<NotificationsToggle /> <NotificationsToggle />
<ManagePoll <ManagePoll
placement={ placement={
@ -262,18 +262,18 @@ const PollPage: NextPage = () => {
</div> </div>
</div> </div>
{poll.description ? ( {poll.description ? (
<div className="text-lg leading-relaxed max-w-2xl mb-4 whitespace-pre-line w-fit shadow-sm bg-white text-slate-600 rounded-xl px-4 py-3"> <div className="mb-4 w-fit max-w-2xl whitespace-pre-line rounded-xl bg-white px-4 py-3 text-lg leading-relaxed text-slate-600 shadow-sm">
<TruncatedLinkify> <TruncatedLinkify>
{preventWidows(poll.description)} {preventWidows(poll.description)}
</TruncatedLinkify> </TruncatedLinkify>
</div> </div>
) : null} ) : null}
{poll.location ? ( {poll.location ? (
<div className="flex items-center mb-4"> <div className="mb-4 flex items-center">
<div> <div>
<LocationMarker <LocationMarker
width={20} width={20}
className="text-slate-400 mr-2" className="mr-2 text-slate-400"
/> />
</div> </div>
<TruncatedLinkify>{poll.location}</TruncatedLinkify> <TruncatedLinkify>{poll.location}</TruncatedLinkify>
@ -281,7 +281,7 @@ const PollPage: NextPage = () => {
) : null} ) : null}
</div> </div>
{poll.closed ? ( {poll.closed ? (
<div className="bg-sky-100 text-sky-700 py-3 px-4 md:rounded-lg shadow-sm mb-4 flex items-center"> <div className="mb-4 flex items-center bg-sky-100 py-3 px-4 text-sky-700 shadow-sm md:rounded-lg">
<div className="mr-3 rounded-md"> <div className="mr-3 rounded-md">
<LockClosed className="w-5" /> <LockClosed className="w-5" />
</div> </div>

2
pages/privacy-policy.tsx
View file

@ -6,7 +6,7 @@ import PageLayout from "@/components/page-layout";
const PrivacyPolicy = () => { const PrivacyPolicy = () => {
return ( return (
<PageLayout> <PageLayout>
<div className="p-8 my-16 mx-auto max-w-3xl bg-white shadow-md rounded-lg prose prose-"> <div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
<h1>Privacy Policy</h1> <h1>Privacy Policy</h1>
<p>Last updated: April 04, 2022</p> <p>Last updated: April 04, 2022</p>
<p> <p>

42
style.css
View file

@ -19,7 +19,7 @@
h3, h3,
h4, h4,
h5 { h5 {
@apply font-sans font-semibold mb-4 text-slate-700; @apply mb-4 font-sans font-semibold text-slate-700;
} }
h1 { h1 {
@apply text-2xl; @apply text-2xl;
@ -31,17 +31,17 @@
@apply outline-none; @apply outline-none;
} }
a { a {
@apply text-indigo-500 font-medium hover:underline hover:text-indigo-400; @apply font-medium text-indigo-500 hover:text-indigo-400 hover:underline;
} }
label { label {
@apply block text-slate-800 text-sm mb-1; @apply mb-1 block text-sm text-slate-800;
} }
button { button {
@apply focus:outline-none focus:ring-indigo-600; @apply focus:outline-none focus:ring-indigo-600;
} }
#portal { #portal {
@apply absolute w-full z-50; @apply absolute z-50 w-full;
} }
} }
@ -50,7 +50,7 @@
@apply mb-4; @apply mb-4;
} }
.input { .input {
@apply appearance-none placeholder:text-slate-400 px-2 py-1 border border-gray-200 rounded-md text-slate-700 shadow-sm focus:ring-indigo-500 focus:ring-1 focus:border-indigo-500; @apply appearance-none rounded-md border border-gray-200 px-2 py-1 text-slate-700 shadow-sm placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500;
} }
input.input { input.input {
@apply h-9; @apply h-9;
@ -59,26 +59,26 @@
@apply input px-3 py-3; @apply input px-3 py-3;
} }
.input-error { .input-error {
@apply focus:ring-rose-500 focus:border-rose-400 bg-rose-50 border-rose-500 placeholder:text-rose-500; @apply border-rose-500 bg-rose-50 placeholder:text-rose-500 focus:border-rose-400 focus:ring-rose-500;
} }
.checkbox { .checkbox {
@apply focus:ring-indigo-500 h-4 w-4 text-indigo-500 border-slate-300 rounded cursor-pointer; @apply h-4 w-4 cursor-pointer rounded border-slate-300 text-indigo-500 focus:ring-indigo-500;
} }
.btn { .btn {
@apply inline-flex justify-center items-center h-9 px-3 border shadow-sm rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all whitespace-nowrap; @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md border px-3 font-medium shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-1;
} }
a.btn { a.btn {
@apply hover:no-underline; @apply hover:no-underline;
} }
.btn-default { .btn-default {
@apply btn bg-white active:bg-gray-100 focus:ring-offset-0 border-gray-300 focus:border-transparent text-gray-700 focus:ring-indigo-500 hover:text-indigo-500; @apply btn border-gray-300 bg-white text-gray-700 hover:text-indigo-500 focus:border-transparent focus:ring-indigo-500 focus:ring-offset-0 active:bg-gray-100;
} }
.btn-danger { .btn-danger {
@apply btn border-rose-600 text-white bg-rose-500 hover:bg-rose-600 focus:ring-rose-500; @apply btn border-rose-600 bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500;
} }
.btn-link { .btn-link {
@apply text-indigo-500 inline-flex items-center underline; @apply inline-flex items-center text-indigo-500 underline;
} }
.btn-default.btn-disabled { .btn-default.btn-disabled {
@apply bg-gray-50; @apply bg-gray-50;
@ -87,18 +87,18 @@
@apply pointer-events-none; @apply pointer-events-none;
} }
.btn-primary { .btn-primary {
@apply btn text-white border-indigo-600 bg-indigo-500 hover:bg-opacity-90 focus:ring-indigo-500; @apply btn border-indigo-600 bg-indigo-500 text-white hover:bg-opacity-90 focus:ring-indigo-500;
} }
a.btn-primary { a.btn-primary {
@apply text-white; @apply text-white;
} }
.segment-button { .segment-button {
@apply flex text-center h-9 shadow-sm; @apply flex h-9 text-center shadow-sm;
} }
.segment-button button { .segment-button button {
@apply grow justify-center bg-white inline-flex items-center first:border-l first:rounded-l focus:z-10 last:rounded-r border-t border-b focus:ring-2 px-4 border-r font-medium hover:bg-slate-50 active:bg-slate-100 transition-colors; @apply inline-flex grow items-center justify-center border-t border-b border-r bg-white px-4 font-medium transition-colors first:rounded-l first:border-l last:rounded-r hover:bg-slate-50 focus:z-10 focus:ring-2 active:bg-slate-100;
} }
.segment-button .segment-button-active { .segment-button .segment-button-active {
@ -110,11 +110,11 @@
} }
.menu-items { .menu-items {
@apply absolute z-30 bg-white rounded mt-1 shadow-md border focus:outline-none overflow-hidden; @apply absolute z-30 mt-1 overflow-hidden rounded border bg-white shadow-md focus:outline-none;
} }
.menu-item { .menu-item {
@apply px-4 py-2 block w-full text-left cursor-default truncate select-none; @apply block w-full cursor-default select-none truncate px-4 py-2 text-left;
} }
button[disabled] { button[disabled] {
@ -132,13 +132,13 @@
@layer components { @layer components {
.heading { .heading {
@apply text-indigo-500 text-xl; @apply text-xl text-indigo-500;
} }
.subheading { .subheading {
@apply text-4xl font-bold text-slate-800 mb-16; @apply mb-16 text-4xl font-bold text-slate-800;
} }
.heading-sm { .heading-sm {
@apply font-bold text-xl text-slate-700; @apply text-xl font-bold text-slate-700;
} }
.text { .text {
@apply text-lg leading-relaxed text-slate-500; @apply text-lg leading-relaxed text-slate-500;
@ -197,14 +197,14 @@
} }
.rbc-header a { .rbc-header a {
@apply block h-full w-full no-underline p-1 hover:text-gray-700; @apply block h-full w-full p-1 no-underline hover:text-gray-700;
} }
.rbc-day-slot .rbc-events-container { .rbc-day-slot .rbc-events-container {
@apply mr-2; @apply mr-2;
} }
.rbc-slot-selection { .rbc-slot-selection {
@apply bg-green-50 rounded-sm text-green-500; @apply rounded-sm bg-green-50 text-green-500;
} }
.rbc-header.rbc-today { .rbc-header.rbc-today {

5
yarn.lock
View file

@ -4764,6 +4764,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz" resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier-plugin-tailwindcss@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.8.tgz#ba0f606ed91959ede670303d905b99106e9e6293"
integrity sha512-hwarSBCswAXa+kqYtaAkFr3Vop9o04WOyZs0qo3NyvW8L7f1rif61wRyq0+ArmVThOuRBcJF5hjGXYk86cwemg==
prettier@^2.3.0: prettier@^2.3.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz" resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz"