From 0588fbb450b05a519480e13b0f4f78240cd9c08b Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 1 Feb 2024 21:26:46 +0200
Subject: [PATCH 1/5] fix(clerk-js): Spacing fixes for Sign In & Sign Up
 components

---
 .../src/ui/components/SignIn/AlternativeMethods.tsx         | 4 ++--
 .../ui/components/SignIn/SignInFactorOnePasswordCard.tsx    | 2 +-
 .../components/SignIn/SignInFactorTwoAlternativeMethods.tsx | 2 +-
 packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx  | 2 +-
 packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx  | 2 +-
 packages/clerk-js/src/ui/elements/ApplicationLogo.tsx       | 2 +-
 packages/clerk-js/src/ui/elements/Card/CardContent.tsx      | 6 +++---
 packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx  | 2 +-
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
index c477fca49ca..d97cd5464a1 100644
--- a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -38,7 +38,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
   return (
     <Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
       <Card.Root>
-        <Card.Content>
+        <Card.Content gap={6}>
           <Card.Alert>{card.error}</Card.Alert>
           <Header.Root>
             <Header.Title
@@ -54,7 +54,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
           <Flex
             direction='col'
             elementDescriptor={descriptors.main}
-            gap={6}
+            gap={4}
           >
             {asForgotPassword && resetPasswordFactor && (
               <Button
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
index d6b42354f07..289bd281f88 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -92,7 +92,7 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
   return (
     <Flow.Part part='password'>
       <Card.Root>
-        <Card.Content gap={4}>
+        <Card.Content gap={6}>
           <Card.Alert>{card.error}</Card.Alert>
           <Header.Root gap={1}>
             <Header.Title localizationKey={localizationKeys('signIn.password.title')} />
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
index 6ffe67573b8..8a76ee9e384 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -39,7 +39,7 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
   return (
     <Flow.Part part='alternativeMethods'>
       <Card.Root>
-        <Card.Content>
+        <Card.Content gap={6}>
           <Card.Alert>{card.error}</Card.Alert>
           <Header.Root>
             <Header.Title localizationKey={localizationKeys('signIn.alternativeMethods.title')} />
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 16682fd8509..ae1202501c9 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -286,7 +286,7 @@ export function _SignInStart(): JSX.Element {
   return (
     <Flow.Part part='start'>
       <Card.Root>
-        <Card.Content>
+        <Card.Content gap={6}>
           <Card.Alert>{card.error}</Card.Alert>
           <Header.Root>
             <Header.Title localizationKey={localizationKeys('signIn.start.title')} />
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
index fcd743e7569..b6563280a38 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -243,7 +243,7 @@ function _SignUpStart(): JSX.Element {
   return (
     <Flow.Part part='start'>
       <Card.Root>
-        <Card.Content>
+        <Card.Content gap={6}>
           <Card.Alert>{card.error}</Card.Alert>
           <Header.Root>
             <Header.Title localizationKey={localizationKeys('signUp.start.title')} />
diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
index 353468ffa72..38b31a184f1 100644
--- 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
index ceb53782037..bd40a5f3ee3 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -10,7 +10,7 @@ import { useUnsafeModalContext } from '../Modal';
 
 type CardContentProps = PropsOfComponent<typeof Flex>;
 export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
-  const { children, sx, ...rest } = props;
+  const { children, sx, gap = 8, ...rest } = props;
   const flowMetadata = useFlowMetadata();
   const appearance = useAppearance();
   const { toggle } = useUnsafeModalContext();
@@ -19,7 +19,6 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
     <Flex
       direction='col'
       className={generateFlowPartClassname(flowMetadata)}
-      {...rest}
       elementDescriptor={descriptors.card}
       sx={[
         t => ({
@@ -32,13 +31,14 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           borderRadius: t.radii.$lg,
           position: 'relative',
           padding: t.space.$8,
-          gap: t.space.$8,
           justifyContent: 'center',
           alignContent: 'center',
         }),
         sx,
       ]}
+      gap={gap}
       ref={ref}
+      {...rest}
     >
       {appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo />}
       {toggle && (
diff --git a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
index 3ee866dbba3..2e176b40172 100644
--- a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
@@ -42,7 +42,7 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
 
   return (
     <Card.Root>
-      <Card.Content>
+      <Card.Content gap={6}>
         <Card.Alert>{card.error}</Card.Alert>
         <Header.Root>
           <Header.Title localizationKey={props.cardTitle} />

From 28e42d8f8a321824288900270efb5fc4ff027167 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 2 Feb 2024 18:20:57 +0200
Subject: [PATCH 2/5] fix(clerk-js): Spacing fixes for Sign In / Sign Up
 components

---
 .../components/SignIn/AlternativeMethods.tsx  |  8 +++----
 .../ui/components/SignIn/ResetPassword.tsx    |  6 ++---
 .../SignIn/ResetPasswordSuccess.tsx           |  4 ++--
 .../SignIn/SignInAccountSwitcher.tsx          |  2 +-
 .../SignIn/SignInFactorOnePasswordCard.tsx    |  6 ++---
 .../SignInFactorTwoAlternativeMethods.tsx     |  8 +++----
 .../SignIn/SignInFactorTwoBackupCodeCard.tsx  | 24 ++++++++++---------
 .../src/ui/components/SignIn/SignInStart.tsx  |  6 ++---
 .../ui/components/SignUp/SignUpContinue.tsx   |  4 ++--
 .../src/ui/components/SignUp/SignUpStart.tsx  |  6 ++---
 .../src/ui/elements/Card/CardContent.tsx      |  7 ++----
 .../clerk-js/src/ui/elements/ErrorCard.tsx    |  4 ++--
 packages/clerk-js/src/ui/elements/Header.tsx  | 22 +++++++++++++----
 .../src/ui/elements/PhoneInput/PhoneInput.tsx |  4 ++--
 .../src/ui/elements/VerificationCodeCard.tsx  |  8 +++----
 .../src/ui/elements/VerificationLinkCard.tsx  |  4 ++--
 16 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
index d97cd5464a1..9a5e484a72f 100644
--- a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -38,9 +38,8 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
   return (
     <Flow.Part part={asForgotPassword ? 'forgotPasswordMethods' : 'alternativeMethods'}>
       <Card.Root>
-        <Card.Content gap={6}>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+        <Card.Content>
+          <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={4}
+            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
index 777f852861e..a773e756add 100644
--- 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
index 3cb68f7ffc3..7579b38833d 100644
--- 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
index c49106b97c9..b3e380d9ce8 100644
--- 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
index 289bd281f88..9ec4c188fb8 100644
--- 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={6}>
-          <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
index 8a76ee9e384..e9c45c063de 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -39,16 +39,16 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
   return (
     <Flow.Part part='alternativeMethods'>
       <Card.Root>
-        <Card.Content gap={6}>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+        <Card.Content>
+          <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
index 74dd69586c9..ac9ba597aa3 100644
--- 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
index ae1202501c9..67bc05d34b5 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -286,12 +286,12 @@ export function _SignInStart(): JSX.Element {
   return (
     <Flow.Part part='start'>
       <Card.Root>
-        <Card.Content gap={6}>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+        <Card.Content>
+          <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
index 3ba857c7d08..3892c1cd467 100644
--- 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
index b6563280a38..65b12c2ebb8 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -243,12 +243,12 @@ function _SignUpStart(): JSX.Element {
   return (
     <Flow.Part part='start'>
       <Card.Root>
-        <Card.Content gap={6}>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+        <Card.Content>
+          <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/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index bd40a5f3ee3..a124a509ca9 100644
--- 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,7 +11,6 @@ type CardContentProps = PropsOfComponent<typeof Flex>;
 export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
   const { children, sx, gap = 8, ...rest } = props;
   const flowMetadata = useFlowMetadata();
-  const appearance = useAppearance();
   const { toggle } = useUnsafeModalContext();
 
   return (
@@ -30,7 +28,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
-          padding: t.space.$8,
+          padding: `${t.space.$8} ${t.space.$10}`,
           justifyContent: 'center',
           alignContent: 'center',
         }),
@@ -40,7 +38,6 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       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
index 0f51a462978..aad88ad72b0 100644
--- 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
index e938453a9cc..bd39f7457a7 100644
--- 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
index 8e322adce21..932f11ba599 100644
--- 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/VerificationCodeCard.tsx b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
index 2e176b40172..e1b62898834 100644
--- a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
@@ -42,9 +42,9 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
 
   return (
     <Card.Root>
-      <Card.Content gap={6}>
-        <Card.Alert>{card.error}</Card.Alert>
-        <Header.Root>
+      <Card.Content>
+        <Header.Root showLogo>
+          <Card.Alert>{card.error}</Card.Alert>
           <Header.Title localizationKey={props.cardTitle} />
           <Header.Subtitle localizationKey={props.cardSubtitle} />
           <IdentityPreview
@@ -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
index ddcc9d26174..e15e3840b75 100644
--- a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
@@ -33,8 +33,8 @@ export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
     <Flow.Part part='emailLinkVerify'>
       <Card.Root>
         <Card.Content>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Header.Root>
+          <Header.Root showLogo>
+            <Card.Alert>{card.error}</Card.Alert>
             <Header.Title localizationKey={props.cardTitle} />
             <VerificationLink
               formTitle={props.formTitle}

From 0851ed49621b7594e6005c8b6f5b3b0dd7fad5dd Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 2 Feb 2024 19:25:38 +0200
Subject: [PATCH 3/5] fix(clerk-js): Fix social button font size

---
 packages/clerk-js/src/ui/elements/SocialButtons.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
index dcb5c5c7273..e783efbb7f5 100644
--- 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}

From 51d8811741afa3db553225bd3e67113ea03e2352 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Fri, 2 Feb 2024 20:09:15 +0200
Subject: [PATCH 4/5] chore(repo): Add Changeset

---
 .changeset/thin-trees-poke.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .changeset/thin-trees-poke.md

diff --git a/.changeset/thin-trees-poke.md b/.changeset/thin-trees-poke.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/thin-trees-poke.md
@@ -0,0 +1,2 @@
+---
+---

From c454ad8378383ceaafbb06fcf6b68abed9f40754 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 5 Feb 2024 13:49:47 +0200
Subject: [PATCH 5/5] fix(clerk-js): Move errors outside of header

---
 packages/clerk-js/src/ui/elements/Card/CardContent.tsx     | 4 ++--
 packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx | 2 +-
 packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index a124a509ca9..67269f262d3 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -9,7 +9,7 @@ import { useUnsafeModalContext } from '../Modal';
 
 type CardContentProps = PropsOfComponent<typeof Flex>;
 export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
-  const { children, sx, gap = 8, ...rest } = props;
+  const { children, sx, ...rest } = props;
   const flowMetadata = useFlowMetadata();
   const { toggle } = useUnsafeModalContext();
 
@@ -34,7 +34,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
         }),
         sx,
       ]}
-      gap={gap}
+      gap={8}
       ref={ref}
       {...rest}
     >
diff --git a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
index e1b62898834..a8ce515b74a 100644
--- a/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationCodeCard.tsx
@@ -44,7 +44,6 @@ export const VerificationCodeCard = (props: PropsWithChildren<VerificationCodeCa
     <Card.Root>
       <Card.Content>
         <Header.Root showLogo>
-          <Card.Alert>{card.error}</Card.Alert>
           <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}
diff --git a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
index e15e3840b75..a9c1d3e0ac0 100644
--- a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
+++ b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx
@@ -34,7 +34,6 @@ export const VerificationLinkCard = (props: VerificationLinkCardProps) => {
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Card.Alert>{card.error}</Card.Alert>
             <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