add logo

clerk · Aug 2, 2024 · e1f2c8d · e1f2c8d
1 parent 9e05c6e
commit e1f2c8d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx
@@ -24,7 +24,7 @@ export function SignUpContinue() {
   const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
-  const { branded } = useDisplayConfig();
+  const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
 
   const isDev = isDevelopmentOrStaging();
 
@@ -36,6 +36,13 @@ export function SignUpContinue() {
             <Card.Root>
               <Card.Content>
                 <Card.Header>
+                  {logoImageUrl ? (
+                    <Card.Logo
+                      href={homeUrl}
+                      src={logoImageUrl}
+                      alt={applicationName}
+                    />
+                  ) : null}
                   <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/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx
@@ -17,7 +17,7 @@ import { GlobalError } from '~/common/global-error';
 export function SignUpVerifications() {
   const { isDevelopmentOrStaging } = useEnvironment();
   const { t } = useLocalizations();
-  const { applicationName, branded } = useDisplayConfig();
+  const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
 
   const isDev = isDevelopmentOrStaging();
 
@@ -30,6 +30,13 @@ export function SignUpVerifications() {
               <Card.Content>
                 <SignUp.Strategy name='phone_code'>
                   <Card.Header>
+                    {logoImageUrl ? (
+                      <Card.Logo
+                        href={homeUrl}
+                        src={logoImageUrl}
+                        alt={applicationName}
+                      />
+                    ) : null}
                     <Card.Title>{t('signUp.phoneCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.phoneCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -102,6 +109,13 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_code'>
                   <Card.Header>
+                    {logoImageUrl ? (
+                      <Card.Logo
+                        href={homeUrl}
+                        src={logoImageUrl}
+                        alt={applicationName}
+                      />
+                    ) : null}
                     <Card.Title>{t('signUp.emailCode.title')}</Card.Title>
                     <Card.Description>{t('signUp.emailCode.subtitle')}</Card.Description>
                     <Card.Description>
@@ -174,6 +188,13 @@ export function SignUpVerifications() {
 
                 <SignUp.Strategy name='email_link'>
                   <Card.Header>
+                    {logoImageUrl ? (
+                      <Card.Logo
+                        href={homeUrl}
+                        src={logoImageUrl}
+                        alt={applicationName}
+                      />
+                    ) : null}
                     <Card.Title>{t('signUp.emailLink.title')}</Card.Title>
                     <Card.Description>
                       {t('signUp.emailLink.subtitle', {