Skip to content

Commit ff8e215

Browse files
foxlaufoxlau
committed
refactor: update to Tailwindcss v4
1 parent 617fc03 commit ff8e215

31 files changed

+1294
-1357
lines changed

‎app/components/account/appearance.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,31 +38,31 @@ export function Appearance() {
3838
onValueChange={(value: ColorScheme) => setColorScheme(value)}
3939
>
4040
{ColorSchemeSchema.shape.colorScheme.options.map((value) => (
41-
<label key={value} htmlFor={value}>
41+
<label key={value} htmlFor={value} className="relative">
4242
<RadioGroupItem
4343
id={value}
4444
value={value}
45-
className="peer sr-only after:absolute after:inset-0"
45+
className="peer sr-only"
4646
/>
4747
<img
4848
src={THEME_IMAGES[value]}
4949
alt={value}
5050
width={220}
5151
height={160}
52-
className="relative w-full cursor-pointer overflow-hidden rounded-lg border border-input shadow-black/5 shadow-sm outline-offset-2 transition-colors peer-[:focus-visible]:outline peer-[:focus-visible]:outline-2 peer-[:focus-visible]:outline-ring/70 peer-data-[disabled]:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-[disabled]:opacity-50"
52+
className="relative cursor-pointer overflow-hidden rounded-lg border border-input shadow-xs outline-none transition-[color,box-shadow] peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-50"
5353
/>
5454
<span className="group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70">
5555
<CheckIcon
5656
size={16}
57-
className="peer-data-[state=unchecked]:group-[]:hidden"
57+
className="group-peer-data-[state=unchecked]:hidden"
5858
aria-hidden="true"
5959
/>
6060
<MinusIcon
6161
size={16}
62-
className="peer-data-[state=checked]:group-[]:hidden"
62+
className="group-peer-data-[state=checked]:hidden"
6363
aria-hidden="true"
6464
/>
65-
<span className="font-medium text-xs capitalize">{value}</span>
65+
<span className="font-medium text-xs">{value}</span>
6666
</span>
6767
</label>
6868
))}

‎app/components/account/delete-account.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,7 @@ export function DeleteAccount() {
6262
<DialogTrigger asChild>
6363
<Button variant="destructive">Delete account</Button>
6464
</DialogTrigger>
65-
<DialogContent
66-
aria-modal="true"
67-
aria-labelledby="alert-dialog"
68-
className="sm:max-w-[400px]"
69-
>
65+
<DialogContent aria-modal="true" aria-labelledby="alert-dialog">
7066
<DialogHeader>
7167
<DialogTitle>{MODAL_TITLE}</DialogTitle>
7268
<DialogDescription>

‎app/components/progress-bar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function ProgressBar({ showSpinner = false }: ProgressBarProps) {
4040
<div
4141
ref={ref}
4242
className={cn(
43-
"relative h-full w-0 bg-[#2960F6] duration-500 ease-in-out",
43+
"relative h-full w-0 bg-[#0f0f0f] duration-500 ease-in-out",
4444
transition.state === "idle" &&
4545
(animationComplete
4646
? "transition-none"
@@ -49,11 +49,11 @@ function ProgressBar({ showSpinner = false }: ProgressBarProps) {
4949
delayedPending && transition.state === "loading" && "w-8/12",
5050
)}
5151
>
52-
<div className="-translate-y-1 absolute right-0 block h-full w-[100px] rotate-[3deg] opacity-100 shadow-[0_0_10px_#2960F6,0_0_5px_#2960F6]" />
52+
<div className="-translate-y-1 absolute right-0 block h-full w-[100px] rotate-[3deg] opacity-100 shadow-[0_0_10px_#0f0f0f,0_0_5px_#0f0f0f]" />
5353
</div>
5454
{delayedPending && showSpinner && (
5555
<div className="absolute top-2 right-2 flex items-center justify-center">
56-
<Spinner className="h-4 w-4 text-primary" />
56+
<Spinner className="size-4 text-primary" />
5757
</div>
5858
)}
5959
</div>

‎app/components/todos/delete-todo.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,7 @@ export function DeleteTodo({ todoId }: { todoId: string }) {
2626
disabled={isDeleting}
2727
{...getButtonProps()}
2828
>
29-
{doubleCheck ? (
30-
isDeleting ? (
31-
<Spinner className="size-2" />
32-
) : (
33-
<CheckIcon className="size-2" />
34-
)
35-
) : (
36-
<XIcon className="size-2" />
37-
)}
29+
{doubleCheck ? isDeleting ? <Spinner /> : <CheckIcon /> : <XIcon />}
3830
</Button>
3931
</fetcher.Form>
4032
);

‎app/components/ui/alert-dialog.tsx

Lines changed: 125 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,155 @@
11
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
2-
import * as React from "react";
2+
import type * as React from "react";
33

44
import { buttonVariants } from "~/components/ui/button";
55
import { cn } from "~/lib/utils";
66

7-
const AlertDialog = AlertDialogPrimitive.Root;
8-
9-
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
7+
function AlertDialog({
8+
...props
9+
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
10+
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
11+
}
1012

11-
const AlertDialogPortal = AlertDialogPrimitive.Portal;
13+
function AlertDialogTrigger({
14+
...props
15+
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
16+
return (
17+
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
18+
);
19+
}
1220

13-
const AlertDialogOverlay = React.forwardRef<
14-
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16-
>(({ className, ...props }, ref) => (
17-
<AlertDialogPrimitive.Overlay
18-
className={cn(
19-
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
20-
className,
21-
)}
22-
{...props}
23-
ref={ref}
24-
/>
25-
));
26-
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
21+
function AlertDialogPortal({
22+
...props
23+
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
24+
return (
25+
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
26+
);
27+
}
2728

28-
const AlertDialogContent = React.forwardRef<
29-
React.ElementRef<typeof AlertDialogPrimitive.Content>,
30-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31-
>(({ className, ...props }, ref) => (
32-
<AlertDialogPortal>
33-
<AlertDialogOverlay />
34-
<AlertDialogPrimitive.Content
35-
ref={ref}
29+
function AlertDialogOverlay({
30+
className,
31+
...props
32+
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
33+
return (
34+
<AlertDialogPrimitive.Overlay
35+
data-slot="alert-dialog-overlay"
3636
className={cn(
37-
"-translate-x-1/2 -translate-y-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-4rem)] w-full gap-4 overflow-y-auto border bg-background p-6 shadow-black/5 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-[400px] sm:rounded-xl",
37+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
3838
className,
3939
)}
4040
{...props}
4141
/>
42-
</AlertDialogPortal>
43-
));
44-
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
42+
);
43+
}
4544

46-
const AlertDialogHeader = ({
45+
function AlertDialogContent({
4746
className,
4847
...props
49-
}: React.HTMLAttributes<HTMLDivElement>) => (
50-
<div
51-
className={cn(
52-
"flex flex-col space-y-1 text-center sm:text-left",
53-
className,
54-
)}
55-
{...props}
56-
/>
57-
);
58-
AlertDialogHeader.displayName = "AlertDialogHeader";
48+
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
49+
return (
50+
<AlertDialogPortal>
51+
<AlertDialogOverlay />
52+
<AlertDialogPrimitive.Content
53+
data-slot="alert-dialog-content"
54+
className={cn(
55+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
56+
className,
57+
)}
58+
{...props}
59+
/>
60+
</AlertDialogPortal>
61+
);
62+
}
5963

60-
const AlertDialogFooter = ({
64+
function AlertDialogHeader({
6165
className,
6266
...props
63-
}: React.HTMLAttributes<HTMLDivElement>) => (
64-
<div
65-
className={cn(
66-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3",
67-
className,
68-
)}
69-
{...props}
70-
/>
71-
);
72-
AlertDialogFooter.displayName = "AlertDialogFooter";
67+
}: React.ComponentProps<"div">) {
68+
return (
69+
<div
70+
data-slot="alert-dialog-header"
71+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
72+
{...props}
73+
/>
74+
);
75+
}
7376

74-
const AlertDialogTitle = React.forwardRef<
75-
React.ElementRef<typeof AlertDialogPrimitive.Title>,
76-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
77-
>(({ className, ...props }, ref) => (
78-
<AlertDialogPrimitive.Title
79-
ref={ref}
80-
className={cn("font-semibold text-base", className)}
81-
{...props}
82-
/>
83-
));
84-
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
77+
function AlertDialogFooter({
78+
className,
79+
...props
80+
}: React.ComponentProps<"div">) {
81+
return (
82+
<div
83+
data-slot="alert-dialog-footer"
84+
className={cn(
85+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
86+
className,
87+
)}
88+
{...props}
89+
/>
90+
);
91+
}
8592

86-
const AlertDialogDescription = React.forwardRef<
87-
React.ElementRef<typeof AlertDialogPrimitive.Description>,
88-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
89-
>(({ className, ...props }, ref) => (
90-
<AlertDialogPrimitive.Description
91-
ref={ref}
92-
className={cn("text-muted-foreground text-sm", className)}
93-
{...props}
94-
/>
95-
));
96-
AlertDialogDescription.displayName =
97-
AlertDialogPrimitive.Description.displayName;
93+
function AlertDialogTitle({
94+
className,
95+
...props
96+
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
97+
return (
98+
<AlertDialogPrimitive.Title
99+
data-slot="alert-dialog-title"
100+
className={cn("font-semibold text-lg", className)}
101+
{...props}
102+
/>
103+
);
104+
}
105+
106+
function AlertDialogDescription({
107+
className,
108+
...props
109+
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
110+
return (
111+
<AlertDialogPrimitive.Description
112+
data-slot="alert-dialog-description"
113+
className={cn("text-muted-foreground text-sm", className)}
114+
{...props}
115+
/>
116+
);
117+
}
98118

99-
const AlertDialogAction = React.forwardRef<
100-
React.ElementRef<typeof AlertDialogPrimitive.Action>,
101-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102-
>(({ className, ...props }, ref) => (
103-
<AlertDialogPrimitive.Action
104-
ref={ref}
105-
className={cn(buttonVariants(), className)}
106-
{...props}
107-
/>
108-
));
109-
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
119+
function AlertDialogAction({
120+
className,
121+
...props
122+
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
123+
return (
124+
<AlertDialogPrimitive.Action
125+
className={cn(buttonVariants(), className)}
126+
{...props}
127+
/>
128+
);
129+
}
110130

111-
const AlertDialogCancel = React.forwardRef<
112-
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114-
>(({ className, ...props }, ref) => (
115-
<AlertDialogPrimitive.Cancel
116-
ref={ref}
117-
className={cn(
118-
buttonVariants({ variant: "outline" }),
119-
"mt-2 sm:mt-0",
120-
className,
121-
)}
122-
{...props}
123-
/>
124-
));
125-
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
131+
function AlertDialogCancel({
132+
className,
133+
...props
134+
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
135+
return (
136+
<AlertDialogPrimitive.Cancel
137+
className={cn(buttonVariants({ variant: "outline" }), className)}
138+
{...props}
139+
/>
140+
);
141+
}
126142

127143
export {
128144
AlertDialog,
129-
AlertDialogAction,
130-
AlertDialogCancel,
145+
AlertDialogPortal,
146+
AlertDialogOverlay,
147+
AlertDialogTrigger,
131148
AlertDialogContent,
132-
AlertDialogDescription,
133-
AlertDialogFooter,
134149
AlertDialogHeader,
135-
AlertDialogOverlay,
136-
AlertDialogPortal,
150+
AlertDialogFooter,
137151
AlertDialogTitle,
138-
AlertDialogTrigger,
152+
AlertDialogDescription,
153+
AlertDialogAction,
154+
AlertDialogCancel,
139155
};

‎app/components/ui/alert.tsx

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)