Skip to content

Commit 432fcfb

Browse files
joe-belljoe-bell
authored
fix(ui): Sizing and spacing adjustments (#3851)
1 parent 992e596 commit 432fcfb

File tree

8 files changed

+539
-473
lines changed

8 files changed

+539
-473
lines changed

‎.changeset/metal-cups-judge.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/components/sign-in/sign-in.tsx

+403-388
Large diffs are not rendered by default.

‎packages/ui/src/components/sign-up/sign-up.tsx

+73-58
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,14 @@ function SignUpComponentLoaded() {
7373
})}
7474
</Card.Description>
7575
</Card.Header>
76-
<Card.Body>
77-
<Common.GlobalError>
78-
{({ message }) => {
79-
return <Alert>{message}</Alert>;
80-
}}
81-
</Common.GlobalError>
8276

77+
<Common.GlobalError>
78+
{({ message }) => {
79+
return <Alert>{message}</Alert>;
80+
}}
81+
</Common.GlobalError>
82+
83+
<Card.Body>
8384
<Connections disabled={isGlobalLoading} />
8485

8586
{hasConnection && hasIdentifier ? <Separator>{t('dividerText')}</Separator> : null}
@@ -137,11 +138,12 @@ function SignUpComponentLoaded() {
137138
) : null}
138139

