Skip to content

Commit e1c8ea0

Browse files
octoperoctoper
authored
fix(clerk-js): SignIn/SignUp component spacing adjustment (#2716)
* fix(clerk-js): Spacing fixes for Sign In & Sign Up components * fix(clerk-js): Spacing fixes for Sign In / Sign Up components * fix(clerk-js): Fix social button font size * chore(repo): Add Changeset * fix(clerk-js): Move errors outside of header
1 parent e246c7e commit e1c8ea0

19 files changed

+69
-55
lines changed

‎.changeset/thin-trees-poke.md

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

‎packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
3939
<Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
4040
<Card.Root>
4141
<Card.Content>
42-
<Card.Alert>{card.error}</Card.Alert>
43-
<Header.Root>
42+
<Header.Root showLogo>
4443
<Header.Title
4544
localizationKey={localizationKeys(
4645
asForgotPassword ? 'signIn.forgotPasswordAlternativeMethods.title' : 'signIn.alternativeMethods.title',
@@ -50,11 +49,12 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
5049
<Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />
5150
)}
5251
</Header.Root>
52+
<Card.Alert>{card.error}</Card.Alert>
5353
{/*TODO: extract main in its own component */}
5454
<Flex
5555
direction='col'
5656
elementDescriptor={descriptors.main}
57-
gap={6}
57+
gap={3}
5858
>
5959
{asForgotPassword && resetPasswordFactor && (
6060
<Button

‎packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -98,10 +98,10 @@ export const _ResetPassword = () => {
9898
return (
9999
<Card.Root>
100100
<Card.Content>
101-
<Card.Alert>{card.error}</Card.Alert>
102-
<Header.Root>
101+
<Header.Root showLogo>
103102
<Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
104103
</Header.Root>
104+
<Card.Alert>{card.error}</Card.Alert>
105105
<Col
106106
elementDescriptor={descriptors.main}
107107
gap={8}
@@ -145,7 +145,7 @@ export const _ResetPassword = () => {
145145
</Form.ControlRow>
146146
)}
147147
</Col>
148-
<Col gap={4}>
148+
<Col gap={3}>
149149
<Form.SubmitButton
150150
isDisabled={!canSubmit}
151151
localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}

‎packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export const _ResetPasswordSuccess = () => {
99
return (
1010
<Card.Root>
1111
<Card.Content>
12-
<Card.Alert>{card.error}</Card.Alert>
13-
<Header.Root>
12+
<Header.Root showLogo>
1413
<Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
1514
</Header.Root>
15+
<Card.Alert>{card.error}</Card.Alert>
1616
<Col
1717
elementDescriptor={descriptors.main}
1818
gap={8}

‎packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ const _SignInAccountSwitcher = () => {
2424
<Flow.Part part='accountSwitcher'>
2525
<Card.Root>
2626
<Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}>
27-
<Card.Alert>{card.error}</Card.Alert>
2827
<Header.Root>
2928
<Header.Title localizationKey={localizationKeys('signIn.accountSwitcher.title')} />
3029
<Header.Subtitle localizationKey={localizationKeys('signIn.accountSwitcher.subtitle')} />
3130
</Header.Root>
31+
<Card.Alert>{card.error}</Card.Alert>
3232
<Col
3333
elementDescriptor={descriptors.main}
3434
gap={8}

‎packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,8 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
9292
return (
9393
<Flow.Part part='password'>
9494
<Card.Root>
95-
<Card.Content gap={4}>
96-
<Card.Alert>{card.error}</Card.Alert>
97-
<Header.Root gap={1}>
95+
<Card.Content>
96+
<Header.Root showLogo>
9897
<Header.Title localizationKey={localizationKeys('signIn.password.title')} />
9998
<Header.Subtitle localizationKey={localizationKeys('signIn.password.subtitle')} />
10099
<IdentityPreview
@@ -103,6 +102,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
103102
onClick={goBack}
104103
/>
105104
</Header.Root>
105+
<Card.Alert>{card.error}</Card.Alert>
106106
{/*TODO: extract main in its own component */}
107107
<Flex
108108
direction='col'

‎packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
4040
<Flow.Part part='alternativeMethods'>
4141
<Card.Root>
4242
<Card.Content>
43-
<Card.Alert>{card.error}</Card.Alert>
44-
<Header.Root>
43+
<Header.Root showLogo>
4544
<Header.Title localizationKey={localizationKeys('signIn.alternativeMethods.title')} />
4645
<Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />
4746
</Header.Root>
47+
<Card.Alert>{card.error}</Card.Alert>
4848
{/*TODO: extract main in its own component */}
4949
<Col
5050
elementDescriptor={descriptors.main}
51-
gap={4}
51+
gap={3}
5252
>
5353
<Col gap={2}>
5454
{supportedSecondFactors.sort(backupCodePrefFactorComparator).map((factor, i) => (

‎packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
6565
return (
6666
<Card.Root>
6767
<Card.Content>
68-
<Card.Alert>{card.error}</Card.Alert>
69-
<Header.Root>
68+
<Header.Root showLogo>
7069
<Header.Title localizationKey={localizationKeys('signIn.backupCodeMfa.title')} />
7170
<Header.Subtitle
7271
localizationKey={
@@ -76,6 +75,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
7675
}
7776
/>
7877
</Header.Root>
78+
<Card.Alert>{card.error}</Card.Alert>
7979
<Col
8080
elementDescriptor={descriptors.main}
8181
gap={8}
@@ -88,17 +88,19 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
8888
onActionClicked={onShowAlternativeMethodsClicked}
8989
/>
9090
</Form.ControlRow>
91-
<Form.SubmitButton hasArrow />
91+
<Col gap={3}>
92+
<Form.SubmitButton hasArrow />
93+
<Card.Action elementId='alternativeMethods'>
94+
{onShowAlternativeMethodsClicked && (
95+
<Card.ActionLink
96+
localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
97+
onClick={onShowAlternativeMethodsClicked}
98+
/>
99+
)}
100+
</Card.Action>
101+
</Col>
92102
</Form.Root>
93103
</Col>
94-
<Card.Action elementId='alternativeMethods'>
95-
{onShowAlternativeMethodsClicked && (
96-
<Card.ActionLink
97-
localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
98-
onClick={onShowAlternativeMethodsClicked}
99-
/>
100-
)}
101-
</Card.Action>
102104
</Card.Content>
103105

104106
<Card.Footer />

‎packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -287,11 +287,11 @@ export function _SignInStart(): JSX.Element {
287287
<Flow.Part part='start'>
288288
<Card.Root>
289289
<Card.Content>
290-
<Card.Alert>{card.error}</Card.Alert>
291-
<Header.Root>
290+
<Header.Root showLogo>
292291
<Header.Title localizationKey={localizationKeys('signIn.start.title')} />
293292
<Header.Subtitle localizationKey={localizationKeys('signIn.start.subtitle')} />
294293
</Header.Root>
294+
<Card.Alert>{card.error}</Card.Alert>
295295
{/*TODO: extract main in its own component */}
296296
<Col
297297
elementDescriptor={descriptors.main}

‎packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,11 @@ function _SignUpContinue() {
160160
<Flow.Part part='complete'>
161161
<Card.Root>
162162
<Card.Content>
163-
<Card.Alert>{card.error}</Card.Alert>
164-
<Header.Root>
163+
<Header.Root showLogo>
165164
<Header.Title localizationKey={localizationKeys('signUp.continue.title')} />
166165
<Header.Subtitle localizationKey={localizationKeys('signUp.continue.subtitle')} />
167166
</Header.Root>
167+
<Card.Alert>{card.error}</Card.Alert>
168168
<Flex
169169
direction='col'
170170
elementDescriptor={descriptors.main}

‎packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,11 @@ function _SignUpStart(): JSX.Element {
244244
<Flow.Part part='start'>
245245
<Card.Root>
246246
<Card.Content>
247-
<Card.Alert>{card.error}</Card.Alert>
248-
<Header.Root>
247+
<Header.Root showLogo>
249248
<Header.Title localizationKey={localizationKeys('signUp.start.title')} />
250249
<Header.Subtitle localizationKey={localizationKeys('signUp.start.subtitle')} />
251250
</Header.Root>
251+
<Card.Alert>{card.error}</Card.Alert>
252252
<Flex
253253
direction='col'
254254
elementDescriptor={descriptors.main}

‎packages/clerk-js/src/ui/elements/ApplicationLogo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
5959
{...props}
6060
sx={[
6161
theme => ({
62-
height: getContainerHeightForImageRatio(imageRef, theme.sizes.$6),
62+
height: getContainerHeightForImageRatio(imageRef, theme.sizes.$4),
6363
objectFit: 'cover',
6464
justifyContent: 'center',
6565
}),

‎packages/clerk-js/src/ui/elements/Card/CardContent.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
22

3-
import { descriptors, Flex, generateFlowPartClassname, Icon, useAppearance } from '../../customizables';
3+
import { descriptors, Flex, generateFlowPartClassname, Icon } from '../../customizables';
44
import { Close } from '../../icons';
55
import { type PropsOfComponent } from '../../styledSystem';
6-
import { ApplicationLogo } from '..';
76
import { useFlowMetadata } from '../contexts';
87
import { IconButton } from '../IconButton';
98
import { useUnsafeModalContext } from '../Modal';
@@ -12,14 +11,12 @@ type CardContentProps = PropsOfComponent<typeof Flex>;
1211
export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
1312
const { children, sx, ...rest } = props;
1413
const flowMetadata = useFlowMetadata();
15-
const appearance = useAppearance();
1614
const { toggle } = useUnsafeModalContext();
1715

1816
return (
1917
<Flex
2018
direction='col'
2119
className={generateFlowPartClassname(flowMetadata)}
22-
{...rest}
2320
elementDescriptor={descriptors.card}
2421
sx={[
2522
t => ({
@@ -31,16 +28,16 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
3128
boxShadow: t.shadows.$cardContentShadow,
3229
borderRadius: t.radii.$lg,
3330
position: 'relative',
34-
padding: t.space.$8,
35-
gap: t.space.$8,
31+
padding: `${t.space.$8} ${t.space.$10}`,
3632
justifyContent: 'center',
3733
alignContent: 'center',
3834
}),
3935
sx,
4036
]}
37+
gap={8}
4138
ref={ref}
39+
{...rest}
4240
>
43-
{appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo />}
4441
{toggle && (
4542
<IconButton
4643
elementDescriptor={descriptors.modalCloseButton}

‎packages/clerk-js/src/ui/elements/ErrorCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,11 @@ export const ErrorCard = (props: ErrorCardProps) => {
3636
<Flow.Part part='havingTrouble'>
3737
<Card.Root>
3838
<Card.Content>
39-
<Card.Alert>{card.error}</Card.Alert>
40-
<Header.Root>
39+
<Header.Root showLogo>
4140
<Header.Title localizationKey={props.cardTitle || 'Error'} />
4241
{props.cardSubtitle && <Header.Subtitle localizationKey={props.cardSubtitle} />}
4342
</Header.Root>
43+
<Card.Alert>{card.error}</Card.Alert>
4444
{/*TODO: extract main in its own component */}
4545
<Flex
4646
direction='col'

‎packages/clerk-js/src/ui/elements/Header.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
11
import React from 'react';
22

3-
import { Col, descriptors, Heading, Text } from '../customizables';
3+
import { Col, descriptors, Heading, Text, useAppearance } from '../customizables';
44
import type { PropsOfComponent } from '../styledSystem';
5+
import { ApplicationLogo } from './ApplicationLogo';
6+
7+
export type HeaderProps = PropsOfComponent<typeof Col> & {
8+
showLogo?: boolean;
9+
};
510

611
const Root = React.memo(
7-
React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Col>>((props, ref) => {
8-
const { sx, ...rest } = props;
12+
React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
13+
const { sx, children, showLogo = false, ...rest } = props;
14+
const appearance = useAppearance();
15+
16+
const logoIsVisible = appearance.parsedLayout.logoPlacement === 'inside' && showLogo;
17+
918
return (
1019
<Col
1120
ref={ref}
1221
elementDescriptor={descriptors.header}
13-
gap={1}
22+
gap={6}
1423
sx={sx}
1524
{...rest}
16-
/>
25+
>
26+
{logoIsVisible && <ApplicationLogo />}
27+
<Col gap={1}>{children}</Col>
28+
</Col>
1729
);
1830
}),
1931
);

‎packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
128128
</SelectButton>
129129
<SelectOptionList
130130
sx={{ width: '100%', padding: '0 0' }}
131-
containerSx={{ gap: 0 }}
131+
containerSx={theme => ({ gap: 0, padding: `${theme.space.$0x5} 0` })}
132132
/>
133133
</Select>
134134

@@ -187,7 +187,7 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
187187
theme => ({
188188
width: '100%',
189189
gap: theme.space.$2,
190-
padding: `${theme.space.$0x5} ${theme.space.$4}`,
190+
padding: `${theme.space.$1x5} ${theme.space.$4}`,
191191
}),
192192
sx,
193193
]}

‎packages/clerk-js/src/ui/elements/SocialButtons.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
170170
elementDescriptor={descriptors.socialButtonsIconButton}
171171
elementId={descriptors.socialButtonsIconButton.setId(id)}
172172
variant='secondary'
173+
textVariant='buttonLarge'
173174
sx={t => ({
174175
minHeight: t.sizes.$8,
175176
width: '100%',
@@ -243,7 +244,7 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
243244
elementId={descriptors.socialButtonsBlockButtonText.setId(id)}
244245
as='span'
245246
truncate
246-
variant='buttonSmall'
247+
variant='buttonLarge'
247248
localizationKey={textLocalizationKey}
248249
>
249250
{label}

‎packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
4343
return (
4444
<Card.Root>
4545
<Card.Content>
46-
<Card.Alert>{card.error}</Card.Alert>
47-
<Header.Root>
46+
<Header.Root showLogo>
4847
<Header.Title localizationKey={props.cardTitle} />
4948
<Header.Subtitle localizationKey={props.cardSubtitle} />
5049
<IdentityPreview
@@ -53,6 +52,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
5352
onClick={!props.onBackLinkClicked ? props.onIdentityPreviewEditClicked : undefined}
5453
/>
5554
</Header.Root>
55+
<Card.Alert>{card.error}</Card.Alert>
5656
{children}
5757
<Col
5858
elementDescriptor={descriptors.main}
@@ -63,7 +63,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
6363
label={props.inputLabel}
6464
resendButton={props.resendButton}
6565
/>
66-
<Col gap={4}>
66+
<Col gap={3}>
6767
<Button
6868
elementDescriptor={descriptors.formButtonPrimary}
6969
block

‎packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
3333
<Flow.Part part='emailLinkVerify'>
3434
<Card.Root>
3535
<Card.Content>
36-
<Card.Alert>{card.error}</Card.Alert>
37-
<Header.Root>
36+
<Header.Root showLogo>
3837
<Header.Title localizationKey={props.cardTitle} />
3938
<VerificationLink
4039
formTitle={props.formTitle}
@@ -50,6 +49,7 @@ export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
5049
/>
5150
</VerificationLink>
5251
</Header.Root>
52+
<Card.Alert>{card.error}</Card.Alert>
5353
<Card.Action elementId='alternativeMethods'>
5454
{props.onShowAlternativeMethodsClicked && (
5555
<Card.ActionLink

0 commit comments

Comments
 (0)