From e1c870df671c8e5985ae2377e5e02bda61b512b8 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 14 Mar 2024 17:10:32 +0200
Subject: [PATCH] fix(clerk-js): Fix button font size for alterative method on
 <SignIn/>

---
 .changeset/great-seals-punch.md                              | 5 +++++
 .../clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx | 1 +
 packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx       | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/great-seals-punch.md

diff --git a/.changeset/great-seals-punch.md b/.changeset/great-seals-punch.md
new file mode 100644
index 0000000000..d690da6a8f
--- /dev/null
+++ b/.changeset/great-seals-punch.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix font size inconsistencies when selecting method to sign in.
diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
index 71f4bccb31..26bb83cc27 100644
--- a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -88,6 +88,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
                       textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
                       arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
                       key={i}
+                      textVariant='buttonLarge'
                       isDisabled={card.isLoading}
                       onClick={() => onFactorSelected(factor)}
                     />
diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
index 05bcfecd09..1bd564fd06 100644
--- a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -22,6 +22,7 @@ type ArrowBlockButtonProps = PropsOfComponent<typeof Button> & {
   spinnerElementDescriptor?: ElementDescriptor;
   spinnerElementId?: ElementId;
   textLocalizationKey?: LocalizationKey | string;
+  textVariant?: PropsOfComponent<typeof Text>['variant'];
 };
 
 export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockButtonProps>((props, ref) => {
@@ -43,6 +44,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
     textLocalizationKey,
     childrenSx,
     badge,
+    textVariant = 'buttonSmall',
     ...rest
   } = props;
 
@@ -116,7 +118,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
           elementId={textElementId}
           as='span'
           truncate
-          variant='buttonSmall'
+          variant={textVariant}
           localizationKey={textLocalizationKey}
         >
           {children}