feat(clerk-js): Initial work for user profile retheme (#2305)

clerk · Dec 11, 2023 · 4eed423 · 4eed423
1 parent 7b58bc4
commit 4eed423
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 65 deletions.
diff --git a/.changeset/neat-numbers-decide.md b/.changeset/neat-numbers-decide.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx
@@ -18,7 +18,6 @@ export const SingleSessionActions = (props: SessionActionsProps) => {
       role='menu'
       elementDescriptor={descriptors.userButtonPopoverActions}
       elementId={descriptors.userButtonPopoverActions.setId('singleSession')}
-      sx={t => ({ backgroundColor: t.colors.$blackAlpha100 })}
     >
       <Action
         elementDescriptor={descriptors.userButtonPopoverActionButton}

diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
@@ -40,8 +40,6 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       label={localizationKeys('userButton.action__addAccount')}
       onClick={handleAddAccountClicked}
       sx={t => ({
-        borderBottomLeftRadius: t.radii.$lg,
-        borderBottomRightRadius: t.radii.$lg,
         backgroundColor: t.colors.$colorBackground,
       })}
     />
@@ -52,7 +50,6 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       role='menu'
       sx={t => ({
         padding: t.space.$2,
-        backgroundColor: t.colors.$blackAlpha100,
         borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
       })}
     >
@@ -81,10 +78,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
 
   const sessionActions = (
     <>
-      <SecondaryActions
-        role='menu'
-        sx={t => ({ backgroundColor: t.colors.$blackAlpha100 })}
-      >
+      <SecondaryActions role='menu'>
         {otherSessions.map(session => (
           <PreviewButton
             key={session.id}
@@ -93,7 +87,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
               height: t.sizes.$20,
               borderRadius: 0,
               borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-              backgroundColor: t.colors.$white,
+              backgroundColor: t.colors.$colorBackground,
             })}
             onClick={handleSessionClicked(session)}
             role='menuitem'
@@ -106,7 +100,6 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         ))}
         {addAccountButton}
       </SecondaryActions>
-      {signOutAllButton}
     </>
   );
 
@@ -152,7 +145,9 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
             </>
           )}
         </PopoverCard.Main>
-        <PopoverCard.Footer elementDescriptor={descriptors.userButtonPopoverFooter} />
+        <PopoverCard.Footer elementDescriptor={descriptors.userButtonPopoverFooter}>
+          {!authConfig.singleSessionMode && signOutAllButton}
+        </PopoverCard.Footer>
       </PopoverCard.Root>
     </RootBox>
   );

diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx
@@ -34,19 +34,19 @@ export const RootPage = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      gap={8}
+      sx={t => ({ gap: t.space.$8 })}
     >
       <NavbarMenuButtonRow />
       <CardAlert>{card.error}</CardAlert>
       <Col
         elementDescriptor={descriptors.profilePage}
         elementId={descriptors.profilePage.setId('account')}
-        gap={8}
       >
         <Header.Root id='cl-section-account'>
           <Header.Title
             localizationKey={localizationKeys('userProfile.start.headerTitle__account')}
-            textVariant='h1'
+            sx={t => ({ marginBottom: t.space.$4 })}
+            textVariant='h2'
           />
         </Header.Root>
 

diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx
@@ -6,6 +6,7 @@ import { ComponentContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
+import { mqu } from '../../styledSystem';
 import type { UserProfileCtx } from '../../types';
 import { UserProfileNavbar } from './UserProfileNavbar';
 import { UserProfileRoutes } from './UserProfileRoutes';
@@ -33,7 +34,15 @@ const AuthenticatedRoutes = withCoreUserGuard(() => {
   const contentRef = React.useRef<HTMLDivElement>(null);
   return (
     <ProfileCard
-      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
+      sx={t => ({
+        display: 'grid',
+        gridTemplateColumns: '1fr 2.5fr',
+        [mqu.md]: {
+          display: 'block',
+        },
+        height: t.sizes.$176,
+        overflow: 'hidden',
+      })}
     >
       <UserProfileNavbar contentRef={contentRef}>
         <UserProfileRoutes />

diff --git a/packages/clerk-js/src/ui.retheme/elements/Card.tsx b/packages/clerk-js/src/ui.retheme/elements/Card.tsx
@@ -47,8 +47,10 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
               padding: t.space.$8,
               boxShadow:
                 '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06), 0px 0px 0px 1px rgba(25, 28, 33, 0.04)',
+              maxWidth: `calc(100vw - ${t.sizes.$20})`,
               width: t.sizes.$100,
-              borderRadius: `${t.radii.$xl} ${t.radii.$xl} ${t.radii.$lg} ${t.radii.$lg}`,
+              borderRadius: t.radii.$lg,
+              textAlign: 'center',
             }),
             sx,
           ]}
