fix(clerk-js): Improve contrast in Badge colors + unverified state in…

… UserProfile (#1716) * fix(clerk-js): Improve contrast in Badge colors * fix(clerk-js): Update usage of Badge in UserProfile and OrganizationProfile * chore(clerk-js): Add changeset
clerk · Sep 13, 2023 · b0f396b · b0f396b
1 parent 8b9a7a3
commit b0f396b
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 39 deletions.
diff --git a/.changeset/popular-boxes-attend.md 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
@@ -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
@@ -98,7 +98,14 @@ const MemberRow = (props: {
           sx={{ maxWidth: '30ch' }}
           user={membership.publicUserData}
           subtitle={membership.publicUserData.identifier}
-          badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
+          badge={
+            isCurrentUser && (
+              <Badge
+                textVariant={'extraSmallMedium'}
+                localizationKey={localizationKeys('badge__you')}
+              />
+            )
+          }
         />
       </Td>
       <Td>{membership.createdAt.toLocaleDateString()}</Td>

diff --git 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 (
       <Badge
         localizationKey={localizationKeys('organizationProfile.badge__unverified')}
-        textVariant={'extraSmallRegular'}
-        colorScheme={'warning'}
+        textVariant={'extraSmallMedium'}
+        colorScheme={'danger'}
       />
     );
   }
@@ -29,7 +29,7 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
     <Badge
       localizationKey={badgeLabelsMap[organizationDomain.enrollmentMode]}
       colorScheme={organizationDomain.enrollmentMode === 'manual_invitation' ? 'neutral' : 'primary'}
-      textVariant={'extraSmallRegular'}
+      textVariant={'extraSmallMedium'}
     />
   );
 };
diff --git 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) && (
             <Badge
               colorScheme='danger'
+              textVariant={'extraSmallMedium'}
               localizationKey={localizationKeys('badge__requiresAction')}
             />
           )}

diff --git 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 (
     <UserProfileAccordion
       title={email.emailAddress}
-      badge={isPrimary ? <Badge localizationKey={localizationKeys('badge__primary')} /> : undefined}
+      badge={
+        isPrimary ? (
+          <Badge
+            localizationKey={localizationKeys('badge__primary')}
+            textVariant={'extraSmallMedium'}
+          />
+        ) : !isVerified ? (
+          <Badge
+            localizationKey={localizationKeys('badge__unverified')}
+            colorScheme='danger'
+            textVariant={'extraSmallMedium'}
+          />
+        ) : undefined
+      }
     >
       <Col gap={4}>
         {isPrimary && isVerified && (
@@ -59,12 +72,6 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
         )}
         {isPrimary && !isVerified && (
           <LinkButtonWithDescription
-            titleLabel={
-              <Badge
-                localizationKey={localizationKeys('badge__unverified')}
-                colorScheme='warning'
-              />
-            }
             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 && (
           <LinkButtonWithDescription
-            titleLabel={
-              <Badge
-                localizationKey={localizationKeys('badge__unverified')}
-                colorScheme='warning'
-              />
-            }
             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
@@ -59,7 +59,20 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
         </Text>
       }
       title={formattedPhone}
-      badge={isPrimary ? <Badge localizationKey={localizationKeys('badge__primary')} /> : undefined}
+      badge={
+        isPrimary ? (
+          <Badge
+            localizationKey={localizationKeys('badge__primary')}
+            textVariant={'extraSmallMedium'}
+          />
+        ) : !isVerified ? (
+          <Badge
+            localizationKey={localizationKeys('badge__unverified')}
+            colorScheme='danger'
+            textVariant={'extraSmallMedium'}
+          />
+        ) : undefined
+      }
     >
       <Col gap={4}>
         {isPrimary && isVerified && (
@@ -70,12 +83,6 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
         )}
         {isPrimary && !isVerified && (
           <LinkButtonWithDescription
-            titleLabel={
-              <Badge
-                localizationKey={localizationKeys('badge__unverified')}
-                colorScheme='warning'
-              />
-            }
             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 && (
           <LinkButtonWithDescription
-            titleLabel={
-              <Badge
-                localizationKey={localizationKeys('badge__unverified')}
-                colorScheme='warning'
-              />
-            }
             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
@@ -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
@@ -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
@@ -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',