fix(clerk-js): Minor polishing on CreateOrganization component (#2392)

* fix(clerk-js): Minor polishing on CreateOrganization component * fix(clerk-js): Rename logo upload localization key to `uploadAction__title`
clerk · Dec 18, 2023 · b718c00 · b718c00
1 parent 1fed2c7
commit b718c00
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 43 deletions.
diff --git a/.changeset/hip-planets-reply.md b/.changeset/hip-planets-reply.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
@@ -3,7 +3,7 @@ import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { Col, Icon, Text } from '../../customizables';
+import { Col, Icon } from '../../customizables';
 import { Form, FormButtonContainer, FormContent, IconButton, SuccessPage, useCardState } from '../../elements';
 import { Upload } from '../../icons';
 import type { LocalizationKey } from '../../localization';
@@ -104,7 +104,7 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
     slugField.setValue(val);
   };
 
-  const headerTitleTextVariant = props.flow === 'organizationList' ? 'h2' : undefined;
+  const headerTitleTextVariant = 'h2';
   const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'subtitle' : undefined;
 
   return (
@@ -115,20 +115,10 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
         headerSubtitle={props?.startPage?.headerSubtitle}
         headerTitleTextVariant={headerTitleTextVariant}
         headerSubtitleTextVariant={headerSubtitleTextVariant}
-        sx={t => ({ minHeight: t.sizes.$60, gap: 0 })}
+        sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6 })}
       >
         <Form.Root onSubmit={onSubmit}>
           <Col>
-            <Text
-              variant='subtitle'
-              sx={t => ({
-                textAlign: 'left',
-                marginBottom: t.space.$2,
-                color: t.colors.$blackAlpha700,
-              })}
-            >
-              Logo
-            </Text>
             <OrganizationProfileAvatarUploader
               organization={{ name: nameField.value }}
               onAvatarChange={async file => await setFile(file)}

diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx
@@ -2,27 +2,20 @@ import { useClerk } from '@clerk/shared/react';
 
 import { useCreateOrganizationContext } from '../../contexts';
 import { localizationKeys } from '../../customizables';
-import { Card, Header, withCardStateProvider } from '../../elements';
+import { Card, withCardStateProvider } from '../../elements';
 import { CreateOrganizationForm } from './CreateOrganizationForm';
 
 export const CreateOrganizationPage = withCardStateProvider(() => {
-  const title = localizationKeys('createOrganization.title');
   const { closeCreateOrganization } = useClerk();
 
   const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext();
 
   return (
     <Card.Root sx={t => ({ width: t.sizes.$120 })}>
-      <Header.Root
-        sx={t => ({
-          padding: `${t.space.$4} ${t.space.$5}`,
-        })}
-      >
-        <Header.Title localizationKey={title} />
-      </Header.Root>
       <Card.Content sx={t => ({ padding: `${t.space.$5}` })}>
         <CreateOrganizationForm
           skipInvitationScreen={skipInvitationScreen}
+          startPage={{ headerTitle: localizationKeys('createOrganization.title') }}
           navigateAfterCreateOrganization={navigateAfterCreateOrganization}
           flow={'default'}
           onComplete={() => {

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
@@ -92,15 +92,9 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
             padding: `${t.space.$none} ${t.space.$5} ${t.space.$5}`,
           })}
         >
-          <Header.Root
-            sx={t => ({
-              padding: `${t.space.$4} ${t.space.$5}`,
-            })}
-          >
-            <Header.Title localizationKey={localizationKeys('createOrganization.title')} />
-          </Header.Root>
           <CreateOrganizationForm
             flow='organizationList'
+            startPage={{ headerTitle: localizationKeys('organizationList.createOrganization') }}
             skipInvitationScreen={skipInvitationScreen}
             navigateAfterCreateOrganization={org =>
               navigateAfterSelectOrganization(org).then(() => setCreateOrganizationFlow(false))

diff --git a/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
@@ -1,5 +1,6 @@
 import type { OrganizationResource } from '@clerk/types';
 
+import { Text } from '../../customizables';
 import type { AvatarUploaderProps } from '../../elements';
 import { AvatarUploader, OrganizationAvatar } from '../../elements';
 import { localizationKeys } from '../../localization';
@@ -10,15 +11,26 @@ export const OrganizationProfileAvatarUploader = (
   const { organization, ...rest } = props;
 
   return (
-    <AvatarUploader
-      {...rest}
-      title={localizationKeys('userProfile.profilePage.imageFormTitle')}
-      avatarPreview={
-        <OrganizationAvatar
-          size={theme => theme.sizes.$12}
-          {...organization}
-        />
-      }
-    />
+    <>
+      <Text
+        variant='subtitle'
+        sx={t => ({
+          textAlign: 'left',
+          marginBottom: t.space.$2,
+          color: t.colors.$blackAlpha700,
+        })}
+        localizationKey={localizationKeys('organizationProfile.general.profileSection.uploadAction__title')}
+      />
+      <AvatarUploader
+        {...rest}
+        title={localizationKeys('userProfile.profilePage.imageFormTitle')}
+        avatarPreview={
+          <OrganizationAvatar
+            size={theme => theme.sizes.$12}
+            {...organization}
+          />
+        }
+      />
+    </>
   );
 };
diff --git a/packages/clerk-js/src/ui/elements/FormContent.tsx b/packages/clerk-js/src/ui/elements/FormContent.tsx
@@ -22,9 +22,9 @@ type PageProps = PropsOfComponent<typeof Col> & {
 export const FormContent = (props: PageProps) => {
   const {
     headerTitle,
-    headerTitleTextVariant,
+    headerTitleTextVariant = 'h3',
     headerSubtitle,
-    headerSubtitleTextVariant,
+    headerSubtitleTextVariant = 'body',
     breadcrumbTitle,
     children,
     Breadcrumbs,
@@ -45,13 +45,13 @@ export const FormContent = (props: PageProps) => {
         {headerTitle && (
           <Header.Title
             localizationKey={headerTitle}
-            textVariant='h3'
+            textVariant={headerTitleTextVariant}
           />
         )}
         {headerSubtitle && (
           <Header.Subtitle
             localizationKey={headerSubtitle}
-            variant='body'
+            variant={headerSubtitleTextVariant}
           />
         )}
       </Header.Root>

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -613,6 +613,7 @@ export const enUS: LocalizationResource = {
       profileSection: {
         title: 'Organization Profile',
         primaryButton: 'Edit profile',
+        uploadAction__title: 'Logo',
       },
       domainSection: {
         title: 'Verified domains',

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -577,6 +577,7 @@ type _LocalizationResource = {
       profileSection: {
         title: LocalizationValue;
         primaryButton: LocalizationValue;
+        uploadAction__title: LocalizationValue;
       };
       domainSection: {
         title: LocalizationValue;