From 1fa50312819aaddd10a8cb5e2e9ee3b9bbe261ab Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 10:01:19 -0400
Subject: [PATCH 1/7] chore(ui): Use parsed appearance

---
 packages/ui/src/common/connections.tsx                    | 4 ++--
 .../ui/src/components/sign-in/steps/choose-session.tsx    | 6 +++---
 .../ui/src/components/sign-in/steps/choose-strategy.tsx   | 4 ++--
 .../ui/src/components/sign-in/steps/forgot-password.tsx   | 4 ++--
 packages/ui/src/components/sign-in/steps/get-help.tsx     | 4 ++--
 .../ui/src/components/sign-in/steps/reset-password.tsx    | 4 ++--
 .../ui/src/components/sign-in/steps/verifications.tsx     | 4 ++--
 packages/ui/src/components/sign-up/steps/continue.tsx     | 4 ++--
 packages/ui/src/components/sign-up/steps/start.tsx        | 4 ++--
 .../ui/src/components/sign-up/steps/verifications.tsx     | 4 ++--
 packages/ui/src/hooks/use-appearance.ts                   | 8 --------
 11 files changed, 21 insertions(+), 29 deletions(-)
 delete mode 100644 packages/ui/src/hooks/use-appearance.ts

diff --git a/packages/ui/src/common/connections.tsx b/packages/ui/src/common/connections.tsx
index 9cedcb82e93..94dbe96aa35 100644
--- a/packages/ui/src/common/connections.tsx
+++ b/packages/ui/src/common/connections.tsx
@@ -2,7 +2,7 @@ import * as Common from '@clerk/elements/common';
 import * as React from 'react';
 
 import { PROVIDERS } from '~/constants/providers';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { Button } from '~/primitives/button';
 import * as Icon from '~/primitives/icon';
