fix(clerk-js): Use the new rethemed badge (#2370)

* fix(clerk-js): Use the new rethemed badge * fix(clerk-js): Remove the checkmark from the active user avatar
clerk · Dec 15, 2023 · cee08c7 · cee08c7
1 parent a86a5fc
commit cee08c7
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 33 deletions.
diff --git a/.changeset/gentle-berries-teach.md b/.changeset/gentle-berries-teach.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx b/packages/clerk-js/src/ui/common/NotificationCountBadge.tsx
@@ -1,4 +1,4 @@
-import { Box, NotificationBadge } from '../customizables';
+import { Flex, NotificationBadge } from '../customizables';
 import { useDelayedVisibility, usePrefersReducedMotion } from '../hooks';
 import type { ThemableCssProp } from '../styledSystem';
 import { animations } from '../styledSystem';
@@ -21,19 +21,17 @@ export const NotificationCountBadge = ({ notificationCount, containerSx }: Notif
   });
 
   return (
-    <Box
+    <Flex
+      justify='center'
+      align='center'
       sx={[
         t => ({
-          position: 'absolute',
-          top: `-${t.space.$2}`,
-          right: `-${t.space.$1}`,
-          width: t.sizes.$2,
-          height: t.sizes.$2,
+          marginLeft: t.space.$1x5,
         }),
         containerSx,
       ]}
     >
       {showNotification && <NotificationBadge sx={enterExitAnimation}>{notificationCount}</NotificationBadge>}
-    </Box>
+    </Flex>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -127,7 +127,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         icon={CogFilled}
         label={localizationKeys('organizationSwitcher.action__manageOrganization')}
         onClick={handleManageOrganizationClicked}
-        trailing={<NotificationCountBadgeManageButton sx={{ right: 0 }} />}
+        trailing={<NotificationCountBadgeManageButton />}
       />
     );
 
@@ -205,6 +205,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
                     sx={t => ({
                       padding: `${t.space.$4} ${t.space.$5}`,
                       borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
+                      width: '100%',
                     })}
                     title={localizationKeys('organizationSwitcher.personalWorkspace')}
                   />
@@ -232,9 +233,13 @@ const NotificationCountBadgeManageButton = withGate(
       membershipRequests: isDomainsEnabled || undefined,
     });
 
