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',