Display box icon as fallback

Author: LauraBeatris

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';