From e82aeffeeeb3ac53c1df4f87ff0010460c5ad4be Mon Sep 17 00:00:00 2001 From: George Desipris Date: Fri, 8 Dec 2023 02:06:52 +0200 Subject: [PATCH] feat(clerk-js): Retheme profile cards and scroll boxes --- .changeset/red-shrimps-hunt.md | 2 + .../src/ui.retheme/common/BlockButtons.tsx | 1 - .../OrganizationMembers.tsx | 1 - .../OrganizationProfile.tsx | 4 +- .../OrganizationSettings.tsx | 1 - .../components/UserProfile/RootPage.tsx | 2 - .../components/UserProfile/UserProfile.tsx | 6 +- .../UserProfile/UserProfileNavbar.tsx | 1 + .../clerk-js/src/ui.retheme/elements/Card.tsx | 32 ++++------ .../ui.retheme/elements/InvisibleRootBox.tsx | 1 - .../src/ui.retheme/elements/Navbar.tsx | 38 ++++++------ .../src/ui.retheme/elements/PopoverCard.tsx | 4 +- .../ui.retheme/elements/PoweredByClerk.tsx | 58 ++++++------------- .../elements/ProfileCardContent.tsx | 17 ++---- packages/localizations/src/en-US.retheme.ts | 6 +- packages/types/src/localization.retheme.ts | 4 -- 16 files changed, 68 insertions(+), 110 deletions(-) create mode 100644 .changeset/red-shrimps-hunt.md diff --git a/.changeset/red-shrimps-hunt.md b/.changeset/red-shrimps-hunt.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/red-shrimps-hunt.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui.retheme/common/BlockButtons.tsx b/packages/clerk-js/src/ui.retheme/common/BlockButtons.tsx index 21edca4a608..615c041cb62 100644 --- a/packages/clerk-js/src/ui.retheme/common/BlockButtons.tsx +++ b/packages/clerk-js/src/ui.retheme/common/BlockButtons.tsx @@ -21,7 +21,6 @@ export const AddBlockButton = (props: BlockButtonProps) => { const { leftIcon, ...rest } = props; return ( ({ justifyContent: 'flex-start', gap: theme.space.$2 })} leftIcon={ diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx index 3955c079d29..eec6c7c0656 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx @@ -54,7 +54,6 @@ export const OrganizationMembers = withCardStateProvider(() => { localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')} textVariant='xxlargeMedium' /> - diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx index a0ecc4ad258..8560fd9c38e 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationProfile.tsx @@ -34,7 +34,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => { const AuthenticatedRoutes = withCoreUserGuard(() => { const contentRef = React.useRef(null); return ( - + ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })} + > diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx index 481d314a171..1db4efe88a4 100644 --- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx +++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx @@ -25,7 +25,6 @@ export const OrganizationSettings = () => { localizationKey={localizationKeys('organizationProfile.start.headerTitle__settings')} textVariant='xxlargeMedium' /> - diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx index 237f3bd94df..7d43e006772 100644 --- a/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx +++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/RootPage.tsx @@ -48,7 +48,6 @@ export const RootPage = withCardStateProvider(() => { localizationKey={localizationKeys('userProfile.start.headerTitle__account')} textVariant='xxlargeMedium' /> - @@ -69,7 +68,6 @@ export const RootPage = withCardStateProvider(() => { localizationKey={localizationKeys('userProfile.start.headerTitle__security')} textVariant='xxlargeMedium' /> - {showPassword && } {showMfa && } diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx index b9244243915..6c702fe9c7b 100644 --- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx +++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfile.tsx @@ -32,9 +32,11 @@ const _UserProfile = (_: UserProfileProps) => { const AuthenticatedRoutes = withCoreUserGuard(() => { const contentRef = React.useRef(null); return ( - + ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })} + > - + ); diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileNavbar.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileNavbar.tsx index 82cccb64422..3b747b16dd1 100644 --- a/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileNavbar.tsx +++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/UserProfileNavbar.tsx @@ -9,6 +9,7 @@ export const UserProfileNavbar = ( props: React.PropsWithChildren, 'contentRef'>>, ) => { const { pages } = useUserProfileContext(); + return ( ((props, ref) => export const ProfileCard = React.forwardRef((props, ref) => { const { sx, children, ...rest } = props; - const { branded } = useEnvironment().displayConfig; return ( - - ({ - width: t.sizes.$220, - }), - sx, - ]} - {...rest} - > - {children} - - - {branded && ( - - - - )} - + ({ + width: t.sizes.$220, + }), + sx, + ]} + {...rest} + > + {children} ); }); @@ -112,6 +103,7 @@ export const BaseCard = React.forwardRef((props, sx={[ t => ({ backgroundColor: t.colors.$colorBackground, + overflow: 'hidden', willChange: 'transform, opacity, height', transitionProperty: t.transitionProperty.$common, transitionDuration: '200ms', diff --git a/packages/clerk-js/src/ui.retheme/elements/InvisibleRootBox.tsx b/packages/clerk-js/src/ui.retheme/elements/InvisibleRootBox.tsx index 56a8d3e5778..de51ac4b71c 100644 --- a/packages/clerk-js/src/ui.retheme/elements/InvisibleRootBox.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/InvisibleRootBox.tsx @@ -37,7 +37,6 @@ export const InvisibleRootBox = makeCustomizable(_InvisibleRootBox, { defaultStyles: t => ({ boxSizing: 'border-box', width: 'fit-content', - fontFamily: t.fonts.$main, fontStyle: t.fontStyles.$normal, }), diff --git a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx index c15ae1d4cb2..d916919cac2 100644 --- a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx @@ -22,6 +22,7 @@ import { animations, mqu } from '../styledSystem'; import { colors, sleep } from '../utils'; import { withFloatingTree } from './contexts'; import { Popover } from './Popover'; +import { PoweredByClerkTag } from './PoweredByClerk'; type NavbarContextValue = { isOpen: boolean; open: () => void; close: () => void }; export const [NavbarContext, useNavbarContext, useUnsafeNavbarContext] = @@ -187,34 +188,37 @@ const NavbarContainer = ( ({ - flex: `0 0 ${t.space.$60}`, maxWidth: t.space.$60, borderRight: `${t.borders.$normal} ${t.colors.$blackAlpha300}`, backgroundColor: t.colors.$blackAlpha100, - padding: `${t.space.$9x5} ${t.space.$6}`, [mqu.md]: { display: 'none', }, - gap: t.space.$6, + padding: `${t.space.$9x5} ${t.space.$6} ${t.space.$3} ${t.space.$6}`, color: t.colors.$colorText, + justifyContent: 'space-between', })} > - ({ - gap: t.space.$0x5, - })} - > - + ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` })}> + ({ + gap: t.space.$0x5, + })} + > + - + + + {props.children} - {props.children} + ); }; diff --git a/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx b/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx index a3fc5afca64..a74ca11e7b1 100644 --- a/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/PopoverCard.tsx @@ -5,7 +5,7 @@ import { descriptors, Flex, Flow, Link, localizationKeys, useAppearance } from ' import type { PropsOfComponent } from '../styledSystem'; import { animations } from '../styledSystem'; import { BaseCard } from './Card'; -import { PoweredByClerkText } from './PoweredByClerk'; +import { PoweredByClerkTag } from './PoweredByClerk'; const PopoverCardRoot = React.forwardRef>((props, ref) => { return ( @@ -67,7 +67,7 @@ const PopoverCardFooter = (props: PropsOfComponent) => { ]} {...rest} > - + ); diff --git a/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx b/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx index a219e1aafb9..f92c1437a47 100644 --- a/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/PoweredByClerk.tsx @@ -5,57 +5,33 @@ import { Flex, Icon, Link, Text } from '../customizables'; import { LogoMark } from '../icons'; import type { PropsOfComponent } from '../styledSystem'; -export const PoweredByClerkText = React.memo(() => { - const { branded } = useEnvironment().displayConfig; - - return ( - ({ width: '100%', color: t.colors.$colorTextSecondary })} - > - {branded ? ( - <> - - Secured by - - - - ) : null} - - ); -}); - export const PoweredByClerkTag = React.memo( React.forwardRef>((props, ref) => { + const { sx, ...rest } = props; const { branded } = useEnvironment().displayConfig; - return branded ? ( + return ( ({ - width: '100%', - color: t.colors.$colorTextSecondary, - padding: t.space.$2, - })} - {...props} + sx={[t => ({ width: '100%', color: t.colors.$colorTextSecondary }), sx]} + {...rest} ref={ref} > - ({ color: 'inherit', letterSpacing: theme.space.$none })} - > - Secured by - - + {branded ? ( + <> + + Secured by + + + + ) : null} - ) : null; + ); }), ); diff --git a/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx b/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx index 6034b283510..f4d0506975d 100644 --- a/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx +++ b/packages/clerk-js/src/ui.retheme/elements/ProfileCardContent.tsx @@ -29,7 +29,10 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => { }, [router.currentPath]); return ( - + ({ position: 'relative', borderRadius: t.radii.$xl, width: '100%', overflowY: 'auto' })} + > ({ @@ -44,16 +47,6 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => { > {children} - - ); -}; - -const ScrollerContainer = (props: React.PropsWithChildren>) => { - return ( - ({ position: 'relative', borderRadius: t.radii.$xl, width: '100%', overflow: 'hidden' })} - {...props} - /> + ); }; diff --git a/packages/localizations/src/en-US.retheme.ts b/packages/localizations/src/en-US.retheme.ts index f08dc501463..50b930295b3 100644 --- a/packages/localizations/src/en-US.retheme.ts +++ b/packages/localizations/src/en-US.retheme.ts @@ -251,10 +251,8 @@ export const enUS: LocalizationResource = { description: 'Manage your account info.', }, start: { - headerTitle__account: 'Account', + headerTitle__account: 'Profile', headerTitle__security: 'Security', - headerSubtitle__account: 'Manage your account information', - headerSubtitle__security: 'Manage your security preferences', profileSection: { title: 'Profile', }, @@ -553,8 +551,6 @@ export const enUS: LocalizationResource = { start: { headerTitle__members: 'Members', headerTitle__settings: 'Settings', - headerSubtitle__members: 'View and manage organization members', - headerSubtitle__settings: 'Manage organization settings', }, profilePage: { title: 'Organization Profile', diff --git a/packages/types/src/localization.retheme.ts b/packages/types/src/localization.retheme.ts index b46754b9f4e..28ec6415ec4 100644 --- a/packages/types/src/localization.retheme.ts +++ b/packages/types/src/localization.retheme.ts @@ -271,8 +271,6 @@ type _LocalizationResource = { start: { headerTitle__account: LocalizationValue; headerTitle__security: LocalizationValue; - headerSubtitle__account: LocalizationValue; - headerSubtitle__security: LocalizationValue; profileSection: { title: LocalizationValue; }; @@ -556,8 +554,6 @@ type _LocalizationResource = { start: { headerTitle__members: LocalizationValue; headerTitle__settings: LocalizationValue; - headerSubtitle__members: LocalizationValue; - headerSubtitle__settings: LocalizationValue; }; profilePage: { title: LocalizationValue;