fix(clerk-js): Minor UI improvements for OrganizationProfile and CreateOrganization

.changeset/angry-beers-play.md

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

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx

@@ -157,7 +157,6 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
           <Form.ControlRow elementId={nameField.id}>
             <Form.PlainInput
               {...nameField.props}
-              sx={{ flexBasis: '80%' }}
               onChange={onChangeName}
               isRequired
               autoFocus
@@ -166,9 +165,9 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
           <Form.ControlRow elementId={slugField.id}>
             <Form.PlainInput
               {...slugField.props}
-              sx={{ flexBasis: '80%' }}
               onChange={onChangeSlug}
               isRequired
+              pattern='^[a-z0-9\-]+$'
             />
           </Form.ControlRow>
           <FormButtonContainer>

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

@@ -65,7 +65,7 @@ export const OrganizationGeneralPage = () => {
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.general.title')}
             sx={t => ({ marginBottom: t.space.$4 })}
-            textVariant='h1'
+            textVariant='h2'
           />
         </Header.Root>
         <OrganizationProfileSection />

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

@@ -55,7 +55,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
           <Header.Root sx={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}>
             <Header.Title
               localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
-              textVariant='h1'
+              textVariant='h2'
             />
             <Action.Trigger value='invite'>
               <IconButton
@@ -68,6 +68,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
                     sx={t => ({ marginRight: t.space.$2 })}
                   />
                 }
+                sx={t => ({ height: t.space.$8 })}
                 textVariant='buttonSmall'
                 localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
               />

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

@@ -2,6 +2,7 @@ import { BlockButton, Protect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, Flex, localizationKeys } from '../../customizables';
 import { Header } from '../../elements';
+import { Plus } from '../../icons';
 import { useRouter } from '../../router';
 import { DomainList } from './DomainList';
 import { InvitedMembersList } from './InvitedMembersList';
@@ -37,7 +38,7 @@ export const OrganizationMembersTabInvitations = () => {
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
                 )}
-                textVariant='h2'
+                textVariant='h3'
               />
               <Header.Subtitle
                 localizationKey={localizationKeys(
@@ -53,6 +54,9 @@ export const OrganizationMembersTabInvitations = () => {
                     'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',
                   )}
                   id='manageVerifiedDomains'
+                  sx={t => ({ gap: t.space.$2 })}
+                  leftIcon={Plus}
+                  leftIconSx={t => ({ width: t.sizes.$2x5, height: t.sizes.$2x5 })}
                   onClick={() => navigate('../')}
                 />
               }
@@ -79,7 +83,7 @@ export const OrganizationMembersTabInvitations = () => {
               localizationKey={localizationKeys(
                 'organizationProfile.membersPage.invitationsTab.manualInvitations.headerTitle',
               )}
-              textVariant='h2'
+              textVariant='h3'
             />
             <Header.Subtitle
               localizationKey={localizationKeys(

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

@@ -2,6 +2,7 @@ import { BlockButton, Protect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, Flex, localizationKeys } from '../../customizables';
 import { Header } from '../../elements';
+import { Plus } from '../../icons';
 import { useRouter } from '../../router';
 import { DomainList } from './DomainList';
 import { MembershipWidget } from './MembershipWidget';
@@ -37,7 +38,7 @@ export const OrganizationMembersTabRequests = () => {
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
                 )}
-                textVariant='h2'
+                textVariant='h3'
               />
               <Header.Subtitle
                 localizationKey={localizationKeys(
@@ -52,6 +53,9 @@ export const OrganizationMembersTabRequests = () => {
                   textLocalizationKey={localizationKeys(
                     'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
                   )}
+                  leftIcon={Plus}
+                  sx={t => ({ gap: t.space.$2 })}
+                  leftIconSx={t => ({ width: t.sizes.$2x5, height: t.sizes.$2x5 })}
                   id='manageVerifiedDomains'
                   onClick={() => navigate('../')}
                 />
@@ -77,7 +81,7 @@ export const OrganizationMembersTabRequests = () => {
           <Header.Root>
             <Header.Title
               localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerTitle')}
-              textVariant='h2'
+              textVariant='h3'
             />
             <Header.Subtitle
               localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerSubtitle')}

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

@@ -1,6 +1,6 @@
 import type { OrganizationResource } from '@clerk/types';
 
-import { Text } from '../../customizables';
+import { Col, Text } from '../../customizables';
 import type { AvatarUploaderProps } from '../../elements';
 import { AvatarUploader, OrganizationAvatar } from '../../elements';
 import { localizationKeys } from '../../localization';
@@ -11,7 +11,7 @@ export const OrganizationProfileAvatarUploader = (
   const { organization, ...rest } = props;
 
   return (
-    <>
+    <Col>
       <Text
         variant='subtitle'
         sx={t => ({
@@ -31,6 +31,6 @@ export const OrganizationProfileAvatarUploader = (
           />
         }
       />
-    </>
+    </Col>
   );
 };

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

@@ -13,7 +13,6 @@ type ProfileFormProps = FormProps;
 export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
   const { onSuccess, onReset } = props;
   const title = localizationKeys('organizationProfile.profilePage.title');
-  const subtitle = localizationKeys('organizationProfile.profilePage.subtitle');
   const card = useCardState();
   const [avatarChanged, setAvatarChanged] = React.useState(false);
   const { organization } = useOrganization();
@@ -76,10 +75,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
   };
 
   return (
-    <FormContent
-      headerTitle={title}
-      headerSubtitle={subtitle}
-    >
+    <FormContent headerTitle={title}>
       <Form.Root onSubmit={onSubmit}>
         <OrganizationProfileAvatarUploader
           organization={organization}
@@ -102,6 +98,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => {
         <FormButtons
           isDisabled={!canSubmit}
           onReset={onReset}
+          sx={t => ({ marginTop: t.space.$1 })}
         />
       </Form.Root>
     </FormContent>

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

@@ -40,7 +40,7 @@ export const FormButtonContainer = (props: PropsOfComponent<typeof Flex>) => {
       direction={'rowReverse'}
       gap={2}
       {...props}
-      sx={[theme => ({ marginTop: theme.space.$4 }), props.sx]}
+      sx={[theme => ({ marginTop: theme.space.$1 }), props.sx]}
     >
       {props.children}
     </Flex>

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

@@ -73,7 +73,7 @@ export const TabsList = (props: TabsListProps) => {
       sx={[
         theme => ({
           borderBottom: theme.borders.$normal,
-          borderColor: theme.colors.$blackAlpha300,
+          borderColor: theme.colors.$blackAlpha100,
         }),
         sx,
       ]}
@@ -137,7 +137,7 @@ export const Tab = (props: TabProps) => {
           fontWeight: t.fontWeights.$medium,
           borderBottom: t.borders.$normal,
           marginBottom: '-1px',
-          borderColor: isActive ? t.colors.$blackAlpha700 : t.colors.$transparent,
+          borderColor: isActive ? t.colors.$blackAlpha800 : t.colors.$transparent,
           borderRadius: 0,
           width: 'fit-content',
           '&:hover, :focus': { backgroundColor: t.colors.$transparent },

packages/localizations/src/en-US.ts

@@ -649,7 +649,8 @@ export const enUS: LocalizationResource = {
       headerTitle__settings: 'Settings',
     },
     profilePage: {
-      title: 'Organization Profile',
+      title: 'Update Profile',
+      //TODO-RETHEME remove
       subtitle: 'Manage organization profile',
       successMessage: 'The organization has been updated.',
       dangerSection: {