Display box icon as fallback

Author: LauraBeatris

packages/react/src/isomorphicClerk.ts

@@ -2,11 +2,12 @@ import { inBrowser } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJSScript, loadClerkUIScript } from '@clerk/shared/loadClerkJsScript';
 import type {
+  __experimental_ConfigureSSOProps,
   __internal_AttemptToEnableEnvironmentSettingParams,
   __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
   __internal_EnableOrganizationsPromptProps,
-  OAuthConsentProps,
+  __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationModalProps,
@@ -25,7 +26,6 @@ import type {
   ClerkOptions,
   ClerkStatus,
   ClientResource,
-  __experimental_ConfigureSSOProps,
   CreateOrganizationParams,
   CreateOrganizationProps,
   DomainOrProxyUrl,
@@ -161,7 +161,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountPricingTableNodes = new Map<HTMLDivElement, PricingTableProps | undefined>();
   private premountAPIKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();
   private premountConfigureSSONodes = new Map<HTMLDivElement, __experimental_ConfigureSSOProps | undefined>();
-  private premountOAuthConsentNodes = new Map<HTMLDivElement, OAuthConsentProps | undefined>();
+  private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
   private premountTaskResetPasswordNodes = new Map<HTMLDivElement, TaskResetPasswordProps | undefined>();
   private premountTaskSetupMFANodes = new Map<HTMLDivElement, TaskSetupMFAProps | undefined>();
@@ -1321,7 +1321,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => {
+  mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
     this.__internal_mountOAuthConsent(node, props);
   };
 

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -1,14 +1,15 @@
+import { useOrganization } from '@clerk/shared/react/index';
 import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
 import React from 'react';
 
 import { useEnvironment, withCoreUserGuard } from '@/contexts';
-import { Col, Flex, Flow, localizationKeys, Text } from '@/customizables';
+import { Box, Col, Flex, Flow, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
 import { ApplicationLogo } from '@/elements/ApplicationLogo';
 import { withCardStateProvider } from '@/elements/contexts';
 import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
 import { ProfileCard } from '@/elements/ProfileCard';
+import { BoxIcon } from '@/icons';
 import { Route, Switch } from '@/router';
-import { useOrganization } from '@clerk/shared/react/index';
 
 const ConfigureSSOInternal = () => {
   return (
@@ -26,8 +27,10 @@ const ConfigureSSOInternal = () => {
 
 const AuthenticatedContent = withCoreUserGuard(() => {
   const contentRef = React.useRef<HTMLDivElement>(null);
-  const { applicationName } = useEnvironment().displayConfig;
+  const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
   const { organizationSettings } = useEnvironment();
+  const { parsedOptions } = useAppearance();
+  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
 
   return (
     <ProfileCard.Root
@@ -37,17 +40,40 @@ const AuthenticatedContent = withCoreUserGuard(() => {
         <NavBar
           header={
             <Flex
+              align='center'
               sx={t => ({
                 gap: t.space.$2,
                 padding: `${t.space.$none} ${t.space.$3}`,
                 maxWidth: '100%',
               })}
             >
-              <ApplicationLogo
-                sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}
-              />
+              {hasLogo ? (
+                <ApplicationLogo
+                  sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}
+                />
+              ) : (
+                <Box
+                  sx={t => ({
+                    width: t.space.$9,
+                    height: t.space.$9,
+                    flexShrink: 0,
+                    borderRadius: t.radii.$md,
+                    backgroundColor: t.colors.$primary500,
+                    color: t.colors.$colorPrimaryForeground,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  })}
+                  aria-hidden
+                >
+                  <Icon
+                    icon={BoxIcon}
+                    sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
+                  />
+                </Box>
+              )}
 
-              <Col sx={t => ({ gap: t.space.$0x5, minWidth: 0 })}>
+              <Col sx={{ minWidth: 0 }}>
                 <Text
                   as='p'
                   truncate
@@ -71,6 +97,11 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 
 const OrganizationSubtitle = () => {
   const { organization } = useOrganization();
+
+  if (!organization) {
+    return null;
+  }
+
   return (
     <Text
       as='span'

packages/ui/src/icons/box.svg

@@ -13,6 +13,7 @@ export { default as ArrowsUpDown } from './arrows-up-down.svg';
 export { default as AuthApp } from './auth-app.svg';
 export { default as Billing } from './billing.svg';
 export { default as Block } from './block.svg';
+export { default as BoxIcon } from './box.svg';
 export { default as Caret } from './caret.svg';
 export { default as CaretLeft } from './caret-left.svg';
 export { default as CaretRight } from './caret-right.svg';