From 4c770ba795e485e5201d6d5384365ddb6ea7765f Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Tue, 16 Apr 2024 15:34:46 +0300
Subject: [PATCH 1/2] fix(clerk-js): Align action buttons with user preview in
 <UserButton/>

---
 .changeset/violet-buckets-taste.md            | 5 +++++
 packages/clerk-js/src/ui/elements/Actions.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/violet-buckets-taste.md

diff --git a/.changeset/violet-buckets-taste.md b/.changeset/violet-buckets-taste.md
new file mode 100644
index 00000000000..81faf3230f4
--- /dev/null
+++ b/.changeset/violet-buckets-taste.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Align action buttons with user preview in `<UserButton/>`
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index cdda572b774..2c6d22fe69c 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -195,7 +195,7 @@ export const Action = (props: ActionProps) => {
         t => ({
           flex: '1',
           borderRadius: 0,
-          gap: t.space.$3,
+          gap: t.space.$4,
           justifyContent: 'flex-start',
         }),
         sx,

From cec02ef49bd9af8d8700c922d3e0c2e5485aaf7d Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Tue, 16 Apr 2024 16:15:21 +0300
Subject: [PATCH 2/2] fix(clerk-js): Align actions text in account switcher
 screen

---
 .../components/SignIn/SignInAccountSwitcher.tsx |  4 ++--
 .../ui/components/UserButton/SessionActions.tsx | 17 +++++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
index 16247489a6f..78b095b27bc 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -110,8 +110,8 @@ 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}`,
+              actionSx={t => ({
+                padding: `${t.space.$2} ${t.space.$2}`,
               })}
             />
           </Card.Action>
diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
index 4465b4d6589..51dc26ec069 100644
--- a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
@@ -174,6 +174,7 @@ type SignOutAllActionsProps = {
   iconElementId?: ElementId;
   label?: LocalizationKey;
   sx?: ThemableCssProp;
+  actionSx?: ThemableCssProp;
 };
 
 export const SignOutAllActions = (props: SignOutAllActionsProps) => {
@@ -187,6 +188,7 @@ export const SignOutAllActions = (props: SignOutAllActionsProps) => {
     iconElementId,
     label,
     sx,
+    actionSx,
   } = props;
   return (
     <Actions
@@ -210,12 +212,15 @@ export const SignOutAllActions = (props: SignOutAllActionsProps) => {
         onClick={handleSignOutAllClicked}
         variant='ghost'
         colorScheme='neutral'
-        sx={t => ({
-          backgroundColor: t.colors.$transparent,
-          padding: `${t.space.$2} ${t.space.$3}`,
-          borderBottomWidth: 0,
-          borderRadius: t.radii.$lg,
-        })}
+        sx={[
+          t => ({
+            backgroundColor: t.colors.$transparent,
+            padding: `${t.space.$2} ${t.space.$3}`,
+            borderBottomWidth: 0,
+            borderRadius: t.radii.$lg,
+          }),
+          actionSx,
+        ]}
         spinnerSize='md'
       />
     </Actions>