diff --git a/.changeset/angry-beers-play.md b/.changeset/angry-beers-play.md new file mode 100644 index 0000000000..a845151cc8 --- /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 71b83f6f65..0ad0db2510 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) => { { diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx index f6cd5b9106..9b0c8a26dd 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 = () => { ({ marginBottom: t.space.$4 })} - textVariant='h1' + textVariant='h2' /> diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx index 954e6ca927..e4e373771b 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(() => { { 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 f16cf690d0..08637e8b5c 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' /> { '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' /> { localizationKey={localizationKeys( 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle', )} - textVariant='h2' + textVariant='h3' /> { 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 = () => { + ({ @@ -31,6 +31,6 @@ export const OrganizationProfileAvatarUploader = ( /> } /> - + ); }; diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx index 0168e19eb8..9d0e07f0a6 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 ( - + { ({ marginTop: t.space.$1 })} /> diff --git a/packages/clerk-js/src/ui/elements/FormButtons.tsx b/packages/clerk-js/src/ui/elements/FormButtons.tsx index 436b1dab5b..883c8cb453 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) => { direction={'rowReverse'} gap={2} {...props} - sx={[theme => ({ marginTop: theme.space.$4 }), props.sx]} + sx={[theme => ({ marginTop: theme.space.$1 }), props.sx]} > {props.children} diff --git a/packages/clerk-js/src/ui/elements/Tabs.tsx b/packages/clerk-js/src/ui/elements/Tabs.tsx index 4b38e24482..6b527143e2 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 6a6af099cf..43e235ae9a 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: {