@@ -77,6 +79,7 @@ export const ProfileCard = React.forwardRef<HTMLDivElement, CardProps>((props, r
       sx={[
         t => ({
           width: t.sizes.$220,
+          maxWidth: `calc(100vw - ${t.sizes.$20})`,
         }),
         sx,
       ]}
@@ -102,7 +105,7 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
       elementDescriptor={[descriptors.card, props.elementDescriptor as ElementDescriptor]}
       sx={[
         t => ({
-          backgroundColor: t.colors.$colorBackground,
+          background: `linear-gradient(${t.colors.$blackAlpha100},${t.colors.$blackAlpha100}), linear-gradient(${t.colors.$colorBackground}, ${t.colors.$colorBackground})`,
           overflow: 'hidden',
           willChange: 'transform, opacity, height',
           transitionProperty: t.transitionProperty.$common,
@@ -155,12 +158,8 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       justify='center'
       elementDescriptor={descriptors.cardFooter}
       sx={t => ({
-        '>:first-of-type': {
-          padding: `${t.space.$4} ${t.space.$2} ${t.space.$2} ${t.space.$2}`,
-          marginTop: `-${t.space.$2}`,
-        },
+        padding: t.space.$2,
         '>:not(:first-of-type)': {
-          padding: `${t.space.$2}`,
           borderTop: t.borders.$normal,
           borderColor: t.colors.$blackAlpha300,
         },
@@ -186,7 +185,6 @@ export const CardFooterItem = React.forwardRef<HTMLDivElement, CardFooterItemPro
           position: 'relative',
           width: '100%',
           borderRadius: `0 0 ${t.radii.$xl} ${t.radii.$xl}`,
-          backgroundColor: t.colors.$blackAlpha200,
         }),
       ]}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Header.tsx b/packages/clerk-js/src/ui.retheme/elements/Header.tsx
@@ -10,17 +10,19 @@ const Root = React.memo((props: PropsOfComponent<typeof Col>): JSX.Element => {
     <Col
       elementDescriptor={descriptors.header}
       gap={1}
-      sx={[{ textAlign: 'center' }, sx]}
+      sx={sx}
       {...rest}
     />
   );
 });
 
 const Title = React.memo((props: PropsOfComponent<typeof Heading>): JSX.Element => {
+  const { sx, ...rest } = props;
   return (
     <Heading
       elementDescriptor={descriptors.headerTitle}
-      {...props}
+      sx={sx}
+      {...rest}
     />
   );
 });

diff --git a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
@@ -188,13 +188,10 @@ const NavbarContainer = (
     <Col
       elementDescriptor={descriptors.navbar}
       sx={t => ({
-        maxWidth: t.space.$60,
-        borderRight: `${t.borders.$normal} ${t.colors.$blackAlpha300}`,
-        backgroundColor: t.colors.$blackAlpha100,
         [mqu.md]: {
           display: 'none',
         },
-        padding: `${t.space.$10} ${t.space.$6} ${t.space.$3} ${t.space.$6}`,
+        padding: `${t.space.$9} ${t.space.$6} ${t.space.$3} ${t.space.$6}`,
         color: t.colors.$colorText,
         justifyContent: 'space-between',
       })}

diff --git a/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx b/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useEnvironment } from '../contexts';
-import { descriptors, Flex, Flow, Link, localizationKeys, useAppearance } from '../customizables';
+import { Col, descriptors, Flex, Flow, Link, localizationKeys, useAppearance } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
 import { animations } from '../styledSystem';
 import { BaseCard } from './Card';
@@ -32,7 +32,7 @@ const PopoverCardMain = (props: PropsOfComponent<typeof Flex>) => {
   return (
     <Flex
       direction='col'
-      sx={sx}
+      sx={[t => ({ backgroundColor: t.colors.$colorBackground, borderRadius: t.radii.$lg, overflow: 'hidden' }), sx]}
       {...rest}
     >
       {props.children}
@@ -41,7 +41,7 @@ const PopoverCardMain = (props: PropsOfComponent<typeof Flex>) => {
 };
 
 const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
-  const { sx, ...rest } = props;
+  const { sx, children, ...rest } = props;
   const { branded } = useEnvironment().displayConfig;
   const { privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
   const shouldShow = branded || privacyPageUrl || termsPageUrl;
@@ -51,25 +51,24 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
   }
 
   return (
-    <Flex
+    <Col
       justify='between'
       sx={[
-        t => ({
-          padding: `${t.space.$4} 0`,
+        {
           borderBottomLeftRadius: 'inherit',
           borderBottomRightRadius: 'inherit',
-          backgroundColor: t.colors.$blackAlpha100,
           '&:empty': {
             padding: '0',
           },
-        }),
+        },
         sx,
       ]}
       {...rest}
     >
-      <PoweredByClerkTag />
+      {children}
+      <PoweredByClerkTag sx={t => ({ padding: `${t.space.$4} 0` })} />
       <PopoverCardLinks />
-    </Flex>
+    </Col>
   );
 };
 

diff --git a/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx b/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx
@@ -31,7 +31,13 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
   return (
     <Col
       elementDescriptor={descriptors.scrollBox}
-      sx={t => ({ position: 'relative', borderRadius: t.radii.$xl, width: '100%', overflowY: 'auto' })}
+      sx={t => ({
+        backgroundColor: t.colors.$colorBackground,
+        position: 'relative',
+        borderRadius: t.radii.$lg,
+        width: '100%',
+        overflowY: 'auto',
+      })}
     >
       <Col
         elementDescriptor={descriptors.pageScrollBox}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Section.tsx b/packages/clerk-js/src/ui.retheme/elements/Section.tsx
@@ -12,13 +12,18 @@ type ProfileSectionProps = Omit<PropsOfComponent<typeof Flex>, 'title'> & {
 };
 
 export const ProfileSection = (props: ProfileSectionProps) => {
-  const { title, children, id, subtitle, ...rest } = props;
+  const { title, children, id, subtitle, sx, ...rest } = props;
   return (
     <Col
-      elementDescriptor={descriptors.profileSection}
-      elementId={descriptors.profileSection.setId(id)}
+      sx={[
+        t => ({
+          borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+          padding: `${t.space.$4} 0`,
+          gap: t.space.$4,
+        }),
+        sx,
+      ]}
       {...rest}
-      gap={2}
     >
       <SectionHeader
         localizationKey={title}
@@ -27,22 +32,30 @@ export const ProfileSection = (props: ProfileSectionProps) => {
         textElementDescriptor={descriptors.profileSectionTitleText}
         textElementId={descriptors.profileSectionTitleText.setId(id)}
       />
-      {subtitle && (
-        <SectionSubHeader
-          localizationKey={subtitle}
-          elementDescriptor={descriptors.profileSectionSubtitle}
-          elementId={descriptors.profileSectionSubtitle.setId(id)}
-          textElementDescriptor={descriptors.profileSectionSubtitleText}
-          textElementId={descriptors.profileSectionSubtitleText.setId(id)}
-        />
-      )}
-      <Col
-        elementDescriptor={descriptors.profileSectionContent}
-        elementId={descriptors.profileSectionContent.setId(id)}
+      <Flex
+        align='center'
+        elementDescriptor={descriptors.profileSection}
+        elementId={descriptors.profileSection.setId(id)}
         gap={2}
       >
-        {children}
-      </Col>
+        {subtitle && (
+          <SectionSubHeader
+            localizationKey={subtitle}
+            elementDescriptor={descriptors.profileSectionSubtitle}
+            elementId={descriptors.profileSectionSubtitle.setId(id)}
+            textElementDescriptor={descriptors.profileSectionSubtitleText}
+            textElementId={descriptors.profileSectionSubtitleText.setId(id)}
+          />
+        )}
+        <Col
+          elementDescriptor={descriptors.profileSectionContent}
+          elementId={descriptors.profileSectionContent.setId(id)}
+          gap={2}
+          sx={{ width: '100%' }}
+        >
+          {children}
+        </Col>
+      </Flex>
     </Col>
   );
 };
@@ -56,13 +69,10 @@ type SectionHeaderProps = PropsOfComponent<typeof Flex> & {
 export const SectionHeader = (props: SectionHeaderProps) => {
   const { textElementDescriptor, textElementId, localizationKey, ...rest } = props;
   return (
-    <Flex
-      {...rest}
-      sx={theme => ({ borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}` })}
-    >
+    <Flex {...rest}>
       <Text
         localizationKey={localizationKey}
-        variant='h2'
+        variant='h3'
         elementDescriptor={textElementDescriptor}
         elementId={textElementId}
       />

diff --git a/packages/localizations/src/en-US.retheme.ts b/packages/localizations/src/en-US.retheme.ts
@@ -251,7 +251,7 @@ export const enUS: LocalizationResource = {
       description: 'Manage your account info.',
     },
     start: {
-      headerTitle__account: 'Profile',
+      headerTitle__account: 'Profile details',
       headerTitle__security: 'Security',
       profileSection: {
         title: 'Profile',

diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
@@ -35,7 +35,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     <ClerkProvider
       appearance={{
         baseTheme: themes[selectedTheme],
-        variables: { colorPrimary: '#f85656' },
         layout: {
           shimmer: true,
         },