chore(clerk-js): Fix misalignment of icons in account switcher (#3108)

* chore(clerk-js): Fix misalignment of icons in account switcher * chore(repo): Add Changeset
clerk · Apr 4, 2024 · 976c6a0 · 976c6a0
1 parent b51d814
commit 976c6a0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/modern-hounds-push.md b/.changeset/modern-hounds-push.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes an icon misalignment in account switcher.
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -110,6 +110,9 @@ const _SignInAccountSwitcher = () => {
               iconElementDescriptor={descriptors.accountSwitcherActionButtonIcon}
               iconElementId={descriptors.accountSwitcherActionButtonIcon.setId('signOutAll')}
               label={localizationKeys('signIn.accountSwitcher.action__signOutAll')}
+              sx={t => ({
+                padding: `${t.space.$2} ${t.space.$1x5}`,
+              })}
             />
           </Card.Action>
         </Card.Footer>

diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
@@ -1,5 +1,7 @@
 import type { ActiveSessionResource } from '@clerk/types';
 
+import type { ThemableCssProp } from '~ui/styledSystem/types';
+
 import type { ElementDescriptor, ElementId } from '../../../ui/customizables/elementDescriptors';
 import type { LocalizationKey } from '../../customizables';
 import { descriptors, Flex, localizationKeys } from '../../customizables';
@@ -172,6 +174,7 @@ type SignOutAllActionsProps = {
   iconElementDescriptor?: ElementDescriptor;
   iconElementId?: ElementId;
   label?: LocalizationKey;
+  sx?: ThemableCssProp;
 };
 
 export const SignOutAllActions = (props: SignOutAllActionsProps) => {
@@ -184,13 +187,17 @@ export const SignOutAllActions = (props: SignOutAllActionsProps) => {
     iconElementDescriptor,
     iconElementId,
     label,
+    sx,
   } = props;
   return (
     <Actions
       role='menu'
-      sx={t => ({
-        padding: t.space.$2,
-      })}
+      sx={[
+        t => ({
+          padding: t.space.$2,
+        }),
+        sx,
+      ]}
     >
       <Action
         elementDescriptor={elementDescriptor || descriptors.userButtonPopoverActionButton}