+    if (!membershipRequests?.count) {
+      return null;
+    }
+
     return (
       <NotificationCountBadge
-        notificationCount={membershipRequests?.count || 0}
+        notificationCount={membershipRequests.count}
         containerSx={sx}
       />
     );

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -91,10 +91,16 @@ const NotificationCountBadgeSwitcherTrigger = () => {
   const notificationCount =
     (userInvitations.count || 0) + (userSuggestions.count || 0) + (membershipRequests?.count || 0);
 
+  if (!notificationCount) {
+    return null;
+  }
+
   return (
     <NotificationCountBadge
       containerSx={t => ({
-        marginLeft: `${t.space.$2}`,
+        position: 'absolute',
+        top: `-${t.space.$2}`,
+        right: 0,
       })}
       notificationCount={notificationCount}
     />

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -33,6 +33,7 @@ const CreateOrganizationButton = ({
       label={localizationKeys('organizationSwitcher.action__createOrganization')}
       onClick={onCreateOrganizationClick}
       sx={t => ({
+        borderBottom: 'none',
         color: t.colors.$blackAlpha600,
         ':hover': {
           color: t.colors.$blackAlpha600,

diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
@@ -48,6 +48,7 @@ export const SingleSessionActions = (props: SessionActionsProps) => {
           t => ({
             borderBottomLeftRadius: t.radii.$lg,
             borderBottomRightRadius: t.radii.$lg,
+            borderBottom: 'none',
             ':hover': {
               backgroundColor: t.colors.$danger50,
               color: t.colors.$danger400,

diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -3,9 +3,9 @@ import type { ActiveSessionResource } from '@clerk/types';
 import React from 'react';
 
 import { useEnvironment, useUserButtonContext } from '../../contexts';
-import { descriptors, Icon, localizationKeys } from '../../customizables';
+import { descriptors, localizationKeys } from '../../customizables';
 import { Action, Actions, PopoverCard, PreviewButton, RootBox, SecondaryActions, UserPreview } from '../../elements';
-import { Add, CheckmarkFilled, SignOut, SwitchArrowRight } from '../../icons';
+import { Add, SignOut, SwitchArrowRight } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { MultiSessionActions, SingleSessionActions } from './SessionActions';
 import { useMultisessionActions } from './useMultisessionActions';
@@ -69,7 +69,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         onClick={handleSignOutAllClicked}
         variant='ghostDanger'
         sx={t => ({
-          color: t.colors.$blackAlpha700,
+          color: t.colors.$blackAlpha600,
           padding: `${t.space.$2} ${t.space.$3}`,
           borderBottom: 'none',
           borderRadius: t.radii.$lg,
@@ -85,7 +85,6 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
           key={session.id}
           icon={SwitchArrowRight}
           sx={t => ({
-            height: t.sizes.$20,
             borderRadius: 0,
             borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
             backgroundColor: t.colors.$colorBackground,
@@ -116,13 +115,6 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
             sx={t => ({
               padding: `${t.space.$4} ${t.space.$5}`,
             })}
-            icon={
-              <Icon
-                icon={CheckmarkFilled}
-                sx={t => ({ width: t.sizes.$3x5, height: t.sizes.$3x5 })}
-              />
-            }
-            iconSx={t => ({ left: 'unset', right: 0, color: t.colors.$primary500 })}
           />
           {authConfig.singleSessionMode ? (
             <SingleSessionActions

diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -80,7 +80,6 @@ export const ExtraSmallAction = (props: Omit<ActionProps, 'label'>) => {
         elementDescriptor={iconBoxElementDescriptor}
         elementId={iconBoxElementId}
         justify='center'
-        // sx={[theme => ({ flex: `0 0 ${theme.sizes.$9}` }), iconBoxSx]}
       >
         {status.isLoading ? (
           <Spinner
@@ -172,7 +171,7 @@ export const Action = (props: ActionProps) => {
   return (
     <Button
       size='md'
-      variant='ghost'
+      variant='ghostAction'
       textVariant='buttonLarge'
       focusRing={false}
       hoverAsFocus
@@ -184,10 +183,6 @@ export const Action = (props: ActionProps) => {
           gap: t.space.$3,
           padding: `${t.space.$4} ${t.space.$5}`,
           justifyContent: 'flex-start',
-          color: t.colors.$blackAlpha600,
-          ':hover': {
-            color: t.colors.$blackAlpha600,
-          },
         }),
         sx,
       ]}

diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -137,6 +137,14 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
             : undefined,
           '&:active': { backgroundColor: theme.colors.$transparent },
         },
+        ghostAction: {
+          color: theme.colors.$blackAlpha600,
+          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha600 },
+          '&:focus': props.hoverAsFocus
+            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha600 }
+            : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
+        },
         ghostPrimary: {
           color: theme.colors.$primary500,
           '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$primary500 },

diff --git a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
@@ -7,19 +7,19 @@ const vars = createCssVariables('accent', 'bg');
 const { applyVariants, filterProps } = createVariants(theme => ({
   base: {
     color: vars.accent,
-    backgroundColor: vars.bg,
-    borderRadius: theme.radii.$sm,
+    background: vars.bg,
+    borderRadius: theme.radii.$lg,
     height: theme.space.$4,
-    minWidth: theme.space.$4,
-    padding: `${theme.space.$0x5}`,
+    minWidth: theme.space.$5,
+    padding: `${theme.space.$0x5} ${theme.space.$1}`,
     display: 'inline-flex',
   },
   variants: {
     textVariant: { ...common.textVariants(theme) },
     colorScheme: {
       primary: {
         [vars.accent]: theme.colors.$colorTextOnPrimaryBackground,
-        [vars.bg]: theme.colors.$primary500,
+        [vars.bg]: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%), ${theme.colors.$primary500}`,
       },
     },
   },