mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-11 16:06:50 +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
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue