fix(clerk-js): Align some sections in User Profile with the designs (#2814)

* fix(clerk-js): Align some sections in User Profile with the designs

* chore(repo): Add Changeset

* fix(clerk-js): Align some sections in User Profile with the designs

* fix(clerk-js): Fix spacing issues to mach the designs

* chore(clerk-js): Revert accidental change

* fix(clerk-js): Fix spacing for MFA section

Author: octoper

.changeset/nine-mangos-look.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

@@ -111,7 +111,10 @@ export const DomainList = withProtect(
         {domainList.map(domain => {
           return (
             <Action.Root key={domain.id}>
-              <ProfileSection.Item id='organizationDomains'>
+              <ProfileSection.Item
+                id='organizationDomains'
+                hoverable
+              >
                 <Flex sx={t => ({ gap: t.space.$1 })}>
                   <Text>{domain.name}</Text>
                   <EnrollmentBadge organizationDomain={domain} />

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -53,12 +53,10 @@ const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) =>
       id='activeDevices'
       elementDescriptor={descriptors.activeDeviceListItem}
       elementId={isCurrent ? descriptors.activeDeviceListItem.setId('current') : undefined}
-      sx={t => ({
+      hoverable
+      sx={{
         alignItems: 'flex-start',
-        padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`,
-        borderRadius: t.radii.$lg,
-        ':hover': { backgroundColor: t.colors.$neutralAlpha50 },
-      })}
+      }}
     >
       {status.isLoading && <FullHeightLoader />}
       {!status.isLoading && (

packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx

@@ -61,7 +61,10 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
 
             return (
               <Action.Root key={account.id}>
-                <ProfileSection.Item id='connectedAccounts'>
+                <ProfileSection.Item
+                  id='connectedAccounts'
+                  hoverable
+                >
                   <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}>
                     <Image
                       elementDescriptor={[descriptors.providerIcon]}

packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx

@@ -48,7 +48,10 @@ export const EmailsSection = () => {
         <ProfileSection.ItemList id='emailAddresses'>
           {user?.emailAddresses.sort(primaryIdentificationFirst(user.primaryEmailAddressId)).map(email => (
             <Action.Root key={email.emailAddress}>
-              <ProfileSection.Item id='emailAddresses'>
+              <ProfileSection.Item
+                id='emailAddresses'
+                hoverable
+              >
                 <Flex
                   as='span'
                   sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}

packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx

@@ -28,6 +28,7 @@ export const EnterpriseAccountsSection = () => {
                 gap: t.space.$2,
                 justifyContent: 'start',
               })}
+              hoverable
               key={account.id}
             >
               <Image

packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx

@@ -45,7 +45,10 @@ export const MfaSection = () => {
         <ProfileSection.ItemList id='mfa'>
           {showTOTP && (
             <Action.Root>
-              <ProfileSection.Item id='mfa'>
+              <ProfileSection.Item
+                id='mfa'
+                hoverable
+              >
                 <Flex sx={t => ({ gap: t.space.$2, alignItems: 'center' })}>
                   <Icon
                     icon={AuthApp}
@@ -73,7 +76,10 @@ export const MfaSection = () => {
               const isDefault = !showTOTP && phone.defaultSecondFactor;
               return (
                 <Action.Root key={phone.id}>
-                  <ProfileSection.Item id='mfa'>
+                  <ProfileSection.Item
+                    id='mfa'
+                    hoverable
+                  >
                     <Flex sx={t => ({ gap: t.space.$2, alignItems: 'center' })}>
                       <Icon
                         icon={Mobile}
@@ -102,7 +108,10 @@ export const MfaSection = () => {
 
           {showBackupCode && (
             <Action.Root>
-              <ProfileSection.Item id='mfa'>
+              <ProfileSection.Item
+                id='mfa'
+                hoverable
+              >
                 <Flex sx={t => ({ gap: t.space.$2, alignItems: 'center' })}>
                   <Icon
                     icon={DotCircle}

packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx

@@ -49,7 +49,10 @@ export const PhoneSection = () => {
           {user?.phoneNumbers.sort(primaryIdentificationFirst(user.primaryPhoneNumberId)).map(phone => (
             <Action.Root key={phone.id}>
               <Action.Closed value=''>
-                <ProfileSection.Item id='phoneNumbers'>
+                <ProfileSection.Item
+                  id='phoneNumbers'
+                  hoverable
+                >
                   <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                     <Flex
                       gap={2}

packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx

@@ -45,6 +45,7 @@ export const Web3Section = withCardStateProvider(() => {
                       key={wallet.id}
                       id='web3Wallets'
                       align='start'
+                      hoverable
                     >
                       <Flex sx={t => ({ alignItems: 'center', gap: t.space.$2, width: '100%' })}>
                         {strategyToDisplayData[strategy].iconUrl && (

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

@@ -62,6 +62,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
           justifyContent: 'center',
           borderColor: theme.colors.$neutralAlpha100,
           alignItems: 'center',
+          padding: `${theme.space.$1x5} ${theme.space.$3} ${theme.space.$1x5} ${theme.space.$2x5}`,
           '--arrow-opacity': '0',
           '--arrow-transform': `translateX(-${theme.space.$2});`,
           '&:hover,&:focus ': {

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

@@ -114,10 +114,13 @@ const ProfileSectionItemList = (props: ProfileSectionItemListProps) => {
   );
 };
 
-type ProfileSectionItemProps = Omit<PropsOfComponent<typeof Flex>, 'id'> & { id: ProfileSectionId };
+type ProfileSectionItemProps = Omit<PropsOfComponent<typeof Flex>, 'id'> & {
+  id: ProfileSectionId;
+  hoverable?: boolean;
+};
 
 const ProfileSectionItem = (props: ProfileSectionItemProps) => {
-  const { children, id, sx, ...rest } = props;
+  const { children, id, sx, hoverable, ...rest } = props;
 
   return (
     <Flex
@@ -128,8 +131,13 @@ const ProfileSectionItem = (props: ProfileSectionItemProps) => {
           justifyContent: 'space-between',
           width: '100%',
           alignItems: 'center',
-          padding: `${t.space.$1x5} ${t.space.$none} ${t.space.$1x5} ${t.space.$4}`,
+          padding: `${t.space.$2} ${t.space.$3} ${t.space.$1x5} ${t.space.$2x5}`,
           gap: t.space.$2,
+          ...(hoverable && {
+            padding: `${t.space.$1} ${t.space.$1} ${t.space.$1} ${t.space.$2x5}`,
+            borderRadius: t.radii.$lg,
+            ':hover': { backgroundColor: t.colors.$neutralAlpha50 },
+          }),
         }),
         sx,
       ]}

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

@@ -24,7 +24,8 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
       <MenuTrigger>
         <Button
           sx={t => ({
-            padding: t.space.$0x25,
+            padding: t.space.$0x5,
+            boxSizing: 'content-box',
             opacity: t.opacity.$inactive,
             ':hover': {
               opacity: 1,
@@ -35,7 +36,7 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
         >
           <Icon
             icon={ThreeDots}
-            sx={t => ({ width: 'auto', height: t.sizes.$4 })}
+            sx={t => ({ width: 'auto', height: t.sizes.$5 })}
           />
         </Button>
       </MenuTrigger>