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: {