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/2] 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/2] 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}