139140
{userSettings.signUp.captcha_enabled ? <SignUp.Captcha className='empty:hidden' /> : null}
140-
141-
{hasConnection || hasIdentifier ? (
142-
<Common.Loading scope='step:start'>
143-
{isSubmitting => {
144-
return (
141+
</Card.Body>
142+
{hasConnection || hasIdentifier ? (
143+
<Common.Loading scope='step:start'>
144+
{isSubmitting => {
145+
return (
146+
<Card.Actions>
145147
<SignUp.Action
146148
submit
147149
asChild
@@ -155,11 +157,11 @@ function SignUpComponentLoaded() {
155157
{t('formButtonPrimary')}
156158
</Button>
157159
</SignUp.Action>
158-
);
159-
}}
160-
</Common.Loading>
161-
) : null}
162-
</Card.Body>
160+
</Card.Actions>
161+
);
162+
}}
163+
</Common.Loading>
164+
) : null}
163165
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
164166
</Card.Content>
165167
<Card.Footer branded={branded}>
@@ -198,12 +200,14 @@ function SignUpComponentLoaded() {
198200
</span>
199201
</Card.Description>
200202
</Card.Header>
203+
204+
<Common.GlobalError>
205+
{({ message }) => {
206+
return <Alert>{message}</Alert>;
207+
}}
208+
</Common.GlobalError>
209+
201210
<Card.Body>
202-
<Common.GlobalError>
203-
{({ message }) => {
204-
return <Alert>{message}</Alert>;
205-
}}
206-
</Common.GlobalError>
207211
<OTPField
208212
label={t('signUp.phoneCode.formTitle')}
209213
disabled={isGlobalLoading}
@@ -226,9 +230,11 @@ function SignUpComponentLoaded() {
226230
</SignUp.Action>
227231
}
228232
/>
229-
<Common.Loading scope='step:verifications'>
230-
{isSubmitting => {
231-
return (
233+
</Card.Body>
234+
<Common.Loading scope='step:verifications'>
235+
{isSubmitting => {
236+
return (
237+
<Card.Actions>
232238
<SignUp.Action
233239
submit
234240
asChild
@@ -242,10 +248,10 @@ function SignUpComponentLoaded() {
242248
{t('formButtonPrimary')}
243249
</Button>
244250
</SignUp.Action>
245-
);
246-
}}
247-
</Common.Loading>
248-
</Card.Body>
251+
</Card.Actions>
252+
);
253+
}}
254+
</Common.Loading>
249255
</SignUp.Strategy>
250256

251257
<SignUp.Strategy name='email_code'>
@@ -270,12 +276,14 @@ function SignUpComponentLoaded() {
270276
</span>
271277
</Card.Description>
272278
</Card.Header>
279+
280+
<Common.GlobalError>
281+
{({ message }) => {
282+
return <Alert>{message}</Alert>;
283+
}}
284+
</Common.GlobalError>
285+
273286
<Card.Body>
274-
<Common.GlobalError>
275-
{({ message }) => {
276-
return <Alert>{message}</Alert>;
277-
}}
278-
</Common.GlobalError>
279287
<OTPField
280288
label={t('signUp.emailCode.formTitle')}
281289
disabled={isGlobalLoading}
@@ -298,9 +306,11 @@ function SignUpComponentLoaded() {
298306
</SignUp.Action>
299307
}
300308
/>
301-
<Common.Loading scope='step:verifications'>
302-
{isSubmitting => {
303-
return (
309+
</Card.Body>
310+
<Common.Loading scope='step:verifications'>
311+
{isSubmitting => {
312+
return (
313+
<Card.Actions>
304314
<SignUp.Action
305315
submit
306316
asChild
@@ -314,10 +324,10 @@ function SignUpComponentLoaded() {
314324
{t('formButtonPrimary')}
315325
</Button>
316326
</SignUp.Action>
317-
);
318-
}}
319-
</Common.Loading>
320-
</Card.Body>
327+
</Card.Actions>
328+
);
329+
}}
330+
</Common.Loading>
321331
</SignUp.Strategy>
322332

323333
<SignUp.Strategy name='email_link'>
@@ -346,12 +356,14 @@ function SignUpComponentLoaded() {
346356
</span>
347357
</Card.Description>
348358
</Card.Header>
359+
360+
<Common.GlobalError>
361+
{({ message }) => {
362+
return <Alert>{message}</Alert>;
363+
}}
364+
</Common.GlobalError>
365+
349366
<Card.Body>
350-
<Common.GlobalError>
351-
{({ message }) => {
352-
return <Alert>{message}</Alert>;
353-
}}
354-
</Common.GlobalError>
355367
<SignUp.Action
356368
resend
357369
asChild
@@ -385,12 +397,14 @@ function SignUpComponentLoaded() {
385397
<Card.Title>{t('signUp.continue.title')}</Card.Title>
386398
<Card.Description>{t('signUp.continue.subtitle')}</Card.Description>
387399
</Card.Header>
400+
401+
<Common.GlobalError>
402+
{({ message }) => {
403+
return <Alert>{message}</Alert>;
404+
}}
405+
</Common.GlobalError>
406+
388407
<Card.Body>
389-
<Common.GlobalError>
390-
{({ message }) => {
391-
return <Alert>{message}</Alert>;
392-
}}
393-
</Common.GlobalError>
394408
<div className='space-y-4'>
395409
{firstNameEnabled && lastNameEnabled ? (
396410
<div className='flex gap-4'>
@@ -430,10 +444,11 @@ function SignUpComponentLoaded() {
430444
/>
431445
) : null}
432446
</div>
433-
434-
<Common.Loading scope='step:continue'>
435-
{isSubmitting => {
436-
return (
447+
</Card.Body>
448+
<Common.Loading scope='step:continue'>
449+
{isSubmitting => {
450+
return (
451+
<Card.Actions>
437452
<SignUp.Action
438453
submit
439454
asChild
@@ -447,10 +462,10 @@ function SignUpComponentLoaded() {
447462
{t('formButtonPrimary')}
448463
</Button>
449464
</SignUp.Action>
450-
);
451-
}}
452-
</Common.Loading>
453-
</Card.Body>
465+
</Card.Actions>
466+
);
467+
}}
468+
</Common.Loading>
454469
{isDev ? <Card.Banner>Development mode</Card.Banner> : null}
455470
</Card.Content>
456471
<Card.Footer branded={branded}>

‎packages/ui/src/primitives/alert.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,14 @@ export const Alert = React.forwardRef<
2323
)}
2424
>
2525
<div className='flex gap-x-2'>
26-
{
26+
<span className='mt-0.5 shrink-0 *:size-4'>
2727
{
28-
error: <Icon.ExclamationOctagonSm className='size-4 shrink-0' />,
29-
warning: <Icon.ExclamationTriangleSm className='size-4 shrink-0' />,
30-
}[intent]
31-
}
28+
{
29+
error: <Icon.ExclamationOctagonSm />,
30+
warning: <Icon.ExclamationTriangleSm />,
31+
}[intent]
32+
}
33+
</span>
3234
{children}
3335
</div>
3436
</div>

‎packages/ui/src/primitives/button.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { Spinner } from './spinner';
66

77
const button = cva({
88
base: [
9+
'[--button-border-width:1px]',
910
'appearance-none relative isolate select-none',
1011
'text-base font-medium',
11-
'px-3 py-1.5',
12-
'inline-flex w-full items-center justify-center gap-2',
13-
'border rounded-md',
12+
'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
13+
'inline-flex w-full items-center justify-center gap-3',
14+
'border-[length:--button-border-width] rounded-md bg-clip-padding',
1415
'outline-none focus-visible:ring',
1516
'*:min-w-0',
1617
],
@@ -23,7 +24,6 @@ const button = cva({
2324
'focus-visible:ring-accent-a7',
2425
],
2526
secondary: [
26-
'bg-clip-padding',
2727
'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
2828
'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
2929
],
@@ -73,6 +73,7 @@ export const Button = React.forwardRef(function Button(
7373
) {
7474
return (
7575
<button
76+
data-button=''
7677
ref={forwardedRef}
7778
className={button({ busy, disabled, intent, className })}
7879
disabled={busy || disabled}

0 commit comments

Comments
 (0)