@@ -58,7 +58,7 @@ export function Connections(
   props: { columns?: number } & Pick<React.ComponentProps<typeof Button>, 'disabled' | 'textVisuallyHidden'>,
 ) {
   const enabledConnections = useEnabledConnections();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const hasConnection = enabledConnections.length > 0;
   const textVisuallyHidden =
     typeof props?.textVisuallyHidden !== 'undefined'
diff --git a/packages/ui/src/components/sign-in/steps/choose-session.tsx b/packages/ui/src/components/sign-in/steps/choose-session.tsx
index d75f51b2aec..d9fe0544cbd 100644
--- a/packages/ui/src/components/sign-in/steps/choose-session.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-session.tsx
@@ -1,9 +1,9 @@
 import { useClerk } from '@clerk/clerk-react';
 import { cva } from 'cva';
 import { Button } from 'react-aria-components';
-import { LOCALIZATION_NEEDED } from '~/constants/localizations';
 
-import { useAppearance } from '~/hooks/use-appearance';
+import { LOCALIZATION_NEEDED } from '~/constants/localizations';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -59,7 +59,7 @@ const sessionAction = cva({
 export function SignInChooseSession() {
   const clerk = useClerk();
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const isDev = useDevModeWarning();
   const { branded } = useDisplayConfig();
 
diff --git a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
index 602119d01e4..2bfbf97b5c4 100644
--- a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
@@ -6,7 +6,7 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
@@ -48,7 +48,7 @@ function FirstFactorConnections({
 export function SignInChooseStrategy() {
   const enabledConnections = useEnabledConnections();
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
   const { setShowHelp } = useGetHelp();
 
diff --git a/packages/ui/src/components/sign-in/steps/forgot-password.tsx b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
index 8f8957b2ff3..2baf5f63131 100644
--- a/packages/ui/src/components/sign-in/steps/forgot-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
@@ -5,7 +5,7 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -17,7 +17,7 @@ import { Separator } from '~/primitives/separator';
 
 export function SignInForgotPassword() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
   const { setShowHelp } = useGetHelp();
 
diff --git a/packages/ui/src/components/sign-in/steps/get-help.tsx b/packages/ui/src/components/sign-in/steps/get-help.tsx
index 1db1bf2068d..aa92cfd8e32 100644
--- a/packages/ui/src/components/sign-in/steps/get-help.tsx
+++ b/packages/ui/src/components/sign-in/steps/get-help.tsx
@@ -1,6 +1,6 @@
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -13,7 +13,7 @@ import { LinkButton } from '~/primitives/link';
 export function SignInGetHelp() {
   const { t } = useLocalizations();
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const isDev = useDevModeWarning();
   const supportEmail = useSupportEmail();
   const { setShowHelp } = useGetHelp();
diff --git a/packages/ui/src/components/sign-in/steps/reset-password.tsx b/packages/ui/src/components/sign-in/steps/reset-password.tsx
index 46620eb9e83..a60a41e1927 100644
--- a/packages/ui/src/components/sign-in/steps/reset-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/reset-password.tsx
@@ -5,7 +5,7 @@ import { CheckboxField } from '~/common/checkbox-field';
 import { GlobalError } from '~/common/global-error';
 import { PasswordField } from '~/common/password-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -15,7 +15,7 @@ import { LinkButton } from '~/primitives/link';
 
 export function SignInResetPassword() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
diff --git a/packages/ui/src/components/sign-in/steps/verifications.tsx b/packages/ui/src/components/sign-in/steps/verifications.tsx
index 399ebdf9312..a7c8db2b628 100644
--- a/packages/ui/src/components/sign-in/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-in/steps/verifications.tsx
@@ -6,7 +6,7 @@ import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { PasswordField } from '~/common/password-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -19,7 +19,7 @@ import { formatSafeIdentifier } from '~/utils/format-safe-identifier';
 
 export function SignInVerifications() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx
index 37c02d3848a..c68eae55408 100644
--- a/packages/ui/src/components/sign-up/steps/continue.tsx
+++ b/packages/ui/src/components/sign-up/steps/continue.tsx
@@ -9,7 +9,7 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
@@ -20,7 +20,7 @@ import * as Icon from '~/primitives/icon';
 
 export function SignUpContinue() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
   const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx
index 2a37c627bb3..c02b1e3de93 100644
--- a/packages/ui/src/components/sign-up/steps/start.tsx
+++ b/packages/ui/src/components/sign-up/steps/start.tsx
@@ -12,7 +12,7 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
@@ -28,7 +28,7 @@ export function SignUpStart() {
   const clerk = useClerk();
   const enabledConnections = useEnabledConnections();
   const { userSettings } = useEnvironment();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx
index f5eeb600091..b593204093f 100644
--- a/packages/ui/src/components/sign-up/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-up/steps/verifications.tsx
@@ -5,7 +5,7 @@ import * as SignUp from '@clerk/elements/sign-up';
 import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/hooks/use-appearance';
+import { useAppearance } from '~/contexts';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -46,7 +46,7 @@ function SignUpIdentifier({ emailAddress, phoneNumber }: Identifier) {
 
 export function SignUpVerifications() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
diff --git a/packages/ui/src/hooks/use-appearance.ts b/packages/ui/src/hooks/use-appearance.ts
deleted file mode 100644
index 027ba9a1eb2..00000000000
--- a/packages/ui/src/hooks/use-appearance.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Appearance } from '@clerk/types';
-
-import { useOptions } from './use-options';
-
-export function useAppearance() {
-  const { appearance } = useOptions();
-  return (appearance as Appearance) || {};
-}

From 151601a2e6c81d75ec3952915893f95ed240562d Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 10:34:25 -0400
Subject: [PATCH 2/7] more parsedAppearance usage

---
 .../ui/src/components/sign-in/sign-in.tsx     |  2 +-
 .../sign-in/steps/choose-strategy.tsx         | 13 ++--
 .../sign-in/steps/forgot-password.tsx         | 13 ++--
 .../src/components/sign-in/steps/get-help.tsx | 13 ++--
 .../sign-in/steps/reset-password.tsx          | 13 ++--
 .../ui/src/components/sign-in/steps/start.tsx | 13 ++--
 .../sign-in/steps/verifications.tsx           | 61 ++++---------------
 .../src/components/sign-up/steps/continue.tsx | 13 ++--
 .../ui/src/components/sign-up/steps/start.tsx | 13 ++--
 .../sign-up/steps/verifications.tsx           | 29 +++------
 packages/ui/src/hooks/use-dev-mode-warning.ts |  5 +-
 packages/ui/src/primitives/card.tsx           |  4 ++
 12 files changed, 70 insertions(+), 122 deletions(-)

diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index 6491a0b0f96..3c6fa61d35c 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -8,7 +8,7 @@ import { SignInGetHelp } from '~/components/sign-in/steps/get-help';
 import { SignInResetPassword } from '~/components/sign-in/steps/reset-password';
 import { SignInStart } from '~/components/sign-in/steps/start';
 import { SignInVerifications } from '~/components/sign-in/steps/verifications';
-import { useAppearance, AppearanceProvider, type Appearance } from '~/contexts';
+import { type Appearance, AppearanceProvider, useAppearance } from '~/contexts';
 
 /**
  * Implementation Details:
diff --git a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
index 2bfbf97b5c4..3d26f89d815 100644
--- a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
@@ -54,6 +54,11 @@ export function SignInChooseStrategy() {
 
   const hasConnection = enabledConnections.length > 0;
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -69,13 +74,7 @@ export function SignInChooseStrategy() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  {logoImageUrl ? (
-                    <Card.Logo
-                      href={homeUrl}
-                      src={logoImageUrl}
-                      alt={applicationName}
-                    />
-                  ) : null}
+                  <Card.Logo {...cardLogoProps} />
                   <Card.Title>{t('signIn.alternativeMethods.title')}</Card.Title>
                   <Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
                 </Card.Header>
diff --git a/packages/ui/src/components/sign-in/steps/forgot-password.tsx b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
index 2baf5f63131..28e000cf545 100644
--- a/packages/ui/src/components/sign-in/steps/forgot-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
@@ -22,6 +22,11 @@ export function SignInForgotPassword() {
   const { setShowHelp } = useGetHelp();
 
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -37,13 +42,7 @@ export function SignInForgotPassword() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  {logoImageUrl ? (
-                    <Card.Logo
-                      href={homeUrl}
-                      src={logoImageUrl}
-                      alt={applicationName}
-                    />
-                  ) : null}
+                  <Card.Logo {...cardLogoProps} />
                   <Card.Title>{t('signIn.forgotPasswordAlternativeMethods.title')}</Card.Title>
                 </Card.Header>
 
diff --git a/packages/ui/src/components/sign-in/steps/get-help.tsx b/packages/ui/src/components/sign-in/steps/get-help.tsx
index aa92cfd8e32..5aed9426b60 100644
--- a/packages/ui/src/components/sign-in/steps/get-help.tsx
+++ b/packages/ui/src/components/sign-in/steps/get-help.tsx
@@ -18,6 +18,11 @@ export function SignInGetHelp() {
   const supportEmail = useSupportEmail();
   const { setShowHelp } = useGetHelp();
 
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -29,13 +34,7 @@ export function SignInGetHelp() {
     <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
       <Card.Content>
         <Card.Header>
-          {logoImageUrl ? (
-            <Card.Logo
-              href={homeUrl}
-              src={logoImageUrl}
-              alt={applicationName}
-            />
-          ) : null}
+          <Card.Logo {...cardLogoProps} />
           <Card.Title>{t('signIn.alternativeMethods.getHelp.title')}</Card.Title>
           <Card.Description>{t('signIn.alternativeMethods.getHelp.content')}</Card.Description>
         </Card.Header>
diff --git a/packages/ui/src/components/sign-in/steps/reset-password.tsx b/packages/ui/src/components/sign-in/steps/reset-password.tsx
index a60a41e1927..616d3214015 100644
--- a/packages/ui/src/components/sign-in/steps/reset-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/reset-password.tsx
@@ -19,6 +19,11 @@ export function SignInResetPassword() {
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -34,13 +39,7 @@ export function SignInResetPassword() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  {logoImageUrl ? (
-                    <Card.Logo
-                      href={homeUrl}
-                      src={logoImageUrl}
-                      alt={applicationName}
-                    />
-                  ) : null}
+                  <Card.Logo {...cardLogoProps} />
                   <Card.Title>{t('signIn.resetPassword.title')}</Card.Title>
                 </Card.Header>
 
diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx
index d5b12d17f69..ab12c3b51db 100644
--- a/packages/ui/src/components/sign-in/steps/start.tsx
+++ b/packages/ui/src/components/sign-in/steps/start.tsx
@@ -36,6 +36,11 @@ export function SignInStart() {
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -51,13 +56,7 @@ export function SignInStart() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  {logoImageUrl ? (
-                    <Card.Logo
-                      href={homeUrl}
-                      src={logoImageUrl}
-                      alt={applicationName}
-                    />
-                  ) : null}
+                  <Card.Logo {...cardLogoProps} />
                   <Card.Title>{t('signIn.start.title', { applicationName })}</Card.Title>
                   <Card.Description>{t('signIn.start.subtitle', { applicationName })}</Card.Description>
                 </Card.Header>
diff --git a/packages/ui/src/components/sign-in/steps/verifications.tsx b/packages/ui/src/components/sign-in/steps/verifications.tsx
index a7c8db2b628..314007c8f92 100644
--- a/packages/ui/src/components/sign-in/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-in/steps/verifications.tsx
@@ -24,6 +24,11 @@ export function SignInVerifications() {
 
   const isDev = useDevModeWarning();
   const isPasswordResetSupported = useResetPasswordFactor();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -40,13 +45,7 @@ export function SignInVerifications() {
               <Card.Content>
                 <SignIn.Strategy name='password'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.password.title')}</Card.Title>
                     <Card.Description>{t('signIn.password.subtitle')}</Card.Description>
                     <Card.Description>
@@ -123,13 +122,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='passkey'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.passkey.title')}</Card.Title>
                     <Card.Description>{t('signIn.passkey.subtitle')}</Card.Description>
                     <Card.Description>
@@ -183,13 +176,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='backup_code'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.backupCodeMfa.title')}</Card.Title>
                     <Card.Description>{t('signIn.backupCodeMfa.subtitle')}</Card.Description>
                   </Card.Header>
@@ -235,13 +222,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='email_code'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signIn.emailCode.subtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -320,13 +301,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='phone_code'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signIn.phoneCode.subtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -406,13 +381,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='email_link'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.emailLink.title')}</Card.Title>
                     <Card.Description>{t('signIn.emailLink.formSubtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -523,13 +492,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='totp'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signIn.totpMfa.formTitle')}</Card.Title>
                     <Card.Description>{t('signIn.totpMfa.subtitle', { applicationName })}</Card.Description>
                   </Card.Header>
diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx
index c68eae55408..05044b45f53 100644
--- a/packages/ui/src/components/sign-up/steps/continue.tsx
+++ b/packages/ui/src/components/sign-up/steps/continue.tsx
@@ -28,6 +28,11 @@ export function SignUpContinue() {
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -43,13 +48,7 @@ export function SignUpContinue() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  {logoImageUrl ? (
-                    <Card.Logo
-                      href={homeUrl}
-                      src={logoImageUrl}
-                      alt={applicationName}
-                    />
-                  ) : null}
+                  <Card.Logo {...cardLogoProps} />
                   <Card.Title>{t('signUp.continue.title')}</Card.Title>
                   <Card.Description>{t('signUp.continue.subtitle')}</Card.Description>
                 </Card.Header>
diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx
index c02b1e3de93..68042c7009e 100644
--- a/packages/ui/src/components/sign-up/steps/start.tsx
+++ b/packages/ui/src/components/sign-up/steps/start.tsx
@@ -41,6 +41,11 @@ export function SignUpStart() {
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -56,13 +61,7 @@ export function SignUpStart() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  {logoImageUrl ? (
-                    <Card.Logo
-                      href={homeUrl}
-                      src={logoImageUrl}
-                      alt={applicationName}
-                    />
-                  ) : null}
+                  <Card.Logo {...cardLogoProps} />
                   <Card.Title>{t('signUp.start.title')}</Card.Title>
                   <Card.Description>
                     {t('signUp.start.subtitle', {
diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx
index b593204093f..760cdab539c 100644
--- a/packages/ui/src/components/sign-up/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-up/steps/verifications.tsx
@@ -50,6 +50,11 @@ export function SignUpVerifications() {
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
+  const cardLogoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
   const cardFooterProps = {
     branded,
     helpPageUrl: layout?.helpPageUrl,
@@ -66,13 +71,7 @@ export function SignUpVerifications() {
               <Card.Content>
                 <SignUp.Strategy name='phone_code'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signUp.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.phoneCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -144,13 +143,7 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_code'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signUp.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.emailCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -222,13 +215,7 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_link'>
                   <Card.Header>
-                    {logoImageUrl ? (
-                      <Card.Logo
-                        href={homeUrl}
-                        src={logoImageUrl}
-                        alt={applicationName}
-                      />
-                    ) : null}
+                    <Card.Logo {...cardLogoProps} />
                     <Card.Title>{t('signUp.emailLink.title')}</Card.Title>
                     <Card.Description>
                       {t('signUp.emailLink.subtitle', {
diff --git a/packages/ui/src/hooks/use-dev-mode-warning.ts b/packages/ui/src/hooks/use-dev-mode-warning.ts
index 7f2328f8340..202bd4c0d9f 100644
--- a/packages/ui/src/hooks/use-dev-mode-warning.ts
+++ b/packages/ui/src/hooks/use-dev-mode-warning.ts
@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 
-import { useAppearance } from './use-appearance';
+import { useAppearance } from '~/contexts';
+
 import { useEnvironment } from './use-environment';
 
 export function useDevModeWarning() {
   const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
   const isDevelopment = isDevelopmentOrStaging();
-  const { layout } = useAppearance();
+  const { layout } = useAppearance().parsedAppearance;
   const unsafeDisabled = layout?.unsafe_disableDevelopmentModeWarnings || false;
   const developmentUiDisabled = isDevelopment && unsafeDisabled;
   const showDevModeWarning = useMemo(
diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
index dc1f4b61959..e942ee3c693 100644
--- a/packages/ui/src/primitives/card.tsx
+++ b/packages/ui/src/primitives/card.tsx
@@ -106,6 +106,10 @@ export const Logo = React.forwardRef(function CardLogo(
   },
   forwardedRef: React.ForwardedRef<HTMLImageElement>,
 ) {
+  if (!src) {
+    return null;
+  }
+
   const img = (
     <Image
       ref={forwardedRef}

From d99c78f5d978de33287647a14f75e56d2399f1a2 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 14:06:07 -0400
Subject: [PATCH 3/7] feat(ui): Add useCard hook

---
 .../sign-in/steps/choose-strategy.tsx         | 21 +++---------
 .../sign-in/steps/forgot-password.tsx         | 21 +++---------
 .../sign-in/steps/reset-password.tsx          | 21 +++---------
 .../ui/src/components/sign-in/steps/start.tsx | 21 +++---------
 .../sign-in/steps/verifications.tsx           | 33 +++++++------------
 .../src/components/sign-up/steps/continue.tsx | 21 +++---------
 .../ui/src/components/sign-up/steps/start.tsx | 21 +++---------
 .../sign-up/steps/verifications.tsx           | 25 ++++----------
 packages/ui/src/hooks/use-card.ts             | 26 +++++++++++++++
 .../app/sign-in/[[...sign-in]]/page.tsx       | 10 +++++-
 .../public/clerk-logo-dark-accent.svg         |  6 ++++
 11 files changed, 85 insertions(+), 141 deletions(-)
 create mode 100644 packages/ui/src/hooks/use-card.ts
 create mode 100644 packages/ui/theme-builder/public/clerk-logo-dark-accent.svg

diff --git a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
index 3d26f89d815..8d8020c3b61 100644
--- a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
@@ -6,9 +6,8 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
@@ -48,23 +47,11 @@ function FirstFactorConnections({
 export function SignInChooseStrategy() {
   const enabledConnections = useEnabledConnections();
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
   const { setShowHelp } = useGetHelp();
 
   const hasConnection = enabledConnections.length > 0;
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -74,7 +61,7 @@ export function SignInChooseStrategy() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.alternativeMethods.title')}</Card.Title>
                   <Card.Description>{t('signIn.alternativeMethods.subtitle')}</Card.Description>
                 </Card.Header>
@@ -197,7 +184,7 @@ export function SignInChooseStrategy() {
                   </div>
                 </Card.Body>
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signIn.alternativeMethods.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-in/steps/forgot-password.tsx b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
index 28e000cf545..86a35b37b33 100644
--- a/packages/ui/src/components/sign-in/steps/forgot-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
@@ -5,9 +5,8 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -17,22 +16,10 @@ import { Separator } from '~/primitives/separator';
 
 export function SignInForgotPassword() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
   const { setShowHelp } = useGetHelp();
 
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -42,7 +29,7 @@ export function SignInForgotPassword() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.forgotPasswordAlternativeMethods.title')}</Card.Title>
                 </Card.Header>
 
@@ -152,7 +139,7 @@ export function SignInForgotPassword() {
                   </SignIn.Action>
                 </Card.Body>
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signIn.alternativeMethods.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-in/steps/reset-password.tsx b/packages/ui/src/components/sign-in/steps/reset-password.tsx
index 616d3214015..5449ef8ae60 100644
--- a/packages/ui/src/components/sign-in/steps/reset-password.tsx
+++ b/packages/ui/src/components/sign-in/steps/reset-password.tsx
@@ -5,9 +5,8 @@ import { CheckboxField } from '~/common/checkbox-field';
 import { GlobalError } from '~/common/global-error';
 import { PasswordField } from '~/common/password-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -15,21 +14,9 @@ import { LinkButton } from '~/primitives/link';
 
 export function SignInResetPassword() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -39,7 +26,7 @@ export function SignInResetPassword() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.resetPassword.title')}</Card.Title>
                 </Card.Header>
 
@@ -92,7 +79,7 @@ export function SignInResetPassword() {
                   </SignIn.Action>
                 </Card.Actions>
               </Card.Content>
-              <Card.Footer {...cardFooterProps} />
+              <Card.Footer {...footerProps} />
             </Card.Root>
           </SignIn.Step>
         );
diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx
index ab12c3b51db..c34b25472c6 100644
--- a/packages/ui/src/components/sign-in/steps/start.tsx
+++ b/packages/ui/src/components/sign-in/steps/start.tsx
@@ -11,8 +11,8 @@ import { PhoneNumberField } from '~/common/phone-number-field';
 import { PhoneNumberOrUsernameField } from '~/common/phone-number-or-username-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
@@ -26,27 +26,16 @@ import { Separator } from '~/primitives/separator';
 export function SignInStart() {
   const enabledConnections = useEnabledConnections();
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
   const { enabled: usernameEnabled } = useAttributes('username');
   const { enabled: phoneNumberEnabled } = useAttributes('phone_number');
   const { enabled: emailAddressEnabled } = useAttributes('email_address');
   const { enabled: passkeyEnabled } = useAttributes('passkey');
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -56,7 +45,7 @@ export function SignInStart() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signIn.start.title', { applicationName })}</Card.Title>
                   <Card.Description>{t('signIn.start.subtitle', { applicationName })}</Card.Description>
                 </Card.Header>
@@ -180,7 +169,7 @@ export function SignInStart() {
                 </Card.Actions>
               </Card.Content>
 
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signIn.start.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-in/steps/verifications.tsx b/packages/ui/src/components/sign-in/steps/verifications.tsx
index 314007c8f92..01a49f652c5 100644
--- a/packages/ui/src/components/sign-in/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-in/steps/verifications.tsx
@@ -6,7 +6,7 @@ import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { PasswordField } from '~/common/password-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -19,22 +19,11 @@ import { formatSafeIdentifier } from '~/utils/format-safe-identifier';
 
 export function SignInVerifications() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
   const isPasswordResetSupported = useResetPasswordFactor();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -45,7 +34,7 @@ export function SignInVerifications() {
               <Card.Content>
                 <SignIn.Strategy name='password'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.password.title')}</Card.Title>
                     <Card.Description>{t('signIn.password.subtitle')}</Card.Description>
                     <Card.Description>
@@ -122,7 +111,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='passkey'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.passkey.title')}</Card.Title>
                     <Card.Description>{t('signIn.passkey.subtitle')}</Card.Description>
                     <Card.Description>
@@ -176,7 +165,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='backup_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.backupCodeMfa.title')}</Card.Title>
                     <Card.Description>{t('signIn.backupCodeMfa.subtitle')}</Card.Description>
                   </Card.Header>
@@ -222,7 +211,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='email_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signIn.emailCode.subtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -301,7 +290,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='phone_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signIn.phoneCode.subtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -381,7 +370,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='email_link'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.emailLink.title')}</Card.Title>
                     <Card.Description>{t('signIn.emailLink.formSubtitle', { applicationName })}</Card.Description>
                     <Card.Description>
@@ -492,7 +481,7 @@ export function SignInVerifications() {
 
                 <SignIn.Strategy name='totp'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signIn.totpMfa.formTitle')}</Card.Title>
                     <Card.Description>{t('signIn.totpMfa.subtitle', { applicationName })}</Card.Description>
                   </Card.Header>
@@ -534,7 +523,7 @@ export function SignInVerifications() {
                   </Card.Actions>
                 </SignIn.Strategy>
               </Card.Content>
-              <Card.Footer {...cardFooterProps} />
+              <Card.Footer {...footerProps} />
             </Card.Root>
           </SignIn.Step>
         );
diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx
index 05044b45f53..54380ff92a0 100644
--- a/packages/ui/src/components/sign-up/steps/continue.tsx
+++ b/packages/ui/src/components/sign-up/steps/continue.tsx
@@ -9,10 +9,9 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -20,25 +19,13 @@ import * as Icon from '~/primitives/icon';
 
 export function SignUpContinue() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
   const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
-  const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -48,7 +35,7 @@ export function SignUpContinue() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signUp.continue.title')}</Card.Title>
                   <Card.Description>{t('signUp.continue.subtitle')}</Card.Description>
                 </Card.Header>
@@ -117,7 +104,7 @@ export function SignUpContinue() {
                   </Common.Loading>
                 </Card.Actions>
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signUp.continue.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx
index 68042c7009e..f2f4693fabb 100644
--- a/packages/ui/src/components/sign-up/steps/start.tsx
+++ b/packages/ui/src/components/sign-up/steps/start.tsx
@@ -12,8 +12,8 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
@@ -28,7 +28,6 @@ export function SignUpStart() {
   const clerk = useClerk();
   const enabledConnections = useEnabledConnections();
   const { userSettings } = useEnvironment();
-  const { layout } = useAppearance().parsedAppearance;
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
@@ -36,22 +35,12 @@ export function SignUpStart() {
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: emailAddressEnabled, required: emailAddressRequired } = useAttributes('email_address');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
-  const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -61,7 +50,7 @@ export function SignUpStart() {
             <Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
               <Card.Content>
                 <Card.Header>
-                  <Card.Logo {...cardLogoProps} />
+                  <Card.Logo {...logoProps} />
                   <Card.Title>{t('signUp.start.title')}</Card.Title>
                   <Card.Description>
                     {t('signUp.start.subtitle', {
@@ -154,7 +143,7 @@ export function SignUpStart() {
                   </Card.Actions>
                 ) : null}
               </Card.Content>
-              <Card.Footer {...cardFooterProps}>
+              <Card.Footer {...footerProps}>
                 <Card.FooterAction>
                   <Card.FooterActionText>
                     {t('signUp.start.actionText')}{' '}
diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx
index 760cdab539c..9498ae1d33e 100644
--- a/packages/ui/src/components/sign-up/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-up/steps/verifications.tsx
@@ -5,7 +5,7 @@ import * as SignUp from '@clerk/elements/sign-up';
 import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
@@ -46,21 +46,10 @@ function SignUpIdentifier({ emailAddress, phoneNumber }: Identifier) {
 
 export function SignUpVerifications() {
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
-  const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
+  const { applicationName } = useDisplayConfig();
 
   const isDev = useDevModeWarning();
-  const cardLogoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { logoProps, footerProps } = useCard();
 
   return (
     <Common.Loading scope='global'>
@@ -71,7 +60,7 @@ export function SignUpVerifications() {
               <Card.Content>
                 <SignUp.Strategy name='phone_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signUp.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.phoneCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -143,7 +132,7 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_code'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signUp.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.emailCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -215,7 +204,7 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_link'>
                   <Card.Header>
-                    <Card.Logo {...cardLogoProps} />
+                    <Card.Logo {...logoProps} />
                     <Card.Title>{t('signUp.emailLink.title')}</Card.Title>
                     <Card.Description>
                       {t('signUp.emailLink.subtitle', {
@@ -265,7 +254,7 @@ export function SignUpVerifications() {
                   </Card.Body>
                 </SignUp.Strategy>
               </Card.Content>
-              <Card.Footer {...cardFooterProps} />
+              <Card.Footer {...footerProps} />
             </Card.Root>
           </SignUp.Step>
         );
diff --git a/packages/ui/src/hooks/use-card.ts b/packages/ui/src/hooks/use-card.ts
new file mode 100644
index 00000000000..37b385796d0
--- /dev/null
+++ b/packages/ui/src/hooks/use-card.ts
@@ -0,0 +1,26 @@
+import { useAppearance } from '~/contexts';
+
+import { useDisplayConfig } from './use-display-config';
+
+export function useCard() {
+  const { layout } = useAppearance().parsedAppearance;
+  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
+
+  const logoProps = {
+    href: layout?.logoLinkUrl || homeUrl,
+    src: layout?.logoImageUrl || logoImageUrl,
+    alt: applicationName,
+  };
+
+  const footerProps = {
+    branded,
+    helpPageUrl: layout?.helpPageUrl,
+    privacyPageUrl: layout?.privacyPageUrl,
+    termsPageUrl: layout?.termsPageUrl,
+  };
+
+  return {
+    logoProps,
+    footerProps,
+  };
+}
diff --git a/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx b/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx
index 19cf4e29c84..1d87c6b5ae9 100644
--- a/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx
+++ b/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx
@@ -2,5 +2,13 @@
 import { SignIn } from '@clerk/ui/sign-in';
 
 export default function Page() {
-  return <SignIn />;
+  return (
+    <SignIn
+      appearance={{
+        layout: {
+          logoImageUrl: '/clerk-logo-dark-accent.svg',
+        },
+      }}
+    />
+  );
 }
diff --git a/packages/ui/theme-builder/public/clerk-logo-dark-accent.svg b/packages/ui/theme-builder/public/clerk-logo-dark-accent.svg
new file mode 100644
index 00000000000..294837b0965
--- /dev/null
+++ b/packages/ui/theme-builder/public/clerk-logo-dark-accent.svg
@@ -0,0 +1,6 @@
+<svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="16.0003" cy="16" rx="4.99998" ry="5" fill="#6C47FF" style="fill:#6C47FF;fill:color(display-p3 0.4235 0.2784 1.0000);fill-opacity:1;"/>
+<path d="M25.0091 27.8382C25.4345 28.2636 25.3918 28.9679 24.8919 29.3027C22.3488 31.0062 19.2899 31.9997 15.999 31.9997C12.7082 31.9997 9.64934 31.0062 7.10615 29.3027C6.60632 28.9679 6.56361 28.2636 6.989 27.8382L10.6429 24.1843C10.9732 23.854 11.4855 23.8019 11.9012 24.0148C13.1302 24.6445 14.5232 24.9997 15.999 24.9997C17.4749 24.9997 18.8678 24.6445 20.0969 24.0148C20.5126 23.8019 21.0249 23.854 21.3552 24.1843L25.0091 27.8382Z" fill="#6C47FF" style="fill:#6C47FF;fill:color(display-p3 0.4235 0.2784 1.0000);fill-opacity:1;"/>
+<path d="M24.8928 2.697C25.3926 3.0318 25.4353 3.73609 25.0099 4.16149L21.356 7.81544C21.0258 8.14569 20.5134 8.19785 20.0978 7.98491C18.8687 7.35525 17.4758 7 15.9999 7C11.0294 7 6.99997 11.0294 6.99997 16C6.99997 17.4759 7.35522 18.8688 7.98488 20.0979C8.19782 20.5136 8.14565 21.0259 7.81541 21.3561L4.16147 25.0101C3.73607 25.4355 3.03178 25.3927 2.69698 24.8929C0.993522 22.3497 0 19.2909 0 16C0 7.16344 7.16341 0 15.9999 0C19.2908 0 22.3496 0.993529 24.8928 2.697Z" fill="#BAB1FF" style="fill:#BAB1FF;fill:color(display-p3 0.7294 0.6941 1.0000);fill-opacity:1;"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.405 21.2489C100.421 21.2324 100.442 21.2231 100.465 21.2231C100.493 21.2231 100.518 21.2375 100.533 21.2613L105.275 28.8821C105.321 28.9554 105.401 29 105.487 29L109.75 29C109.946 29 110.066 28.7848 109.963 28.6183L103.457 18.1226C103.399 18.0278 103.41 17.9056 103.485 17.823L109.752 10.908C109.898 10.7473 109.784 10.4901 109.567 10.4901H105.12C105.05 10.4901 104.983 10.5194 104.936 10.5711L97.6842 18.4755C97.5301 18.6435 97.25 18.5345 97.25 18.3065V3.25C97.25 3.11193 97.138 3 97 3H93.25C93.1119 3 93 3.11193 93 3.25V28.75C93 28.8881 93.1119 29 93.25 29L97 29C97.138 29 97.25 28.8881 97.25 28.75V24.7373C97.25 24.6741 97.2739 24.6132 97.317 24.567L100.405 21.2489ZM52.2502 3.25C52.2502 3.11193 52.3621 3 52.5002 3H56.2501C56.3882 3 56.5001 3.11193 56.5001 3.25V28.75C56.5001 28.8881 56.3882 29 56.2501 29H52.5002C52.3621 29 52.2502 28.8881 52.2502 28.75V3.25ZM46.958 23.5912C46.8584 23.5052 46.7094 23.5117 46.6137 23.602C46.0293 24.1537 45.3447 24.595 44.5947 24.9028C43.7719 25.2407 42.8873 25.4108 41.995 25.4028C41.2415 25.4252 40.4913 25.2963 39.7906 25.0241C39.09 24.7519 38.4537 24.3422 37.9209 23.8202C36.9531 22.8322 36.396 21.4215 36.396 19.7399C36.396 16.3735 38.6356 14.0709 41.995 14.0709C42.896 14.0585 43.7888 14.241 44.6094 14.6052C45.3533 14.9355 46.0214 15.4077 46.5748 15.9934C46.6694 16.0936 46.8266 16.1052 46.9309 16.015L49.4625 13.8244C49.5659 13.7349 49.5785 13.5786 49.4873 13.4767C47.583 11.3488 44.5997 10.25 41.7627 10.25C36.0506 10.25 32.0003 14.1031 32.0003 19.7719C32.0003 22.5756 33.0069 24.9365 34.7044 26.6036C36.402 28.2707 38.8203 29.25 41.6108 29.25C45.1097 29.25 47.9259 27.9082 49.577 26.187C49.6739 26.086 49.6632 25.9252 49.5572 25.8338L46.958 23.5912ZM77.1575 20.9877C77.1436 21.1129 77.0371 21.2066 76.9111 21.2066H63.7746C63.615 21.2066 63.4961 21.3546 63.5377 21.5087C64.1913 23.9314 66.1398 25.3973 68.7994 25.3973C69.6959 25.4161 70.5846 25.2317 71.3968 24.8582C72.1536 24.5102 72.8249 24.0068 73.3659 23.3828C73.4314 23.3073 73.5454 23.2961 73.622 23.3602L76.2631 25.6596C76.3641 25.7476 76.3782 25.8999 76.2915 26.0021C74.697 27.8832 72.1135 29.25 68.5683 29.25C63.1142 29.25 59.0001 25.4731 59.0001 19.7348C59.0001 16.9197 59.9693 14.559 61.5847 12.8921C62.4374 12.0349 63.4597 11.3584 64.5882 10.9043C65.7168 10.4502 66.9281 10.2281 68.1473 10.2517C73.6753 10.2517 77.25 14.1394 77.25 19.5075C77.2431 20.0021 77.2123 20.4961 77.1575 20.9877ZM63.6166 17.5038C63.5702 17.6581 63.6894 17.8084 63.8505 17.8084H72.5852C72.7467 17.8084 72.8659 17.6572 72.8211 17.5021C72.2257 15.4416 70.7153 14.0666 68.3696 14.0666C67.6796 14.0447 66.993 14.1696 66.3565 14.4326C65.7203 14.6957 65.149 15.0908 64.6823 15.5907C64.1914 16.1473 63.8285 16.7998 63.6166 17.5038ZM90.2473 10.2527C90.3864 10.2512 90.5 10.3636 90.5 10.5027V14.7013C90.5 14.8469 90.3762 14.9615 90.2311 14.9508C89.8258 14.9207 89.4427 14.8952 89.1916 14.8952C85.9204 14.8952 84 17.1975 84 20.2195V28.75C84 28.8881 83.8881 29 83.75 29H80C79.862 29 79.75 28.8881 79.75 28.75V10.7623C79.75 10.6242 79.862 10.5123 80 10.5123H83.75C83.8881 10.5123 84 10.6242 84 10.7623V13.287C84 13.3013 84.0116 13.3128 84.0258 13.3128C84.034 13.3128 84.0416 13.3089 84.0465 13.3024C85.5124 11.3448 87.676 10.2559 89.9617 10.2559L90.2473 10.2527Z" fill="#131316" style="fill:#131316;fill:color(display-p3 0.0745 0.0745 0.0863);fill-opacity:1;"/>
+</svg>

From 29e23ed71df77274d82c12589ba6e7dbe15a0d87 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 14:08:13 -0400
Subject: [PATCH 4/7] revert signin override

---
 .../theme-builder/app/sign-in/[[...sign-in]]/page.tsx  | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx b/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx
index 1d87c6b5ae9..19cf4e29c84 100644
--- a/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx
+++ b/packages/ui/theme-builder/app/sign-in/[[...sign-in]]/page.tsx
@@ -2,13 +2,5 @@
 import { SignIn } from '@clerk/ui/sign-in';
 
 export default function Page() {
-  return (
-    <SignIn
-      appearance={{
-        layout: {
-          logoImageUrl: '/clerk-logo-dark-accent.svg',
-        },
-      }}
-    />
-  );
+  return <SignIn />;
 }

From 61505a9901052384400abfce1c7c3bb1a00ac55a Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 15:31:36 -0400
Subject: [PATCH 5/7] update choose session

---
 packages/ui/src/components/sign-in/sign-in.tsx    |  3 +--
 .../components/sign-in/steps/choose-session.tsx   | 15 +++------------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
index e47313ad243..d2921eb2058 100644
--- a/packages/ui/src/components/sign-in/sign-in.tsx
+++ b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -2,6 +2,7 @@ import { Root as SignInRoot } from '@clerk/elements/sign-in';
 import * as React from 'react';
 
 import { GetHelpContext } from '~/components/sign-in/hooks/use-get-help';
+import { SignInChooseSession } from '~/components/sign-in/steps/choose-session';
 import { SignInChooseStrategy } from '~/components/sign-in/steps/choose-strategy';
 import { SignInForgotPassword } from '~/components/sign-in/steps/forgot-password';
 import { SignInGetHelp } from '~/components/sign-in/steps/get-help';
@@ -10,8 +11,6 @@ import { SignInStart } from '~/components/sign-in/steps/start';
 import { SignInVerifications } from '~/components/sign-in/steps/verifications';
 import { type Appearance, AppearanceProvider, useAppearance } from '~/contexts';
 
-import { SignInChooseSession } from './steps/choose-session';
-
 /**
  * Implementation Details:
  *
diff --git a/packages/ui/src/components/sign-in/steps/choose-session.tsx b/packages/ui/src/components/sign-in/steps/choose-session.tsx
index f22673ef800..833b82aa25c 100644
--- a/packages/ui/src/components/sign-in/steps/choose-session.tsx
+++ b/packages/ui/src/components/sign-in/steps/choose-session.tsx
@@ -4,9 +4,8 @@ import { cva } from 'cva';
 import { Button } from 'react-aria-components';
 
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
+import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
@@ -60,16 +59,8 @@ const sessionAction = cva({
 export function SignInChooseSession() {
   const { signOut } = useClerk();
   const { t } = useLocalizations();
-  const { layout } = useAppearance().parsedAppearance;
   const isDev = useDevModeWarning();
-  const { branded } = useDisplayConfig();
-
-  const cardFooterProps = {
-    branded,
-    helpPageUrl: layout?.helpPageUrl,
-    privacyPageUrl: layout?.privacyPageUrl,
-    termsPageUrl: layout?.termsPageUrl,
-  };
+  const { footerProps } = useCard();
 
   return (
     <SignIn.Step name='choose-session'>
@@ -160,7 +151,7 @@ export function SignInChooseSession() {
             </div>
           </Card.Body>
         </Card.Content>
-        <Card.Footer {...cardFooterProps}>
+        <Card.Footer {...footerProps}>
           <Card.FooterAction>
             <Button
               onPress={() => {

From 5083de9c9869a5892421a8d21815c55a75ca9404 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 15:45:52 -0400
Subject: [PATCH 6/7] add comment

---
 packages/ui/src/hooks/use-card.ts | 35 +++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/ui/src/hooks/use-card.ts b/packages/ui/src/hooks/use-card.ts
index 37b385796d0..f1f35b62e26 100644
--- a/packages/ui/src/hooks/use-card.ts
+++ b/packages/ui/src/hooks/use-card.ts
@@ -2,6 +2,41 @@ import { useAppearance } from '~/contexts';
 
 import { useDisplayConfig } from './use-display-config';
 
+/**
+ * Access card rendering values for the `<Card.Logo />` and `<Card.Footer />`
+ * based on the display config and parsed appearance.
+ *
+ * @example
+ * ```tsx
+ * import { useCard } from './use-card';
+ *
+ * function MyCardComponent() {
+ *   const { logoProps, footerProps } = useCard();
+ *
+ *   return (
+ *     <Card>
+ *       <Card.Logo {...logoProps} />
+ *       <Card.Footer {...footerProps} />
+ *     </Card>
+ *   );
+ * }
+ * ```
+ *
+ * @returns {{
+ *   logoProps: {
+ *     href: string;
+ *     src: string;
+ *     alt: string;
+ *   };
+ *   footerProps: {
+ *     branded: boolean;
+ *     helpPageUrl: string | undefined;
+ *     privacyPageUrl: string | undefined;
+ *     termsPageUrl: string | undefined;
+ *   };
+ * }}
+ */
+
 export function useCard() {
   const { layout } = useAppearance().parsedAppearance;
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();

From b77881a71c16ddfe697d75dbe1cd305b94cba6a0 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 19 Aug 2024 16:02:54 -0400
Subject: [PATCH 7/7] remove return from comment

---
 packages/ui/src/hooks/use-card.ts | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/ui/src/hooks/use-card.ts b/packages/ui/src/hooks/use-card.ts
index f1f35b62e26..4db9adc6f20 100644
--- a/packages/ui/src/hooks/use-card.ts
+++ b/packages/ui/src/hooks/use-card.ts
@@ -21,20 +21,6 @@ import { useDisplayConfig } from './use-display-config';
  *   );
  * }
  * ```
- *
- * @returns {{
- *   logoProps: {
- *     href: string;
- *     src: string;
- *     alt: string;
- *   };
- *   footerProps: {
- *     branded: boolean;
- *     helpPageUrl: string | undefined;
- *     privacyPageUrl: string | undefined;
- *     termsPageUrl: string | undefined;
- *   };
- * }}
  */
 
 export function useCard() {