refactor(clerk-js): Expand ApplicationLogo usage for oAuth logo (#6518)

Author: alexcarpenter

.changeset/chilly-ravens-cover.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Refactor ApplicationLogo rendering logic to account for oAuth logos within OAuthConsent component.

packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx

@@ -1,10 +1,10 @@
 import { useUser } from '@clerk/shared/react';
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 
 import { useEnvironment, useOAuthConsentContext } from '@/ui/contexts';
 import { Box, Button, Flex, Flow, Grid, Icon, Text } from '@/ui/customizables';
 import { ApplicationLogo } from '@/ui/elements/ApplicationLogo';
-import { Avatar } from '@/ui/elements/Avatar';
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
@@ -42,13 +42,16 @@ export function OAuthConsentInternal() {
             {/* both have avatars */}
             {oAuthApplicationLogoUrl && logoImageUrl && (
               <ConnectionHeader>
-                <Avatar
-                  imageUrl={oAuthApplicationLogoUrl}
-                  size={t => t.space.$12}
-                  rounded={false}
-                />
+                <ConnectionItem justify='end'>
+                  <ApplicationLogo
+                    src={oAuthApplicationLogoUrl}
+                    alt={oAuthApplicationName}
+                  />
+                </ConnectionItem>
                 <ConnectionSeparator />
-                <ApplicationLogo />
+                <ConnectionItem justify='start'>
+                  <ApplicationLogo />
+                </ConnectionItem>
               </ConnectionHeader>
             )}
             {/* only OAuth app has an avatar */}
@@ -59,10 +62,9 @@ export function OAuthConsentInternal() {
                     position: 'relative',
                   }}
                 >
-                  <Avatar
-                    imageUrl={oAuthApplicationLogoUrl}
-                    size={t => t.space.$12}
-                    rounded={false}
+                  <ApplicationLogo
+                    src={oAuthApplicationLogoUrl}
+                    alt={oAuthApplicationName}
                   />
                   <ConnectionIcon
                     size='sm'
@@ -77,31 +79,21 @@ export function OAuthConsentInternal() {
             )}
             {/* only Clerk application has an avatar */}
             {!oAuthApplicationLogoUrl && logoImageUrl && (
-              <Flex
-                justify='center'
-                align='center'
-                gap={4}
-                sx={t => ({
-                  marginBlockEnd: t.space.$6,
-                })}
-              >
-                <ConnectionIcon />
+              <ConnectionHeader>
+                <ConnectionItem justify='end'>
+                  <ConnectionIcon />
+                </ConnectionItem>
                 <ConnectionSeparator />
-                <ApplicationLogo />
-              </Flex>
+                <ConnectionItem justify='start'>
+                  <ApplicationLogo />
+                </ConnectionItem>
+              </ConnectionHeader>
             )}
             {/* no avatars */}
             {!oAuthApplicationLogoUrl && !logoImageUrl && (
-              <Flex
-                justify='center'
-                align='center'
-                gap={4}
-                sx={t => ({
-                  marginBlockEnd: t.space.$6,
-                })}
-              >
+              <ConnectionHeader>
                 <ConnectionIcon />
-              </Flex>
+              </ConnectionHeader>
             )}
             <Header.Title localizationKey={oAuthApplicationName} />
             <Header.Subtitle
@@ -320,6 +312,17 @@ function ConnectionHeader({ children }: { children: React.ReactNode }) {
   );
 }
 
+function ConnectionItem({ children, sx, ...props }: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      {...props}
+      sx={[{ flex: 1 }, sx]}
+    >
+      {children}
+    </Flex>
+  );
+}
+
 function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: ThemableCssProp }) {
   const scale: ThemableCssProp = t => {
     const value = size === 'sm' ? t.space.$6 : t.space.$12;

packages/clerk-js/src/ui/elements/ApplicationLogo.tsx

@@ -21,15 +21,30 @@ const getContainerHeightForImageRatio = (imageRef: React.RefObject<HTMLImageElem
   return width;
 };
 
-type ApplicationLogoProps = PropsOfComponent<typeof Flex>;
+export type ApplicationLogoProps = PropsOfComponent<typeof Flex> & {
+  /**
+   * The URL of the image to display.
+   */
+  src?: string;
+  /**
+   * The alt text for the image.
+   */
+  alt?: string;
+  /**
+   * The URL to navigate to when the logo is clicked.
+   */
+  href?: string;
+};
 
-export const ApplicationLogo = (props: ApplicationLogoProps) => {
+export const ApplicationLogo: React.FC<ApplicationLogoProps> = (props: ApplicationLogoProps): JSX.Element | null => {
+  const { src, alt, href, sx, ...rest } = props;
   const imageRef = React.useRef<HTMLImageElement>(null);
   const [loaded, setLoaded] = React.useState(false);
   const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;
   const { parsedLayout } = useAppearance();
-  const imageSrc = parsedLayout.logoImageUrl || logoImageUrl;
-  const logoUrl = parsedLayout.logoLinkUrl || homeUrl;
+  const imageSrc = src || parsedLayout.logoImageUrl || logoImageUrl;
+  const imageAlt = alt || applicationName;
+  const logoUrl = href || parsedLayout.logoLinkUrl || homeUrl;
 
   if (!imageSrc) {
     return null;
@@ -39,7 +54,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
     <Image
       ref={imageRef}
       elementDescriptor={descriptors.logoImage}
-      alt={applicationName}
+      alt={imageAlt}
       src={imageSrc}
       size={200}
       onLoad={() => setLoaded(true)}
@@ -55,20 +70,18 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
   return (
     <Flex
       elementDescriptor={descriptors.logoBox}
-      {...props}
+      {...rest}
       sx={[
         theme => ({
           height: getContainerHeightForImageRatio(imageRef, theme.sizes.$6),
           justifyContent: 'center',
         }),
-        props.sx,
+        sx,
       ]}
     >
       {logoUrl ? (
         <RouterLink
-          sx={{
-            justifyContent: 'center',
-          }}
+          focusRing
           to={logoUrl}
         >
           {image}

packages/clerk-js/src/ui/primitives/Link.tsx

@@ -33,10 +33,19 @@ const { applyVariants, filterProps } = createVariants(theme => ({
       },
       inherit: { color: 'inherit' },
     },
+    focusRing: {
+      true: {
+        '&:focus': {
+          outline: 'none',
+          ...common.focusRing(theme),
+        },
+      },
+    },
   },
   defaultVariants: {
     colorScheme: 'primary',
     variant: 'body',
+    focusRing: false,
   },
 }));