refactor(ui): Ensure footer layout accounts for layout settings (#3958)

Co-authored-by: Joe Bell <[email protected]>
clerk · Aug 15, 2024 · df21af7 · df21af7
1 parent 47299c9
commit df21af7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/.changeset/spotty-wolves-protect.md b/.changeset/spotty-wolves-protect.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
@@ -236,37 +236,41 @@ export const Footer = React.forwardRef(function CardFooter(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const hasPageLinks = helpPageUrl || privacyPageUrl || termsPageUrl;
-  return branded || children ? (
+  const renderFooter = branded || hasPageLinks || children;
+  const renderSubFooter = branded || hasPageLinks;
+  const hasBrandingAndPageLinks = branded && hasPageLinks;
+
+  return renderFooter ? (
     <div
       ref={forwardedRef}
       data-card-footer=''
       {...props}
       className={cx('grid', className)}
     >
       {children}
-      {branded ? (
+
+      {renderSubFooter ? (
         <div
-          className={cx(
-            'flex items-center justify-center px-6 py-4',
-            hasPageLinks ? 'justify-between' : 'justify-center',
-          )}
+          className={cx('flex items-center px-6 py-4', hasBrandingAndPageLinks ? 'justify-between' : 'justify-center')}
         >
-          <p
-            // Note:
-            // We don't use `items-center` here for a more optical fit
-            className='text-gray-a11 inline-flex gap-2 text-sm font-medium'
-          >
-            Secured by{' '}
-            <a
-              aria-label='Clerk logo'
-              href='https://www.clerk.com?utm_source=clerk&amp;utm_medium=components'
-              target='_blank'
-              rel='noopener'
-              className='-m-0.5 inline-flex items-center rounded-sm p-0.5 outline-none focus-visible:ring'
+          {branded ? (
+            <p
+              // Note:
+              // We don't use `items-center` here for a more optical fit
+              className='text-gray-a11 inline-flex gap-2 text-sm font-medium'
             >
-              <ClerkLogo />
-            </a>
-          </p>
+              Secured by{' '}
+              <a
+                aria-label='Clerk logo'
+                href='https://www.clerk.com?utm_source=clerk&amp;utm_medium=components'
+                target='_blank'
+                rel='noopener'
+                className='-m-0.5 inline-flex items-center rounded-sm p-0.5 outline-none focus-visible:ring'
+              >
+                <ClerkLogo />
+              </a>
+            </p>
+          ) : null}
 
           {hasPageLinks ? (
             <div className='flex gap-2'>