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
clerk · Feb 5, 2024 · e1c8ea0 · e1c8ea0
1 parent e246c7e
commit e1c8ea0
Show file tree

Hide file tree

Showing 19 changed files with 69 additions and 55 deletions.
diff --git a/.changeset/thin-trees-poke.md b/.changeset/thin-trees-poke.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -39,8 +39,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
     <Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title
               localizationKey={localizationKeys(
                 asForgotPassword ? 'signIn.forgotPasswordAlternativeMethods.title' : 'signIn.alternativeMethods.title',
@@ -50,11 +49,12 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
               <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />
             )}
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
           <Flex
             direction='col'
             elementDescriptor={descriptors.main}
-            gap={6}
+            gap={3}
           >
             {asForgotPassword && resetPasswordFactor && (
               <Button

diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx b/packages/clerk-js/src/ui/components/SignIn/ResetPassword.tsx
@@ -98,10 +98,10 @@ export const _ResetPassword = () => {
   return (
     <Card.Root>
       <Card.Content>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
+        <Header.Root showLogo>
           <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
         </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
         <Col
           elementDescriptor={descriptors.main}
           gap={8}
@@ -145,7 +145,7 @@ export const _ResetPassword = () => {
                 </Form.ControlRow>
               )}
             </Col>
-            <Col gap={4}>
+            <Col gap={3}>
               <Form.SubmitButton
                 isDisabled={!canSubmit}
                 localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}

diff --git a/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx b/packages/clerk-js/src/ui/components/SignIn/ResetPasswordSuccess.tsx
@@ -9,10 +9,10 @@ export const _ResetPasswordSuccess = () => {
   return (
     <Card.Root>
       <Card.Content>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
+        <Header.Root showLogo>
           <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />
         </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
         <Col
           elementDescriptor={descriptors.main}
           gap={8}

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -24,11 +24,11 @@ const _SignInAccountSwitcher = () => {
     <Flow.Part part='accountSwitcher'>
       <Card.Root>
         <Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}>
-          <Card.Alert>{card.error}</Card.Alert>
           <Header.Root>
             <Header.Title localizationKey={localizationKeys('signIn.accountSwitcher.title')} />
             <Header.Subtitle localizationKey={localizationKeys('signIn.accountSwitcher.subtitle')} />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           <Col
             elementDescriptor={descriptors.main}
             gap={8}

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -92,9 +92,8 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   return (
     <Flow.Part part='password'>
       <Card.Root>
-        <Card.Content gap={4}>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root gap={1}>
+        <Card.Content>
+          <Header.Root showLogo>
             <Header.Title localizationKey={localizationKeys('signIn.password.title')} />
             <Header.Subtitle localizationKey={localizationKeys('signIn.password.subtitle')} />
             <IdentityPreview
@@ -103,6 +102,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
               onClick={goBack}
             />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
           <Flex
             direction='col'

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -40,15 +40,15 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
     <Flow.Part part='alternativeMethods'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title localizationKey={localizationKeys('signIn.alternativeMethods.title')} />
             <Header.Subtitle localizationKey={localizationKeys('signIn.alternativeMethods.subtitle')} />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
           <Col
             elementDescriptor={descriptors.main}
-            gap={4}
+            gap={3}
           >
             <Col gap={2}>
               {supportedSecondFactors.sort(backupCodePrefFactorComparator).map((factor, i) => (

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
@@ -65,8 +65,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
   return (
     <Card.Root>
       <Card.Content>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
+        <Header.Root showLogo>
           <Header.Title localizationKey={localizationKeys('signIn.backupCodeMfa.title')} />
           <Header.Subtitle
             localizationKey={
@@ -76,6 +75,7 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
             }
           />
         </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
         <Col
           elementDescriptor={descriptors.main}
           gap={8}
@@ -88,17 +88,19 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
                 onActionClicked={onShowAlternativeMethodsClicked}
               />
             </Form.ControlRow>
-            <Form.SubmitButton hasArrow />
+            <Col gap={3}>
+              <Form.SubmitButton hasArrow />
+              <Card.Action elementId='alternativeMethods'>
+                {onShowAlternativeMethodsClicked && (
+                  <Card.ActionLink
+                    localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
+                    onClick={onShowAlternativeMethodsClicked}
+                  />
+                )}
+              </Card.Action>
+            </Col>
           </Form.Root>
         </Col>
-        <Card.Action elementId='alternativeMethods'>
-          {onShowAlternativeMethodsClicked && (
-            <Card.ActionLink
-              localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
-              onClick={onShowAlternativeMethodsClicked}
-            />
-          )}
-        </Card.Action>
       </Card.Content>
 
       <Card.Footer />

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -287,11 +287,11 @@ export function _SignInStart(): JSX.Element {
     <Flow.Part part='start'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title localizationKey={localizationKeys('signIn.start.title')} />
             <Header.Subtitle localizationKey={localizationKeys('signIn.start.subtitle')} />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
           <Col
             elementDescriptor={descriptors.main}

diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
@@ -160,11 +160,11 @@ function _SignUpContinue() {
     <Flow.Part part='complete'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title localizationKey={localizationKeys('signUp.continue.title')} />
             <Header.Subtitle localizationKey={localizationKeys('signUp.continue.subtitle')} />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           <Flex
             direction='col'
             elementDescriptor={descriptors.main}

diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -244,11 +244,11 @@ function _SignUpStart(): JSX.Element {
     <Flow.Part part='start'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title localizationKey={localizationKeys('signUp.start.title')} />
             <Header.Subtitle localizationKey={localizationKeys('signUp.start.subtitle')} />
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           <Flex
             direction='col'
             elementDescriptor={descriptors.main}

diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
@@ -59,7 +59,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
       {...props}
       sx={[
         theme => ({
-          height: getContainerHeightForImageRatio(imageRef, theme.sizes.$6),
+          height: getContainerHeightForImageRatio(imageRef, theme.sizes.$4),
           objectFit: 'cover',
           justifyContent: 'center',
         }),

diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { descriptors, Flex, generateFlowPartClassname, Icon, useAppearance } from '../../customizables';
+import { descriptors, Flex, generateFlowPartClassname, Icon } from '../../customizables';
 import { Close } from '../../icons';
 import { type PropsOfComponent } from '../../styledSystem';
-import { ApplicationLogo } from '..';
 import { useFlowMetadata } from '../contexts';
 import { IconButton } from '../IconButton';
 import { useUnsafeModalContext } from '../Modal';
@@ -12,14 +11,12 @@ type CardContentProps = PropsOfComponent<typeof Flex>;
 export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
   const { children, sx, ...rest } = props;
   const flowMetadata = useFlowMetadata();
-  const appearance = useAppearance();
   const { toggle } = useUnsafeModalContext();
 
   return (
     <Flex
       direction='col'
       className={generateFlowPartClassname(flowMetadata)}
-      {...rest}
       elementDescriptor={descriptors.card}
       sx={[
         t => ({
@@ -31,16 +28,16 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: t.space.$8,
-          gap: t.space.$8,
+          padding: `${t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),
         sx,
       ]}
+      gap={8}
       ref={ref}
+      {...rest}
     >
-      {appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo />}
       {toggle && (
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}

diff --git a/packages/clerk-js/src/ui/elements/ErrorCard.tsx b/packages/clerk-js/src/ui/elements/ErrorCard.tsx
@@ -36,11 +36,11 @@ export const ErrorCard = (props: ErrorCardProps) => {
     <Flow.Part part='havingTrouble'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title localizationKey={props.cardTitle || 'Error'} />
             {props.cardSubtitle && <Header.Subtitle localizationKey={props.cardSubtitle} />}
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
           <Flex
             direction='col'

diff --git a/packages/clerk-js/src/ui/elements/Header.tsx b/packages/clerk-js/src/ui/elements/Header.tsx
@@ -1,19 +1,31 @@
 import React from 'react';
 
-import { Col, descriptors, Heading, Text } from '../customizables';
+import { Col, descriptors, Heading, Text, useAppearance } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
+import { ApplicationLogo } from './ApplicationLogo';
+
+export type HeaderProps = PropsOfComponent<typeof Col> & {
+  showLogo?: boolean;
+};
 
 const Root = React.memo(
-  React.forwardRef<HTMLDivElement, PropsOfComponent<typeof Col>>((props, ref) => {
-    const { sx, ...rest } = props;
+  React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
+    const { sx, children, showLogo = false, ...rest } = props;
+    const appearance = useAppearance();
+
+    const logoIsVisible = appearance.parsedLayout.logoPlacement === 'inside' && showLogo;
+
     return (
       <Col
         ref={ref}
         elementDescriptor={descriptors.header}
-        gap={1}
+        gap={6}
         sx={sx}
         {...rest}
-      />
+      >
+        {logoIsVisible && <ApplicationLogo />}
+        <Col gap={1}>{children}</Col>
+      </Col>
     );
   }),
 );

diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx
@@ -128,7 +128,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         </SelectButton>
         <SelectOptionList
           sx={{ width: '100%', padding: '0 0' }}
-          containerSx={{ gap: 0 }}
+          containerSx={theme => ({ gap: 0, padding: `${theme.space.$0x5} 0` })}
         />
       </Select>
 
@@ -187,7 +187,7 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
         theme => ({
           width: '100%',
           gap: theme.space.$2,
-          padding: `${theme.space.$0x5} ${theme.space.$4}`,
+          padding: `${theme.space.$1x5} ${theme.space.$4}`,
         }),
         sx,
       ]}

diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -170,6 +170,7 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
       elementDescriptor={descriptors.socialButtonsIconButton}
       elementId={descriptors.socialButtonsIconButton.setId(id)}
       variant='secondary'
+      textVariant='buttonLarge'
       sx={t => ({
         minHeight: t.sizes.$8,
         width: '100%',
@@ -243,7 +244,7 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
           elementId={descriptors.socialButtonsBlockButtonText.setId(id)}
           as='span'
           truncate
-          variant='buttonSmall'
+          variant='buttonLarge'
           localizationKey={textLocalizationKey}
         >
           {label}

diff --git a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
@@ -43,8 +43,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
   return (
     <Card.Root>
       <Card.Content>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
+        <Header.Root showLogo>
           <Header.Title localizationKey={props.cardTitle} />
           <Header.Subtitle localizationKey={props.cardSubtitle} />
           <IdentityPreview
@@ -53,6 +52,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
             onClick={!props.onBackLinkClicked ? props.onIdentityPreviewEditClicked : undefined}
           />
         </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
         {children}
         <Col
           elementDescriptor={descriptors.main}
@@ -63,7 +63,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
             label={props.inputLabel}
             resendButton={props.resendButton}
           />
-          <Col gap={4}>
+          <Col gap={3}>
             <Button
               elementDescriptor={descriptors.formButtonPrimary}
               block

diff --git a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
@@ -33,8 +33,7 @@ export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
     <Flow.Part part='emailLinkVerify'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
             <Header.Title localizationKey={props.cardTitle} />
             <VerificationLink
               formTitle={props.formTitle}
@@ -50,6 +49,7 @@ export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
               />
             </VerificationLink>
           </Header.Root>
+          <Card.Alert>{card.error}</Card.Alert>
           <Card.Action elementId='alternativeMethods'>
             {props.onShowAlternativeMethodsClicked && (
               <Card.ActionLink