Skip to content

Commit 2d29fe4

Browse files
EhespEhesp
committed
feat(shadcn): Update shadcn component styling
1 parent 012709e commit 2d29fe4

34 files changed

+200
-143
lines changed

‎packages/shadcn/registry-spec.json‎

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,15 @@
2020
"@layer components": {
2121
"button[data-provider='apple.com'][data-themed='true']": {
2222
"--apple-primary": "#000000",
23-
"--color-primary": "var(--apple-primary)",
24-
"--color-primary-hover": "--alpha(var(--apple-primary) / 85%)",
25-
"--color-primary-surface": "#FFFFFF",
26-
"--color-border": "var(--apple-primary)"
23+
"--primary": "var(--apple-primary)",
24+
"--primary-foreground": "var(--color-white)"
2725
}
2826
},
2927
"@variant dark": {
3028
"button[data-provider='apple.com'][data-themed='true']": {
3129
"--apple-primary": "var(--color-white)",
32-
"--color-primary": "var(--apple-primary)",
33-
"--color-primary-hover": "--alpha(var(--apple-primary) / 85%)",
34-
"--color-primary-surface": "var(--color-black)",
35-
"--color-border": "var(--color-white)"
30+
"--primary": "var(--apple-primary)",
31+
"--primary-foreground": "var(--color-black)"
3632
}
3733
}
3834
}
@@ -57,7 +53,7 @@
5753
"title": "Email Link Auth Form",
5854
"description": "A form allowing users to sign in via email link.",
5955
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
60-
"registryDependencies": ["input", "button", "form", "{{ DOMAIN }}/policies.json"],
56+
"registryDependencies": ["input", "button", "form", "alert", "{{ DOMAIN }}/r/policies.json"],
6157
"files": [
6258
{
6359
"path": "src/components/email-link-auth-form.tsx",
@@ -71,7 +67,12 @@
7167
"title": "Email Link Auth Screen",
7268
"description": "A screen allowing users to sign in via email link.",
7369
"dependencies": ["{{ DEP | @firebase-ui/react }}"],
74-
"registryDependencies": ["separator", "card", "{{ DOMAIN }}/email-link-auth-form.json"],
70+
"registryDependencies": [
71+
"separator",
72+
"card",
73+
"{{ DOMAIN }}/r/email-link-auth-form.json",
74+
"{{ DOMAIN }}/r/redirect-error.json"
75+
],
7576
"files": [
7677
{
7778
"path": "src/components/email-link-auth-screen.tsx",
@@ -96,10 +97,8 @@
9697
"@layer components": {
9798
"button[data-provider='facebook.com'][data-themed='true']": {
9899
"--facebook-primary": "#1877F2",
99-
"--color-primary": "var(--facebook-primary)",
100-
"--color-primary-hover": "--alpha(var(--facebook-primary) / 85%)",
101-
"--color-primary-surface": "var(--color-white)",
102-
"--color-border": "var(--facebook-primary)"
100+
"--primary": "var(--facebook-primary)",
101+
"--primary-foreground": "var(--color-white)"
103102
}
104103
}
105104
}
@@ -149,19 +148,15 @@
149148
"@layer components": {
150149
"button[data-provider='github.com'][data-themed='true']": {
151150
"--github-primary": "#000000",
152-
"--color-primary": "var(--github-primary)",
153-
"--color-primary-hover": "--alpha(var(--github-primary) / 85%)",
154-
"--color-primary-surface": "#FFFFFF",
155-
"--color-border": "var(--github-primary)"
151+
"--primary": "var(--github-primary)",
152+
"--primary-foreground": "var(--color-white)"
156153
}
157154
},
158155
"@variant dark": {
159156
"button[data-provider='github.com'][data-themed='true']": {
160157
"--github-primary": "var(--color-white)",
161-
"--color-primary": "var(--github-primary)",
162-
"--color-primary-hover": "--alpha(var(--github-primary) / 85%)",
163-
"--color-primary-surface": "var(--color-black)",
164-
"--color-border": "var(--color-white)"
158+
"--primary": "var(--github-primary)",
159+
"--primary-foreground": "var(--color-black)"
165160
}
166161
}
167162
}
@@ -183,26 +178,20 @@
183178
"@layer components": {
184179
"button[data-provider='google.com'][data-themed='true']": {
185180
"--google-primary": "#131314",
186-
"--color-primary": "var(--google-primary)",
187-
"--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
188-
"--color-primary-surface": "#FFFFFF",
189-
"--color-border": "var(--google-primary)"
181+
"--primary": "var(--google-primary)",
182+
"--primary-foreground": "var(--color-white)"
190183
},
191184
"button[data-provider='google.com'][data-themed='neutral']": {
192185
"--google-primary": "#F2F2F2",
193-
"--color-primary": "var(--google-primary)",
194-
"--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
195-
"--color-primary-surface": "#1F1F1F",
196-
"--color-border": "transparent"
186+
"--primary": "var(--google-primary)",
187+
"--primary-foreground": "var(--color-black)"
197188
}
198189
},
199190
"@variant dark": {
200191
"button[data-provider='google.com'][data-themed='true']": {
201192
"--google-primary": "#FFFFFF",
202-
"--color-primary": "var(--google-primary)",
203-
"--color-primary-hover": "--alpha(var(--google-primary) / 85%)",
204-
"--color-primary-surface": "#1F1F1F",
205-
"--color-border": "#747775"
193+
"--primary": "var(--google-primary)",
194+
"--primary-foreground": "var(--color-black)"
206195
}
207196
}
208197
}
@@ -224,19 +213,15 @@
224213
"@layer components": {
225214
"button[data-provider='microsoft.com'][data-themed='true']": {
226215
"--microsoft-primary": "#2F2F2F",
227-
"--color-primary": "var(--microsoft-primary)",
228-
"--color-primary-hover": "--alpha(var(--microsoft-primary) / 85%)",
229-
"--color-primary-surface": "#FFFFFF",
230-
"--color-border": "var(--microsoft-primary)"
216+
"--primary": "var(--microsoft-primary)",
217+
"--primary-foreground": "var(--color-white)"
231218
}
232219
},
233220
"@variant dark": {
234221
"button[data-provider='microsoft.com'][data-themed='true']": {
235222
"--microsoft-primary": "var(--color-white)",
236-
"--color-primary": "var(--microsoft-primary)",
237-
"--color-primary-hover": "--alpha(var(--microsoft-primary) / 85%)",
238-
"--color-primary-surface": "#5E5E5E",
239-
"--color-border": "var(--color-white)"
223+
"--primary": "var(--microsoft-primary)",
224+
"--primary-foreground": "var(--color-black)"
240225
}
241226
}
242227
}
@@ -446,8 +431,8 @@
446431
"registryDependencies": [
447432
"separator",
448433
"card",
449-
"{{ DOMAIN }}/sign-up-auth-form.json",
450-
"{{ DOMAIN }}/multi-factor-auth-assertion-form.json"
434+
"{{ DOMAIN }}/r/sign-up-auth-form.json",
435+
"{{ DOMAIN }}/r/multi-factor-auth-assertion-form.json"
451436
],
452437
"files": [
453438
{
@@ -529,10 +514,8 @@
529514
"@layer components": {
530515
"button[data-provider='twitter.com'][data-themed='true']": {
531516
"--twitter-primary": "#1DA1F2",
532-
"--color-primary": "var(--twitter-primary)",
533-
"--color-primary-hover": "--alpha(var(--twitter-primary) / 85%)",
534-
"--color-primary-surface": "#FFFFFF",
535-
"--color-border": "var(--twitter-primary)"
517+
"--primary": "var(--twitter-primary)",
518+
"--primary-foreground": "var(--color-white)"
536519
}
537520
}
538521
}

‎packages/shadcn/setup-test.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@
1717
import "@testing-library/jest-dom/vitest";
1818
import { vi, afterEach } from "vitest";
1919

20+
// Mock ResizeObserver for input-otp component
21+
global.ResizeObserver = class ResizeObserver {
22+
observe() {}
23+
unobserve() {}
24+
disconnect() {}
25+
} as any;
26+
2027
afterEach(() => {
2128
vi.clearAllTimers();
2229
vi.clearAllMocks();

‎packages/shadcn/src/components/email-link-auth-form.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import { useState } from "react";
1616
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
1717
import { Input } from "@/components/ui/input";
1818
import { Button } from "@/components/ui/button";
19-
import { Policies } from "./policies";
19+
import { Policies } from "@/components/policies";
20+
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2021

2122
export type { EmailLinkAuthFormProps };
2223

@@ -49,15 +50,15 @@ export function EmailLinkAuthForm(props: EmailLinkAuthFormProps) {
4950

5051
if (emailSent) {
5152
return (
52-
<div className="text-center space-y-4">
53-
<div className="text-green-600 dark:text-green-400">{getTranslation(ui, "messages", "signInLinkSent")}</div>
54-
</div>
53+
<Alert>
54+
<AlertDescription>{getTranslation(ui, "messages", "signInLinkSent")}</AlertDescription>
55+
</Alert>
5556
);
5657
}
5758

5859
return (
5960
<Form {...form}>
60-
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
61+
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
6162
<FormField
6263
control={form.control}
6364
name="email"

‎packages/shadcn/src/components/email-link-auth-screen.test.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ describe("<EmailLinkAuthScreen />", () => {
100100
expect(screen.getByText("Sign In")).toBeInTheDocument();
101101
expect(screen.getByText("Sign in to your account")).toBeInTheDocument();
102102
expect(screen.getByTestId("email-link-auth-form")).toBeInTheDocument();
103-
expect(screen.getByText("or")).toBeInTheDocument();
104103
expect(screen.getByTestId("child-component")).toBeInTheDocument();
105104
});
106105

‎packages/shadcn/src/components/email-link-auth-screen.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
77
import { Separator } from "@/components/ui/separator";
88
import { EmailLinkAuthForm } from "@/components/email-link-auth-form";
99
import { MultiFactorAuthAssertionForm } from "@/components/multi-factor-auth-assertion-form";
10+
import { RedirectError } from "@/components/redirect-error";
1011

1112
export type { EmailLinkAuthScreenProps };
1213

@@ -18,7 +19,7 @@ export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenP
1819
const mfaResolver = ui.multiFactorResolver;
1920

2021
return (
21-
<div className="max-w-md mx-auto">
22+
<div className="max-w-sm mx-auto">
2223
<Card>
2324
<CardHeader>
2425
<CardTitle>{titleText}</CardTitle>
@@ -32,8 +33,11 @@ export function EmailLinkAuthScreen({ children, ...props }: EmailLinkAuthScreenP
3233
<EmailLinkAuthForm {...props} />
3334
{children ? (
3435
<>
35-
<Separator>{getTranslation(ui, "messages", "dividerOr")}</Separator>
36-
<div className="space-y-2">{children}</div>
36+
<Separator className="my-4" />
37+
<div className="space-y-2">
38+
{children}
39+
<RedirectError />
40+
</div>
3741
</>
3842
) : null}
3943
</>

‎packages/shadcn/src/components/forgot-password-auth-form.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function ForgotPasswordAuthForm(props: ForgotPasswordAuthFormProps) {
5353

5454
return (
5555
<Form {...form}>
56-
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
56+
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
5757
<FormField
5858
control={form.control}
5959
name="email"
@@ -73,8 +73,8 @@ export function ForgotPasswordAuthForm(props: ForgotPasswordAuthFormProps) {
7373
</Button>
7474
{form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
7575
{props.onBackToSignInClick ? (
76-
<Button type="button" variant="secondary" onClick={props.onBackToSignInClick}>
77-
{getTranslation(ui, "labels", "backToSignIn")}
76+
<Button type="button" variant="link" size="sm" onClick={props.onBackToSignInClick}>
77+
<span className="text-xs">&larr; {getTranslation(ui, "labels", "backToSignIn")}</span>
7878
</Button>
7979
) : null}
8080
</form>

‎packages/shadcn/src/components/forgot-password-auth-screen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function ForgotPasswordAuthScreen(props: ForgotPasswordAuthScreenProps) {
1515
const subtitleText = getTranslation(ui, "prompts", "enterEmailToReset");
1616

1717
return (
18-
<div className="max-w-md mx-auto">
18+
<div className="max-w-sm mx-auto">
1919
<Card>
2020
<CardHeader>
2121
<CardTitle>{titleText}</CardTitle>

‎packages/shadcn/src/components/multi-factor-auth-assertion-form.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ describe("<MultiFactorAuthAssertionForm />", () => {
183183
})
184184
);
185185

186-
expect(screen.getByText("Select a multi-factor authentication method")).toBeInTheDocument();
186+
expect(screen.getByText("TODO:Select a multi-factor authentication method")).toBeInTheDocument();
187187
});
188188

189189
it("calls onSuccess with credential when SMS form succeeds", () => {

‎packages/shadcn/src/components/multi-factor-auth-assertion-form.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ export function MultiFactorAuthAssertionForm({ onSuccess }: MultiFactorAuthAsser
4242
}
4343

4444
return (
45-
<div className="space-y-2">
46-
<p className="text-sm text-muted-foreground">Select a multi-factor authentication method</p>
45+
<div className="flex flex-col gap-2">
46+
<p className="text-sm text-muted-foreground">TODO:Select a multi-factor authentication method</p>
4747
{resolver.hints.map((hint) => {
4848
if (hint.factorId === TotpMultiFactorGenerator.FACTOR_ID) {
4949
return <TotpButton key={hint.factorId} onClick={() => setHint(hint)} />;
@@ -62,11 +62,19 @@ export function MultiFactorAuthAssertionForm({ onSuccess }: MultiFactorAuthAsser
6262
function TotpButton(props: ComponentProps<typeof Button>) {
6363
const ui = useUI();
6464
const labelText = getTranslation(ui, "labels", "mfaTotpVerification");
65-
return <Button {...props}>{labelText}</Button>;
65+
return (
66+
<Button {...props} variant="outline">
67+
{labelText}
68+
</Button>
69+
);
6670
}
6771

6872
function SmsButton(props: ComponentProps<typeof Button>) {
6973
const ui = useUI();
7074
const labelText = getTranslation(ui, "labels", "mfaSmsVerification");
71-
return <Button {...props}>{labelText}</Button>;
75+
return (
76+
<Button {...props} variant="outline">
77+
{labelText}
78+
</Button>
79+
);
7280
}

‎packages/shadcn/src/components/multi-factor-auth-enrollment-form.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ describe("<MultiFactorAuthEnrollmentForm />", () => {
277277
</FirebaseUIProvider>
278278
);
279279

280-
const contentDiv = container.querySelector(".space-y-2");
280+
const contentDiv = container.querySelector(".flex.flex-col.gap-2");
281281
expect(contentDiv).toBeInTheDocument();
282282
});
283283

0 commit comments

Comments
 (0)