From 4ffa9a45b80235789672ca4bd3b92ebb1f20680a Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <anagstef@users.noreply.github.com>
Date: Fri, 22 Dec 2023 23:12:09 +0200
Subject: [PATCH] fix(clerk-js): Minor UI improvements for OrganizationProfile
 and CreateOrganization (#2442)

---
 .changeset/angry-beers-play.md                            | 2 ++
 .../CreateOrganization/CreateOrganizationForm.tsx         | 3 +--
 .../OrganizationProfile/OrganizationGeneralPage.tsx       | 2 +-
 .../OrganizationProfile/OrganizationMembers.tsx           | 3 ++-
 .../OrganizationMembersTabInvitations.tsx                 | 8 ++++++--
 .../OrganizationMembersTabRequests.tsx                    | 8 ++++++--
 .../OrganizationProfileAvatarUploader.tsx                 | 6 +++---
 .../src/ui/components/OrganizationProfile/ProfileForm.tsx | 7 ++-----
 packages/clerk-js/src/ui/elements/FormButtons.tsx         | 2 +-
 packages/clerk-js/src/ui/elements/Tabs.tsx                | 4 ++--
 packages/localizations/src/en-US.ts                       | 3 ++-
 11 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/angry-beers-play.md

diff --git a/.changeset/angry-beers-play.md b/.changeset/angry-beers-play.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/angry-beers-play.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index 71b83f6f65d..0ad0db2510c 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/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>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx
index f6cd5b91060..9b0c8a26dda 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx
+++ b/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 />
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index 954e6ca9270..e4e373771b0 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/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')}
               />
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
index f16cf690d02..08637e8b5cb 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/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(
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
index eba002a1d20..dd20bccc7ac 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/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')}
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
index 8f364aafd68..62f5d27717b 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
+++ b/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>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx
index 0168e19eb89..9d0e07f0a6f 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx
+++ b/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>
diff --git a/packages/clerk-js/src/ui/elements/FormButtons.tsx b/packages/clerk-js/src/ui/elements/FormButtons.tsx
index 436b1dab5b3..883c8cb4539 100644
--- a/packages/clerk-js/src/ui/elements/FormButtons.tsx
+++ b/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>
diff --git a/packages/clerk-js/src/ui/elements/Tabs.tsx b/packages/clerk-js/src/ui/elements/Tabs.tsx
index 4b38e244829..6b527143e29 100644
--- a/packages/clerk-js/src/ui/elements/Tabs.tsx
+++ b/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 },
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 6a6af099cf4..43e235ae9ae 100644
--- a/packages/localizations/src/en-US.ts
+++ b/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: {