mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-10 07:26:48 +02:00
Use prettier to order tailwind classes
This commit is contained in:
Luke Vella
parent
c5c2816c3d
commit
eee23c1bb5
52 changed files with 268 additions and 262 deletions
|
|
@ -44,7 +44,7 @@ const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
|
|||
"btn-danger": type === "danger",
|
||||
"btn-link": type === "link",
|
||||
"btn-disabled": disabled,
|
||||
"rounded-full p-2 h-auto": rounded,
|
||||
"h-auto rounded-full p-2": rounded,
|
||||
"w-10 p-0": !children,
|
||||
},
|
||||
className,
|
||||
|
|
@ -54,7 +54,7 @@ const Button: React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
|
|||
>
|
||||
{loading ? (
|
||||
<SpinnerIcon
|
||||
className={clsx("w-5 animate-spin inline-block", {
|
||||
className={clsx("inline-block w-5 animate-spin", {
|
||||
"mr-2": !!children,
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ const CompactButton: React.VoidFunctionComponent<CompactButtonProps> = ({
|
|||
return (
|
||||
<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}
|
||||
>
|
||||
{Icon ? <Icon className="w-3 h-3" /> : children}
|
||||
{Icon ? <Icon className="h-3 w-3" /> : children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
|
|||
leave="duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
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" />
|
||||
<div className="mb-3">
|
||||
Your privacy is important to us. We only use cookies to improve the
|
||||
browsing experience on this website.
|
||||
</div>
|
||||
<div className="flex space-x-6 items-center">
|
||||
<div className="flex items-center space-x-6">
|
||||
<Link href="/privacy-policy">
|
||||
<a className="text-slate-400 hover:text-indigo-500">Privacy Policy</a>
|
||||
</Link>
|
||||
|
|
@ -37,7 +37,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
|
|||
Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
|
||||
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
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -19,20 +19,20 @@ const DateCard: React.VoidFunctionComponent<DateCardProps> = ({
|
|||
return (
|
||||
<div
|
||||
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,
|
||||
)}
|
||||
>
|
||||
{annotation ? (
|
||||
<div className="absolute -top-3 -right-3">{annotation}</div>
|
||||
) : null}
|
||||
<div className="text-xs -mt-2 mb-[-1px] text-slate-400 relative">
|
||||
<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">
|
||||
<div className="relative -mt-2 mb-[-1px] text-xs text-slate-400">
|
||||
<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}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-red-500 text-lg -mb-1 text-center">{day}</div>
|
||||
<div className="text-gray-800 text-center text-xs uppercase font-semibold">
|
||||
<div className="-mb-1 text-center text-lg text-red-500">{day}</div>
|
||||
<div className="text-center text-xs font-semibold uppercase text-gray-800">
|
||||
{month}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const Comments: React.VoidFunctionComponent<{
|
|||
canDelete?: boolean;
|
||||
}> = ({ comments, deletedComments, onDelete, canDelete }) => {
|
||||
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) => {
|
||||
return (
|
||||
<div className="flex" key={i}>
|
||||
|
|
@ -58,9 +58,9 @@ const Comments: React.VoidFunctionComponent<{
|
|||
leave="transition transform duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
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} />
|
||||
<div className="mb-1">
|
||||
<span className="mr-1">{comment.authorName}</span>
|
||||
|
|
@ -175,8 +175,8 @@ const Discussion: React.VoidFunctionComponent<DiscussionProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="border-t border-b md:border md:rounded-lg overflow-hidden shadow-sm">
|
||||
<div className="px-4 py-2 bg-white border-b">
|
||||
<div className="overflow-hidden border-t border-b shadow-sm md:rounded-lg md:border">
|
||||
<div className="border-b bg-white px-4 py-2">
|
||||
<div className="font-medium">Comments</div>
|
||||
</div>
|
||||
{comments.length ? (
|
||||
|
|
@ -211,10 +211,10 @@ const Discussion: React.VoidFunctionComponent<DiscussionProps> = ({
|
|||
<textarea
|
||||
id="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 })}
|
||||
/>
|
||||
<div className="flex mt-1 space-x-3">
|
||||
<div className="mt-1 flex space-x-3">
|
||||
<Controller
|
||||
name="authorName"
|
||||
control={control}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const Dropdown: React.VoidFunctionComponent<DropdownProps> = ({
|
|||
ref={setPopperElement}
|
||||
style={styles.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}
|
||||
</Menu.Items>,
|
||||
|
|
@ -74,7 +74,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
|
|||
<button
|
||||
onClick={onClick}
|
||||
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,
|
||||
"text-gray-700": !active,
|
||||
|
|
@ -84,7 +84,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
|
|||
>
|
||||
{Icon && (
|
||||
<Icon
|
||||
className={clsx("w-5 h-5 mr-2", {
|
||||
className={clsx("mr-2 h-5 w-5", {
|
||||
"text-white": active,
|
||||
"text-indigo-500": !disabled,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -22,19 +22,19 @@ const ErrorPage: React.VoidFunctionComponent<ComponentProps> = ({
|
|||
}) => {
|
||||
return (
|
||||
<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>
|
||||
<title>{title}</title>
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
</Head>
|
||||
<div className="flex items-start">
|
||||
<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 ">
|
||||
{title}
|
||||
</div>
|
||||
<p>{description}</p>
|
||||
<div className="flex space-x-3 justify-center">
|
||||
<div className="flex justify-center space-x-3">
|
||||
<Link href="/" passHref={true}>
|
||||
<a className="btn-default">Go to home</a>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ export interface DateNavigationToolbarProps {
|
|||
const DateNavigationToolbar: React.VoidFunctionComponent<DateNavigationToolbarProps> =
|
||||
({ year, label, onPrevious, onToday, onNext }) => {
|
||||
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">
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="segment-button">
|
||||
<button type="button" onClick={onPrevious}>
|
||||
<ChevronLeft className="h-5" />
|
||||
|
|
|
|||
|
|
@ -81,17 +81,17 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="lg:flex overflow-hidden">
|
||||
<div className="p-4 border-b lg:border-r lg:border-b-0 shrink-0">
|
||||
<div className="overflow-hidden lg:flex">
|
||||
<div className="shrink-0 border-b p-4 lg:border-r lg:border-b-0">
|
||||
<div>
|
||||
<div className="w-full flex flex-col">
|
||||
<div className="flex space-x-4 items-center justify-center mb-3">
|
||||
<div className="flex w-full flex-col">
|
||||
<div className="mb-3 flex items-center justify-center space-x-4">
|
||||
<Button
|
||||
icon={<ChevronLeft />}
|
||||
title="Previous month"
|
||||
onClick={datepicker.prev}
|
||||
/>
|
||||
<div className="grow text-center font-medium text-lg">
|
||||
<div className="grow text-center text-lg font-medium">
|
||||
{datepicker.label}
|
||||
</div>
|
||||
<Button
|
||||
|
|
@ -105,14 +105,14 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
return (
|
||||
<div
|
||||
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)}
|
||||
</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) => {
|
||||
return (
|
||||
<button
|
||||
|
|
@ -152,13 +152,13 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
}
|
||||
}}
|
||||
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,
|
||||
"border-r": (i + 1) % 7 !== 0,
|
||||
"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,
|
||||
},
|
||||
)}
|
||||
|
|
@ -174,13 +174,13 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow flex flex-col">
|
||||
<div className="flex grow flex-col">
|
||||
<div
|
||||
className={clsx("border-b", {
|
||||
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="font-medium">Specify times</div>
|
||||
<div className="text-sm text-slate-400">
|
||||
|
|
@ -233,7 +233,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
return (
|
||||
<div
|
||||
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>
|
||||
<DateCard
|
||||
|
|
@ -249,7 +249,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex space-x-3 items-center"
|
||||
className="flex items-center space-x-3"
|
||||
>
|
||||
<TimePicker
|
||||
value={startDate}
|
||||
|
|
@ -301,7 +301,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex space-x-3 items-center">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Button
|
||||
icon={<PlusSm />}
|
||||
onClick={() => {
|
||||
|
|
@ -414,7 +414,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
) : (
|
||||
<div className="flex h-full items-center justify-center py-12">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,12 +79,12 @@ const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
|
|||
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">
|
||||
{!query ? format(value, "p") : null}
|
||||
</span>
|
||||
<span className="flex pointer-events-none">
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
<span className="pointer-events-none flex">
|
||||
<ChevronDown className="h-5 w-5" />
|
||||
</span>
|
||||
</Combobox.Button>
|
||||
{portal &&
|
||||
|
|
@ -93,7 +93,7 @@ const TimePicker: React.VoidFunctionComponent<TimePickerProps> = ({
|
|||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
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}
|
||||
</Combobox.Options>,
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ const PollOptionsForm: React.VoidFunctionComponent<
|
|||
>
|
||||
{calendarHelpModal}
|
||||
{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">
|
||||
<Controller
|
||||
control={control}
|
||||
|
|
@ -172,7 +172,7 @@ const PollOptionsForm: React.VoidFunctionComponent<
|
|||
}}
|
||||
type="button"
|
||||
>
|
||||
<Calendar className="h-5 w-5 mr-2" /> Month view
|
||||
<Calendar className="mr-2 h-5 w-5" /> Month view
|
||||
</button>
|
||||
<button
|
||||
className={clsx({
|
||||
|
|
@ -183,12 +183,12 @@ const PollOptionsForm: React.VoidFunctionComponent<
|
|||
setValue("view", "week");
|
||||
}}
|
||||
>
|
||||
<Table className="h-5 w-5 mr-2" /> Week view
|
||||
<Table className="mr-2 h-5 w-5" /> Week view
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full relative">
|
||||
<div className="relative w-full">
|
||||
<React.Suspense
|
||||
fallback={
|
||||
<FullPageLoader className="h-[400px]">Loading…</FullPageLoader>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
<div
|
||||
// onClick prop doesn't work properly. Seems like some other element is cancelling the event before it reaches this element
|
||||
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={{
|
||||
top: `calc(${props.style?.top}% + 4px)`,
|
||||
height: `calc(${props.style?.height}% - 8px)`,
|
||||
|
|
@ -104,7 +104,7 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
}}
|
||||
>
|
||||
<div>{format(props.event.start, "p")}</div>
|
||||
<div className="font-bold w-full truncate">
|
||||
<div className="w-full truncate font-bold">
|
||||
{props.event.title}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -134,14 +134,14 @@ const WeekCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
|
|||
}
|
||||
}}
|
||||
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,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className="font-normal opacity-50 mr-1">
|
||||
<span className="mr-1 font-normal opacity-50">
|
||||
{format(date, "E")}
|
||||
</span>
|
||||
<span className="font-medium">{format(date, "dd")}</span>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ const FullPageLoader: React.VoidFunctionComponent<FullPageLoaderProps> = ({
|
|||
}) => {
|
||||
return (
|
||||
<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">
|
||||
<Spinner className="h-5 mr-3 animate-spin" />
|
||||
<div className="flex items-center rounded-lg bg-indigo-500 px-4 py-3 text-sm text-white shadow-sm">
|
||||
<Spinner className="mr-3 h-5 animate-spin" />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ const Header: React.FunctionComponent<{ className?: string }> = (props) => {
|
|||
const { t } = useTranslation();
|
||||
return (
|
||||
<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}
|
||||
>
|
||||
<div className="text-base font-bold text-gray-400 uppercase">
|
||||
<div className="text-base font-bold uppercase text-gray-400">
|
||||
{t("appName")}
|
||||
</div>
|
||||
<div className="ml-2 text-xs text-gray-400">v2-alpha</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Ban from "./ban-ads.svg";
|
|||
|
||||
const Bonus: React.VoidFunctionComponent = () => {
|
||||
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>
|
||||
<p className="subheading">We're not like the others</p>
|
||||
<div className="grid grid-cols-4 gap-16">
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@ import DeviceMobile from "@/components/icons/device-mobile.svg";
|
|||
|
||||
const Features: React.VoidFunctionComponent = () => {
|
||||
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>
|
||||
<p className="subheading">Everything you need to get the job done</p>
|
||||
<div className="grid grid-cols-2 gap-12">
|
||||
<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">
|
||||
<Clock className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-400">
|
||||
<Clock className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm flex items-center">
|
||||
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
|
||||
</span>
|
||||
</h3>
|
||||
|
|
@ -28,8 +28,8 @@ const Features: React.VoidFunctionComponent = () => {
|
|||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<DeviceMobile className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-400">
|
||||
<DeviceMobile className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm">Mobile friendly design</h3>
|
||||
<p className="text">
|
||||
|
|
@ -38,8 +38,8 @@ const Features: React.VoidFunctionComponent = () => {
|
|||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<Bell className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-400">
|
||||
<Bell className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm">Notifications</h3>
|
||||
<p className="text">
|
||||
|
|
@ -48,8 +48,8 @@ const Features: React.VoidFunctionComponent = () => {
|
|||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<Chat className="w-8 h-8" />
|
||||
<div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-400">
|
||||
<Chat className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="heading-sm">Comments</h3>
|
||||
<p className="text">
|
||||
|
|
|
|||
|
|
@ -12,27 +12,27 @@ const Hero: React.VoidFunctionComponent = () => {
|
|||
const names = ["Peter", "Christine", "Samantha", "Joseph"];
|
||||
|
||||
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">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold">
|
||||
<h1 className="text-4xl font-bold sm:text-5xl">
|
||||
Schedule
|
||||
<br />
|
||||
<span className="text-indigo-500">group meetings</span>
|
||||
<br />
|
||||
with ease
|
||||
</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 forth.
|
||||
</div>
|
||||
<div className="space-x-3">
|
||||
<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")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/demo">
|
||||
<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"
|
||||
>
|
||||
{t("viewDemo")}
|
||||
|
|
@ -40,17 +40,17 @@ const Hero: React.VoidFunctionComponent = () => {
|
|||
</Link>
|
||||
</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}>
|
||||
<div className="inline-block relative">
|
||||
<div className="relative inline-block">
|
||||
<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 }}
|
||||
animate={{ opacity: 1, scale: 1.1 }}
|
||||
transition={{ type: "spring", delay: 1 }}
|
||||
/>
|
||||
<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={{
|
||||
opacity: 0,
|
||||
right: 190,
|
||||
|
|
@ -61,10 +61,10 @@ const Hero: React.VoidFunctionComponent = () => {
|
|||
transition={{ type: "spring", delay: 2 }}
|
||||
>
|
||||
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
|
||||
className="shadow-lg rounded-lg"
|
||||
className="rounded-lg shadow-lg"
|
||||
transition={{ type: "spring", delay: 0.5 }}
|
||||
initial={{ opacity: 0, translateY: -100 }}
|
||||
animate={{ opacity: 1, translateY: 0 }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import * as React from "react";
|
|||
const HowItWorks: React.VoidFunctionComponent = () => {
|
||||
return (
|
||||
<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>
|
||||
<p className="subheading text-center">It's simple!</p>
|
||||
<div className="grid grid-cols-3 gap-16">
|
||||
|
|
|
|||
|
|
@ -43,15 +43,15 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="rounded-lg bg-white border shadow-md"
|
||||
className="rounded-lg border bg-white shadow-md"
|
||||
style={{ width: 600 }}
|
||||
>
|
||||
<div className="flex border-b shadow-sm">
|
||||
<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 }}
|
||||
>
|
||||
<div className="grow h-full flex items-end">
|
||||
<div className="flex h-full grow items-end">
|
||||
{t("participantCount", { count: participants.length })}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="py-4 text-center shrink-0 transition-colors"
|
||||
className="shrink-0 py-4 text-center transition-colors"
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
<DateCard
|
||||
|
|
@ -84,7 +84,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
{participants.map((participant, i) => (
|
||||
<div className="flex h-14" key={i}>
|
||||
<div
|
||||
className="flex items-center px-4 shrink-0"
|
||||
className="flex shrink-0 items-center px-4"
|
||||
style={{ width: sidebarWidth }}
|
||||
>
|
||||
<UserAvater
|
||||
|
|
@ -101,7 +101,7 @@ const PollDemo: React.VoidFunctionComponent = () => {
|
|||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="justify-center items-center flex shrink-0"
|
||||
className="flex shrink-0 items-center justify-center"
|
||||
style={{ width: 100 }}
|
||||
>
|
||||
{participant.votes.some((vote) => vote === i) ? (
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ const Stats: React.VoidFunctionComponent = () => {
|
|||
<div className="py-16">
|
||||
<h2 className="heading text-center">Stats</h2>
|
||||
<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">
|
||||
<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")}
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/demo">
|
||||
<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"
|
||||
>
|
||||
{t("viewDemo")}
|
||||
|
|
|
|||
|
|
@ -35,13 +35,13 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
|
|||
<Transition appear={true} as={React.Fragment} show={visible}>
|
||||
<Dialog
|
||||
open={visible}
|
||||
className="fixed z-40 inset-0 overflow-y-auto"
|
||||
className="fixed inset-0 z-40 overflow-y-auto"
|
||||
initialFocus={initialFocusRef}
|
||||
onClose={() => {
|
||||
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
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-200"
|
||||
|
|
@ -62,13 +62,13 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
|
|||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<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) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{content ?? (
|
||||
<div className="p-4 max-w-lg">
|
||||
<div className="max-w-lg p-4">
|
||||
{title ? <Dialog.Title>{title}</Dialog.Title> : null}
|
||||
{description ? (
|
||||
<Dialog.Description>{description}</Dialog.Description>
|
||||
|
|
@ -76,7 +76,7 @@ const Modal: React.VoidFunctionComponent<ModalProps> = ({
|
|||
</div>
|
||||
)}
|
||||
{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 ? (
|
||||
<Button
|
||||
ref={initialFocusRef}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const NameInput: React.ForwardRefRenderFunction<
|
|||
NameInputProps
|
||||
> = ({ value, defaultValue, className, ...forwardProps }, ref) => {
|
||||
return (
|
||||
<div className="flex items-center relative">
|
||||
<div className="relative flex items-center">
|
||||
<UserAvater
|
||||
name={value ?? defaultValue ?? ""}
|
||||
className="absolute left-2"
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
|
|||
<Link href="/">
|
||||
<a
|
||||
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",
|
||||
},
|
||||
)}
|
||||
|
|
@ -41,7 +41,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
|
|||
<Link href="https://blog.rallly.co">
|
||||
<a
|
||||
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
|
||||
|
|
@ -50,9 +50,9 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
|
|||
<Link href="/support">
|
||||
<a
|
||||
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",
|
||||
},
|
||||
)}
|
||||
|
|
@ -61,7 +61,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
|
|||
</a>
|
||||
</Link>
|
||||
<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" />
|
||||
</a>
|
||||
</Link>
|
||||
|
|
@ -78,25 +78,25 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
|
|||
<Head>
|
||||
<title>Rallly - Support</title>
|
||||
</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="inline-block relative">
|
||||
<div className="relative inline-block">
|
||||
<Link href="/">
|
||||
<a>
|
||||
<Logo className="w-40 text-indigo-500" alt="Rallly" />
|
||||
</a>
|
||||
</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—with 3 <em>L</em>s
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Menu className="hidden md:flex space-x-8 items-center" />
|
||||
<Menu className="hidden items-center space-x-8 md:flex" />
|
||||
{breakpoint === "sm" ? (
|
||||
<Popover
|
||||
placement="left-start"
|
||||
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" />
|
||||
</button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
const { t } = useTranslation("homepage");
|
||||
return (
|
||||
<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">
|
||||
<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">
|
||||
<Trans
|
||||
t={t}
|
||||
|
|
@ -20,7 +20,7 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
components={{
|
||||
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"
|
||||
/>
|
||||
),
|
||||
|
|
@ -46,11 +46,11 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<li>
|
||||
<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"
|
||||
>
|
||||
Forum
|
||||
|
|
@ -58,21 +58,21 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
</li>
|
||||
<li>
|
||||
<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
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<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
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<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
|
||||
</a>
|
||||
</Link>
|
||||
|
|
@ -80,11 +80,11 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
<li>
|
||||
<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"
|
||||
>
|
||||
Github
|
||||
|
|
@ -92,7 +92,7 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
</li>
|
||||
<li>
|
||||
<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"
|
||||
>
|
||||
Twitter
|
||||
|
|
@ -105,7 +105,7 @@ const Footer: React.VoidFunctionComponent = () => {
|
|||
href="https://vercel.com?utm_source=rallly&utm_campaign=oss"
|
||||
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
|
||||
</span>
|
||||
<Vercel className="w-24" />
|
||||
|
|
|
|||
|
|
@ -28,16 +28,16 @@ const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({
|
|||
};
|
||||
|
||||
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="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" />
|
||||
</div>
|
||||
<div className="grow">
|
||||
Notice anything different? We've announced a new version release.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-3 ml-12">
|
||||
<div className="ml-12 flex space-x-3">
|
||||
<a
|
||||
onClick={() => setCookie()}
|
||||
className="btn-default border-0"
|
||||
|
|
@ -47,7 +47,7 @@ const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({
|
|||
</a>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Placement } from "@popperjs/core";
|
||||
import { format } from "date-fns";
|
||||
import { Trans,useTranslation } from "next-i18next";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
import * as React from "react";
|
||||
import { decodeDateOption, encodeDateOption } from "utils/date-time-utils";
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
|
||||
return (
|
||||
<form
|
||||
className="border-t border-b shadow-sm bg-white"
|
||||
className="border-t border-b bg-white shadow-sm"
|
||||
onSubmit={handleSubmit((data) => {
|
||||
return new Promise<ParticipantForm>((resolve, reject) => {
|
||||
if (selectedParticipant) {
|
||||
|
|
@ -124,7 +124,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
})}
|
||||
>
|
||||
{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" ? (
|
||||
<div className="flex space-x-3">
|
||||
<Listbox
|
||||
|
|
@ -135,7 +135,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
<Listbox.Button className="btn-default w-full text-left">
|
||||
<div className="grow">
|
||||
{selectedParticipant ? (
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<UserAvater name={selectedParticipant.name} />
|
||||
<span>{selectedParticipant.name}</span>
|
||||
</div>
|
||||
|
|
@ -146,7 +146,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
<ChevronDown className="h-5" />
|
||||
</Listbox.Button>
|
||||
<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}>
|
||||
Show all
|
||||
</Listbox.Option>
|
||||
|
|
@ -156,7 +156,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
value={participant.id}
|
||||
className={styleMenuItem}
|
||||
>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<UserAvater name={participant.name} />
|
||||
<span>{participant.name}</span>
|
||||
</div>
|
||||
|
|
@ -240,7 +240,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
return (
|
||||
<div
|
||||
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>
|
||||
<DateCard
|
||||
|
|
@ -257,11 +257,11 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
/>
|
||||
) : null}
|
||||
|
||||
<div className="grow space-y-1 items-center">
|
||||
<div className="grow items-center space-y-1">
|
||||
<div>
|
||||
<span
|
||||
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-rose-500 text-rose-500": numVotes === highScore,
|
||||
|
|
@ -286,14 +286,14 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
);
|
||||
})}
|
||||
{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}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</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" ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
|
|
@ -314,7 +314,7 @@ const MobilePoll: React.VoidFunctionComponent<PollProps> = ({
|
|||
})}
|
||||
</div>
|
||||
{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")}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const NotificationsToggle: React.VoidFunctionComponent<NotificationsToggleProps>
|
|||
}}
|
||||
components={{
|
||||
b: (
|
||||
<span className="text-indigo-300 whitespace-nowrap font-medium font-mono " />
|
||||
<span className="whitespace-nowrap font-mono font-medium text-indigo-300 " />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
|
|||
});
|
||||
reset();
|
||||
})}
|
||||
className={clsx("flex shrink-0 h-14", className)}
|
||||
className={clsx("flex h-14 shrink-0", className)}
|
||||
>
|
||||
{checkboxGroupHack}
|
||||
<div className="flex items-center px-2" style={{ width: sidebarWidth }}>
|
||||
|
|
@ -88,7 +88,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
|
|||
<NameInput
|
||||
autoFocus={true}
|
||||
className={clsx("w-full", {
|
||||
"animate-wiggle input-error":
|
||||
"input-error animate-wiggle":
|
||||
errors.name && submitCount > 0,
|
||||
})}
|
||||
placeholder="Your name"
|
||||
|
|
@ -114,7 +114,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
|
|||
<div
|
||||
key={option.id}
|
||||
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,
|
||||
},
|
||||
|
|
@ -160,7 +160,7 @@ const ParticipantRowForm: React.VoidFunctionComponent<ParticipantRowFormProps> =
|
|||
);
|
||||
})}
|
||||
</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">
|
||||
<Button
|
||||
htmlType="submit"
|
||||
|
|
|
|||
|
|
@ -81,11 +81,11 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
|
|||
return (
|
||||
<div
|
||||
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}
|
||||
<div
|
||||
className="flex items-center px-4 shrink-0"
|
||||
className="flex shrink-0 items-center px-4"
|
||||
style={{ width: sidebarWidth }}
|
||||
>
|
||||
<UserAvater className="mr-2" name={participant.name} />
|
||||
|
|
@ -99,7 +99,7 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
|
|||
<div
|
||||
key={option.id}
|
||||
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,
|
||||
},
|
||||
|
|
@ -122,7 +122,7 @@ const ParticipantRow: React.VoidFunctionComponent<ParticipantRowProps> = ({
|
|||
{!poll.closed ? (
|
||||
<div
|
||||
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
|
||||
icon={<Pencil />}
|
||||
|
|
|
|||
|
|
@ -45,13 +45,13 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
|
|||
|
||||
{poll.role === "admin" ? (
|
||||
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
|
||||
</span>
|
||||
) : (
|
||||
<Popover
|
||||
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
|
||||
</button>
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
|
|||
values={{ email: poll.user.email }}
|
||||
components={{
|
||||
b: (
|
||||
<span className="text-indigo-500 font-medium font-mono whitespace-nowrap" />
|
||||
<span className="whitespace-nowrap font-mono font-medium text-indigo-500" />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -171,17 +171,17 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
|
|||
}}
|
||||
>
|
||||
<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))` }}
|
||||
ref={ref}
|
||||
>
|
||||
<div className="md:rounded-lg shadow-sm bg-white border-t border-b 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=" border-t border-b bg-white shadow-sm md:rounded-lg md:border">
|
||||
<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" ? (
|
||||
<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 ? (
|
||||
<div className="flex items-center grow">
|
||||
<div className="text-sm mr-2 font-medium text-slate-500">
|
||||
<div className="flex grow items-center">
|
||||
<div className="mr-2 text-sm font-medium text-slate-500">
|
||||
{t("timeZone")}
|
||||
</div>
|
||||
<TimeZonePicker
|
||||
|
|
@ -191,7 +191,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
|
|||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="shrink-0 flex">
|
||||
<div className="flex shrink-0">
|
||||
{!shouldShowNewParticipantForm && !poll.closed ? (
|
||||
<Button
|
||||
type="primary"
|
||||
|
|
@ -208,10 +208,10 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
|
|||
) : null}
|
||||
<div className="flex">
|
||||
<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 }}
|
||||
>
|
||||
<div className="grow h-full flex items-end">
|
||||
<div className="flex h-full grow items-end">
|
||||
{t("participantCount", { count: participants.length })}
|
||||
</div>
|
||||
<TransitionPopInOut show={scrollPosition > 0}>
|
||||
|
|
@ -232,7 +232,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
|
|||
<div
|
||||
key={option.id}
|
||||
className={clsx(
|
||||
"py-4 text-center shrink-0 transition-colors",
|
||||
"shrink-0 py-4 text-center transition-colors",
|
||||
{
|
||||
"bg-slate-50": activeOptionId === option.id,
|
||||
},
|
||||
|
|
@ -281,7 +281,7 @@ const Poll: React.VoidFunctionComponent<PollProps> = ({
|
|||
}}
|
||||
>
|
||||
{didUsePagination ? (
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
) : (
|
||||
`+${numberOfInvisibleColumns} more…`
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const Score: React.VoidFunctionComponent<ScoreProps> = ({
|
|||
return (
|
||||
<div
|
||||
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-slate-200 text-slate-500": !highlight,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const TimeRange: React.VoidFunctionComponent<TimeRangeProps> = ({
|
|||
return (
|
||||
<div
|
||||
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,
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const truncateLink = (href: string, text: string, key: number) => {
|
|||
<Tooltip
|
||||
key={key}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -91,11 +91,11 @@ const UserAvater: React.VoidFunctionComponent<UserAvaterProps> = ({
|
|||
return (
|
||||
<span
|
||||
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,
|
||||
{
|
||||
"w-5 h-5 text-xs leading-5": size === "default",
|
||||
"w-10 h-10 leading-10": size === "large",
|
||||
"h-5 w-5 text-xs leading-5": size === "default",
|
||||
"h-10 w-10 leading-10": size === "large",
|
||||
},
|
||||
className,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const VoteIcon: React.VoidFunctionComponent<{
|
|||
if (type === "yes") {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const Popover: React.VoidFunctionComponent<PopoverProps> = ({
|
|||
{portal &&
|
||||
ReactDOM.createPortal(
|
||||
<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}
|
||||
{...attributes.popper}
|
||||
ref={setPopperElement}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const Sharing: React.VoidFunctionComponent<SharingProps> = ({ links }) => {
|
|||
const [didCopy, setDidCopy] = React.useState(false);
|
||||
return (
|
||||
<div className="w-[300px] md:w-[400px]">
|
||||
<div className="segment-button inline-flex mb-3">
|
||||
<div className="segment-button mb-3 inline-flex">
|
||||
<button
|
||||
className={clsx({
|
||||
"segment-button-active": role === "participant",
|
||||
|
|
@ -77,10 +77,10 @@ const Sharing: React.VoidFunctionComponent<SharingProps> = ({ links }) => {
|
|||
{roleData["admin"].label}
|
||||
</button>
|
||||
</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} />
|
||||
<Button
|
||||
className="shrink-0 w-24"
|
||||
className="w-24 shrink-0"
|
||||
disabled={didCopy}
|
||||
onClick={() => {
|
||||
copyToClipboard(pollUrl);
|
||||
|
|
|
|||
|
|
@ -8,40 +8,40 @@ import Support from "./icons/support.svg";
|
|||
|
||||
const StandardLayout: React.FunctionComponent = ({ children, ...rest }) => {
|
||||
return (
|
||||
<div className="relative min-h-full lg:flex bg-gray-50" {...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="flex lg:float-right items-center lg:items-start lg:w-40 lg:flex-col">
|
||||
<div className="grow lg:grow-0 lg:mb-8">
|
||||
<div className="relative min-h-full bg-gray-50 lg:flex" {...rest}>
|
||||
<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 items-center lg:float-right lg:w-40 lg:flex-col lg:items-start">
|
||||
<div className="grow lg:mb-8 lg:grow-0">
|
||||
<Link href="/">
|
||||
<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>
|
||||
</Link>
|
||||
</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">
|
||||
<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">
|
||||
<Pencil className="w-6 h-6 opacity-75" />
|
||||
<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="h-6 w-6 opacity-75" />
|
||||
<span className="hidden md:inline-block">New Poll</span>
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
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>
|
||||
</a>
|
||||
<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">
|
||||
<Support className="w-6 h-6 opacity-75" />
|
||||
<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="h-6 w-6 opacity-75" />
|
||||
<span className="hidden md:inline-block">Support</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow min-w-0">{children}</div>
|
||||
<div className="min-w-0 grow">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,21 +17,21 @@ const Steps: React.VoidFunctionComponent<StepsProps> = ({
|
|||
|
||||
return (
|
||||
<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", {
|
||||
current: current + 1,
|
||||
total,
|
||||
})}
|
||||
</div>
|
||||
<div className="flex ml-2 items-center">
|
||||
<div className="ml-2 flex items-center">
|
||||
{[...Array(total)].map((_, i) => {
|
||||
return (
|
||||
<span
|
||||
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-gray-300": i > current,
|
||||
"ring-4 ring-indigo-200 animate-pulse": i === current,
|
||||
"animate-pulse ring-4 ring-indigo-200": i === current,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
const { t } = useTranslation("support");
|
||||
return (
|
||||
<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>
|
||||
<div className="lg:flex py-16">
|
||||
<div className="grow mb-8">
|
||||
<h2 className="text-3xl mb-4">General</h2>
|
||||
<div className="py-16 lg:flex">
|
||||
<div className="mb-8 grow">
|
||||
<h2 className="mb-4 text-3xl">General</h2>
|
||||
<Disclosure
|
||||
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" />
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="text py-2 px-3">
|
||||
|
|
@ -34,9 +34,9 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
</Disclosure>
|
||||
<Disclosure
|
||||
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="canRalllyDoQuestion"
|
||||
|
|
@ -57,9 +57,9 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
</Disclosure>
|
||||
<Disclosure
|
||||
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")}
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="text py-2 px-3">
|
||||
|
|
@ -72,9 +72,9 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
</Disclosure>
|
||||
<Disclosure
|
||||
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")}
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="text py-2 px-3">
|
||||
|
|
@ -87,12 +87,12 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
/>
|
||||
</Disclosure.Panel>
|
||||
</Disclosure>
|
||||
<h2 className="text-3xl mb-4 mt-8">Privacy & Security</h2>
|
||||
<h2 className="mb-4 mt-8 text-3xl">Privacy & Security</h2>
|
||||
<Disclosure
|
||||
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")}
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="text py-2 px-3">
|
||||
|
|
@ -103,12 +103,12 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
/>
|
||||
</Disclosure.Panel>
|
||||
</Disclosure>
|
||||
<h2 className="text-3xl mb-4 mt-8">Self-hosting</h2>
|
||||
<h2 className="mb-4 mt-8 text-3xl">Self-hosting</h2>
|
||||
<Disclosure
|
||||
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")}
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="text py-2 px-3">
|
||||
|
|
@ -123,9 +123,9 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
</Disclosure>
|
||||
<Disclosure
|
||||
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")}
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="text py-2 px-3">
|
||||
|
|
@ -141,10 +141,10 @@ const Support: React.VoidFunctionComponent = () => {
|
|||
</Disclosure.Panel>
|
||||
</Disclosure>
|
||||
</div>
|
||||
<div className="lg:ml-16 shrink-0 lg:w-96">
|
||||
<div className="p-8 bg-white rounded-xl shadow-md">
|
||||
<div className="flex lg:flex-col items-start max-w-3xl">
|
||||
<Chat className="hidden sm:block w-20 text-indigo-500 shrink-0 mr-8 mb-8" />
|
||||
<div className="shrink-0 lg:ml-16 lg:w-96">
|
||||
<div className="rounded-xl bg-white p-8 shadow-md">
|
||||
<div className="flex max-w-3xl items-start lg:flex-col">
|
||||
<Chat className="mr-8 mb-8 hidden w-20 shrink-0 text-indigo-500 sm:block" />
|
||||
<div>
|
||||
<h2 className="mb-2">{t("supportContactTitle")}</h2>
|
||||
<p className="text">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const Switch: React.VoidFunctionComponent<SwitchProps> = ({
|
|||
checked={checked}
|
||||
onChange={onChange}
|
||||
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-green-500": checked,
|
||||
|
|
@ -31,7 +31,7 @@ const Switch: React.VoidFunctionComponent<SwitchProps> = ({
|
|||
<span
|
||||
aria-hidden="true"
|
||||
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-0": !checked,
|
||||
|
|
|
|||
|
|
@ -174,15 +174,15 @@ const TimeZonePicker: React.VoidFunctionComponent<{
|
|||
}}
|
||||
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">
|
||||
{!query ? selectedTimeZone.label : null}
|
||||
</span>
|
||||
<span className="flex pointer-events-none">
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
<span className="pointer-events-none flex">
|
||||
<ChevronDown className="h-5 w-5" />
|
||||
</span>
|
||||
</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) => (
|
||||
<Combobox.Option
|
||||
key={timeZone.value}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
|
|||
{...attributes.popper}
|
||||
>
|
||||
<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"}
|
||||
show={debouncedValue}
|
||||
enter="transition transform duration-100"
|
||||
|
|
@ -108,7 +108,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
|
|||
>
|
||||
<div
|
||||
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}
|
||||
data-popper-arrow
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@
|
|||
"eslint-plugin-simple-import-sort": "^7.0.0",
|
||||
"postcss": "^8.4.6",
|
||||
"prettier": "^2.3.0",
|
||||
"prettier-plugin-tailwindcss": "^0.1.8",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"wait-on": "^6.0.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import { isInMaintenanceMode } from "../utils/constants";
|
|||
|
||||
const Maintenance: NextPage = () => {
|
||||
return (
|
||||
<div className="h-full bg-gray-100 flex flex-col justify-center items-center">
|
||||
<div className="bg-white text-center p-8 rounded-lg border shadow-sm w-96">
|
||||
<Logo className="h-8 inline-block text-indigo-500 mb-4" />
|
||||
<div className="flex h-full flex-col items-center justify-center bg-gray-100">
|
||||
<div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
|
||||
<Logo className="mb-4 inline-block h-8 text-indigo-500" />
|
||||
<div className="">
|
||||
The site is currently under maintenance and will be back shortly…
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -148,18 +148,18 @@ const Page: NextPage<{
|
|||
<Head>
|
||||
<title>{formData?.eventDetails?.title ?? t("newPoll")}</title>
|
||||
</Head>
|
||||
<div className="max-w-full w-[1024px] py-4 px-3 lg:px-6">
|
||||
<div className="flex space-x-4 items-center mb-4">
|
||||
<div className="w-[1024px] max-w-full py-4 px-3 lg:px-6">
|
||||
<div className="mb-4 flex items-center space-x-4">
|
||||
<h1 className="m-0">New Poll</h1>
|
||||
<Steps current={currentStepIndex} total={steps.length} />
|
||||
</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) {
|
||||
case "eventDetails":
|
||||
return (
|
||||
<PollDetailsForm
|
||||
className="px-4 pt-4 max-w-full"
|
||||
className="max-w-full px-4 pt-4"
|
||||
name={currentStepName}
|
||||
defaultValues={formData?.eventDetails}
|
||||
onSubmit={handleSubmit}
|
||||
|
|
@ -180,7 +180,7 @@ const Page: NextPage<{
|
|||
case "userDetails":
|
||||
return (
|
||||
<UserDetailsForm
|
||||
className="px-4 pt-4 grow"
|
||||
className="grow px-4 pt-4"
|
||||
name={currentStepName}
|
||||
defaultValues={formData?.userDetails}
|
||||
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 ? (
|
||||
<Button
|
||||
disabled={isBusy}
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ const PollPage: NextPage = () => {
|
|||
return (
|
||||
<UserAvatarProvider seed={poll.pollId} names={names}>
|
||||
<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>
|
||||
<title>{poll.title}</title>
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
|
|
@ -228,14 +228,14 @@ const PollPage: NextPage = () => {
|
|||
}}
|
||||
>
|
||||
<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 md:mb-0 grow">
|
||||
<div className="mb-3 items-start md:flex md:space-x-4">
|
||||
<div className="mb-3 grow md:mb-0">
|
||||
<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)}
|
||||
</h1>
|
||||
{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 />
|
||||
<ManagePoll
|
||||
placement={
|
||||
|
|
@ -262,18 +262,18 @@ const PollPage: NextPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
{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>
|
||||
{preventWidows(poll.description)}
|
||||
</TruncatedLinkify>
|
||||
</div>
|
||||
) : null}
|
||||
{poll.location ? (
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="mb-4 flex items-center">
|
||||
<div>
|
||||
<LocationMarker
|
||||
width={20}
|
||||
className="text-slate-400 mr-2"
|
||||
className="mr-2 text-slate-400"
|
||||
/>
|
||||
</div>
|
||||
<TruncatedLinkify>{poll.location}</TruncatedLinkify>
|
||||
|
|
@ -281,7 +281,7 @@ const PollPage: NextPage = () => {
|
|||
) : null}
|
||||
</div>
|
||||
{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">
|
||||
<LockClosed className="w-5" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import PageLayout from "@/components/page-layout";
|
|||
const PrivacyPolicy = () => {
|
||||
return (
|
||||
<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>
|
||||
<p>Last updated: April 04, 2022</p>
|
||||
<p>
|
||||
|
|
|
|||
42
style.css
42
style.css
|
|
@ -19,7 +19,7 @@
|
|||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
@apply font-sans font-semibold mb-4 text-slate-700;
|
||||
@apply mb-4 font-sans font-semibold text-slate-700;
|
||||
}
|
||||
h1 {
|
||||
@apply text-2xl;
|
||||
|
|
@ -31,17 +31,17 @@
|
|||
@apply outline-none;
|
||||
}
|
||||
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 {
|
||||
@apply block text-slate-800 text-sm mb-1;
|
||||
@apply mb-1 block text-sm text-slate-800;
|
||||
}
|
||||
button {
|
||||
@apply focus:outline-none focus:ring-indigo-600;
|
||||
}
|
||||
|
||||
#portal {
|
||||
@apply absolute w-full z-50;
|
||||
@apply absolute z-50 w-full;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
@apply mb-4;
|
||||
}
|
||||
.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 {
|
||||
@apply h-9;
|
||||
|
|
@ -59,26 +59,26 @@
|
|||
@apply input px-3 py-3;
|
||||
}
|
||||
.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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@apply hover:no-underline;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
@apply text-indigo-500 inline-flex items-center underline;
|
||||
@apply inline-flex items-center text-indigo-500 underline;
|
||||
}
|
||||
.btn-default.btn-disabled {
|
||||
@apply bg-gray-50;
|
||||
|
|
@ -87,18 +87,18 @@
|
|||
@apply pointer-events-none;
|
||||
}
|
||||
.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 {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@apply flex text-center h-9 shadow-sm;
|
||||
@apply flex h-9 text-center shadow-sm;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -110,11 +110,11 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
@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] {
|
||||
|
|
@ -132,13 +132,13 @@
|
|||
|
||||
@layer components {
|
||||
.heading {
|
||||
@apply text-indigo-500 text-xl;
|
||||
@apply text-xl text-indigo-500;
|
||||
}
|
||||
.subheading {
|
||||
@apply text-4xl font-bold text-slate-800 mb-16;
|
||||
@apply mb-16 text-4xl font-bold text-slate-800;
|
||||
}
|
||||
.heading-sm {
|
||||
@apply font-bold text-xl text-slate-700;
|
||||
@apply text-xl font-bold text-slate-700;
|
||||
}
|
||||
.text {
|
||||
@apply text-lg leading-relaxed text-slate-500;
|
||||
|
|
@ -197,14 +197,14 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
@apply mr-2;
|
||||
}
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -4764,6 +4764,11 @@ prelude-ls@^1.2.1:
|
|||
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
|
||||
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:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue