From 382ea0e328554250e412116d8edb780d6f20bbef Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Sat, 17 Feb 2024 01:05:16 +0200
Subject: [PATCH] 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
---
 .changeset/nine-mangos-look.md                    |  2 ++
 .../components/OrganizationProfile/DomainList.tsx |  5 ++++-
 .../UserProfile/ActiveDevicesSection.tsx          |  8 +++-----
 .../UserProfile/ConnectedAccountsSection.tsx      |  5 ++++-
 .../ui/components/UserProfile/EmailsSection.tsx   |  5 ++++-
 .../UserProfile/EnterpriseAccountsSection.tsx     |  1 +
 .../src/ui/components/UserProfile/MfaSection.tsx  | 15 ++++++++++++---
 .../ui/components/UserProfile/PhoneSection.tsx    |  5 ++++-
 .../src/ui/components/UserProfile/Web3Section.tsx |  1 +
 .../clerk-js/src/ui/elements/ArrowBlockButton.tsx |  1 +
 packages/clerk-js/src/ui/elements/Section.tsx     | 14 +++++++++++---
 .../clerk-js/src/ui/elements/ThreeDotsMenu.tsx    |  5 +++--
 12 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/nine-mangos-look.md

diff --git a/.changeset/nine-mangos-look.md b/.changeset/nine-mangos-look.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/nine-mangos-look.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
index b476400f3f..b19a231405 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
+++ b/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} />
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
index 1f0969048a..16a03f9f6d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
+++ b/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 && (
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index e6cae3a617..1ce07a35a1 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/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]}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
index c81027b1ef..e67dcd11fb 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
+++ b/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 })}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
index d8cd2536af..9ea9e0215b 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/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
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
index 99badf2115..ad2aea59e0 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx
+++ b/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}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index dcd15a2bf5..9e1b38720e 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/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}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
index aab21e3448..c23c316b76 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/Web3Section.tsx
+++ b/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 && (
diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index 6b1d8596a1..4c7543c622 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/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 ': {
diff --git a/packages/clerk-js/src/ui/elements/Section.tsx b/packages/clerk-js/src/ui/elements/Section.tsx
index 29b48df743..fdb006609d 100644
--- a/packages/clerk-js/src/ui/elements/Section.tsx
+++ b/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,
       ]}
diff --git a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
index 2c29d8ef24..64d3036924 100644
--- a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
+++ b/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>