fix(clerk-js): Polish paddings in UserProfile

clerk · Dec 15, 2023 · b4d8e1f · b4d8e1f
1 parent eed1381
commit b4d8e1f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 28 deletions.
diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteSection.tsx
@@ -21,7 +21,7 @@ export const DeleteSection = () => {
           </Action.Trigger>
         </Action.Closed>
 
-        <Action.Open value='edit'>
+        <Action.Open value='delete'>
           <Action.Card>
             <DeleteUserForm />
           </Action.Card>

diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -110,6 +110,9 @@ export const NavBar = (props: NavBarProps) => {
           onClick={handleNavigate(r)}
           icon={r.icon}
           isActive={activeId === r.id}
+          sx={t => ({
+            padding: `${t.space.$1x5} ${t.space.$3}`,
+          })}
         >
           {t(r.name)}
         </NavButton>
@@ -145,7 +148,7 @@ const NavbarContainer = (
         [mqu.md]: {
           display: 'none',
         },
-        padding: `${t.space.$9} ${t.space.$6} ${t.space.$3} ${t.space.$6}`,
+        padding: `${t.space.$6} ${t.space.$3} ${t.space.$3}`,
         color: t.colors.$colorText,
         justifyContent: 'space-between',
       })}
@@ -154,6 +157,7 @@ const NavbarContainer = (
         <Col
           sx={t => ({
             gap: t.space.$0x5,
+            padding: `${t.space.$none} ${t.space.$3}`,
           })}
         >
           <Heading
@@ -245,20 +249,23 @@ type NavButtonProps = PropsOfComponent<typeof Button> & {
 };
 
 const NavButton = (props: NavButtonProps) => {
-  const { icon, children, isActive, iconElementDescriptor, iconElementId, ...rest } = props;
+  const { icon, children, isActive, iconElementDescriptor, iconElementId, sx, ...rest } = props;
   return (
     <Button
       variant='ghost'
       textVariant='buttonLarge'
       size='md'
       isActive={isActive}
       {...rest}
-      sx={t => ({
-        gap: t.space.$4,
-        justifyContent: 'flex-start',
-        backgroundColor: isActive ? t.colors.$blackAlpha100 : undefined,
-        opacity: isActive ? 1 : 0.6,
-      })}
+      sx={[
+        t => ({
+          gap: t.space.$4,
+          justifyContent: 'flex-start',
+          backgroundColor: isActive ? t.colors.$blackAlpha100 : undefined,
+          opacity: isActive ? 1 : 0.6,
+        }),
+        sx,
+      ]}
     >
       <Icon
         elementDescriptor={iconElementDescriptor}

diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 
 import { Col, descriptors } from '../../customizables';
 import { useRouter } from '../../router';
-import type { PropsOfComponent } from '../../styledSystem';
-import { animations, common, mqu } from '../../styledSystem';
-import { Alert } from '..';
+import { common, mqu } from '../../styledSystem';
 
 type ProfileCardContentProps = React.PropsWithChildren<{ contentRef?: React.RefObject<HTMLDivElement> }>;
 export const ProfileCardContent = (props: ProfileCardContentProps) => {
@@ -45,7 +43,7 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
         elementDescriptor={descriptors.pageScrollBox}
         sx={theme => ({
           flex: `1`,
-          padding: `${theme.space.$10} ${theme.space.$8}`,
+          padding: `${theme.space.$7} ${theme.space.$8}`,
           [mqu.xs]: {
             padding: `${theme.space.$8} ${theme.space.$5}`,
           },
@@ -58,16 +56,3 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
     </Col>
   );
 };
-
-export const CardAlert = React.memo((props: PropsOfComponent<typeof Alert>) => {
-  return (
-    <Alert
-      variant='danger'
-      sx={theme => ({
-        willChange: 'transform, opacity, height',
-        animation: `${animations.textInBig} ${theme.transitionDuration.$slow}`,
-      })}
-      {...props}
-    />
-  );
-});
diff --git a/packages/clerk-js/src/ui/icons/user.svg b/packages/clerk-js/src/ui/icons/user.svg
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -275,7 +275,7 @@ export const enUS: LocalizationResource = {
       description: 'Manage your account info.',
     },
     start: {
-      headerTitle__account: 'Profile details',
+      headerTitle__account: 'Profile',
       headerTitle__security: 'Security',
       profileSection: {
         title: 'Profile',