From 976c6a07e480b47f4abe326ab282bd87833ad6c3 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 4 Apr 2024 12:54:45 +0300
Subject: [PATCH] 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
---
 .changeset/modern-hounds-push.md                    |  5 +++++
 .../ui/components/SignIn/SignInAccountSwitcher.tsx  |  3 +++
 .../src/ui/components/UserButton/SessionActions.tsx | 13 ++++++++++---
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/modern-hounds-push.md

diff --git a/.changeset/modern-hounds-push.md b/.changeset/modern-hounds-push.md
new file mode 100644
index 0000000000..e53c2f6ae1
--- /dev/null
+++ 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
index 2a2671a4e7..16247489a6 100644
--- 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
index eb42bbf41b..72b1c9308d 100644
--- 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}