diff --git a/.changeset/popular-boxes-attend.md b/.changeset/popular-boxes-attend.md
new file mode 100644
index 0000000000..637f96f4aa
--- /dev/null
+++ b/.changeset/popular-boxes-attend.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improve color contrast in Badges
diff --git a/.changeset/real-horses-jam.md b/.changeset/real-horses-jam.md
new file mode 100644
index 0000000000..16ccf48e46
--- /dev/null
+++ b/.changeset/real-horses-jam.md
@@ -0,0 +1,5 @@
+---
+'@clerk/localizations': patch
+---
+
+Update "unverified" email and phone labels
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
index d2c0957d69..98c1fbcaac 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -98,7 +98,14 @@ const MemberRow = (props: {
sx={{ maxWidth: '30ch' }}
user={membership.publicUserData}
subtitle={membership.publicUserData.identifier}
- badge={isCurrentUser && }
+ badge={
+ isCurrentUser && (
+
+ )
+ }
/>
{membership.createdAt.toLocaleDateString()} |
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx
index f5cf98ae80..ac8ff9b5e6 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/EnrollmentBadge.tsx
@@ -19,8 +19,8 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
return (
);
}
@@ -29,7 +29,7 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
);
};
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 9e2a514fbe..da44223842 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -107,6 +107,7 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
{(error || reauthorizationRequired) && (
)}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
index cc78e48eb9..ae7593b2a2 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
@@ -48,7 +48,20 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
return (
: undefined}
+ badge={
+ isPrimary ? (
+
+ ) : !isVerified ? (
+
+ ) : undefined
+ }
>
{isPrimary && isVerified && (
@@ -59,12 +72,6 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
)}
{isPrimary && !isVerified && (
- }
title={localizationKeys('userProfile.start.emailAddressesSection.detailsTitle__primary')}
subtitle={localizationKeys('userProfile.start.emailAddressesSection.detailsSubtitle__primary')}
actionLabel={localizationKeys('userProfile.start.emailAddressesSection.detailsAction__primary')}
@@ -81,12 +88,6 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
)}
{!isPrimary && !isVerified && (
- }
title={localizationKeys('userProfile.start.emailAddressesSection.detailsTitle__unverified')}
subtitle={localizationKeys('userProfile.start.emailAddressesSection.detailsSubtitle__unverified')}
actionLabel={localizationKeys('userProfile.start.emailAddressesSection.detailsAction__unverified')}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index a8bd7629aa..f4acb13fac 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -59,7 +59,20 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
}
title={formattedPhone}
- badge={isPrimary ? : undefined}
+ badge={
+ isPrimary ? (
+
+ ) : !isVerified ? (
+
+ ) : undefined
+ }
>
{isPrimary && isVerified && (
@@ -70,12 +83,6 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
)}
{isPrimary && !isVerified && (
- }
title={localizationKeys('userProfile.start.phoneNumbersSection.detailsTitle__primary')}
subtitle={localizationKeys('userProfile.start.phoneNumbersSection.detailsSubtitle__primary')}
actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.detailsAction__primary')}
@@ -92,12 +99,6 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
)}
{!isPrimary && !isVerified && (
- }
title={localizationKeys('userProfile.start.phoneNumbersSection.detailsTitle__unverified')}
subtitle={localizationKeys('userProfile.start.phoneNumbersSection.detailsSubtitle__unverified')}
actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.detailsAction__unverified')}
diff --git a/packages/clerk-js/src/ui/primitives/Badge.tsx b/packages/clerk-js/src/ui/primitives/Badge.tsx
index 8e5cd87781..0d492aea27 100644
--- a/packages/clerk-js/src/ui/primitives/Badge.tsx
+++ b/packages/clerk-js/src/ui/primitives/Badge.tsx
@@ -22,7 +22,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
},
danger: {
[vars.accent]: theme.colors.$danger500,
- [vars.bg]: colors.setAlpha(theme.colors.$danger50, 0.2),
+ [vars.bg]: theme.colors.$danger100,
},
neutral: {
[vars.accent]: theme.colors.$blackAlpha600,
@@ -33,8 +33,8 @@ const { applyVariants, filterProps } = createVariants(theme => ({
[vars.bg]: colors.setAlpha(theme.colors.$success50, 0.2),
},
warning: {
- [vars.accent]: theme.colors.$warning500,
- [vars.bg]: colors.setAlpha(theme.colors.$warning50, 0.2),
+ [vars.accent]: theme.colors.$warning600,
+ [vars.bg]: theme.colors.$warning100,
},
},
},
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index 1210768030..8471c70641 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -32,6 +32,14 @@ const textVariants = (t: InternalTheme) => {
lineHeight: t.lineHeights.$none,
} as const;
+ const extraSmallMedium = {
+ ...base,
+ fontWeight: t.fontWeights.$medium,
+ fontSize: t.fontSizes.$2xs,
+ letterSpacing: t.letterSpacings.$normal,
+ lineHeight: t.lineHeights.$shortest,
+ } as const;
+
const regularRegular = {
...base,
fontWeight: t.fontWeights.$normal,
@@ -102,6 +110,7 @@ const textVariants = (t: InternalTheme) => {
buttonRegularRegular,
buttonRegularMedium,
extraSmallRegular,
+ extraSmallMedium,
smallRegular,
smallMedium,
smallBold,
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 401d7caa5a..00767e1ed1 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -270,9 +270,9 @@ export const enUS: LocalizationResource = {
detailsSubtitle__nonPrimary:
'Set this email address as the primary to receive communications regarding your account.',
detailsAction__nonPrimary: 'Set as primary',
- detailsTitle__unverified: 'Unverified email address',
- detailsSubtitle__unverified: 'This email address has not been verified and may be limited in functionality',
- detailsAction__unverified: 'Complete verification',
+ detailsTitle__unverified: 'Verify email address',
+ detailsSubtitle__unverified: 'Complete verification to access all features with this email address',
+ detailsAction__unverified: 'Verify email address',
destructiveActionTitle: 'Remove',
destructiveActionSubtitle: 'Delete this email address and remove it from your account',
destructiveAction: 'Remove email address',
@@ -287,9 +287,9 @@ export const enUS: LocalizationResource = {
detailsSubtitle__nonPrimary:
'Set this phone number as the primary to receive communications regarding your account.',
detailsAction__nonPrimary: 'Set as primary',
- detailsTitle__unverified: 'Unverified phone number',
- detailsSubtitle__unverified: 'This phone number has not been verified and may be limited in functionality',
- detailsAction__unverified: 'Complete verification',
+ detailsTitle__unverified: 'Verify phone number',
+ detailsSubtitle__unverified: 'Complete verification to access all features with this phone number',
+ detailsAction__unverified: 'Verify phone number',
destructiveActionTitle: 'Remove',
destructiveActionSubtitle: 'Delete this phone number and remove it from your account',
destructiveAction: 'Remove phone number',