From 0eed1cfec1b0caac35930529dfd9ac92bf38606f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 20 Sep 2024 11:38:51 -0500
Subject: [PATCH] [Neue] Buttons (#5406)

* Re-align button sizing

(cherry picked from commit bcec243bb59dfe468313d98ba61f464d9750feec)

* Use large, small, tiny

(cherry picked from commit 1dc333c2993ab7f2e0ac750c0670dcec9a7069d0)

* Tweaks
---
 src/components/Button.tsx                     | 148 +++++++++++++-----
 src/components/Prompt.tsx                     |   4 +-
 .../Wizard/WizardEditListDialog.tsx           |   2 +-
 .../StarterPack/Wizard/WizardListCard.tsx     |   2 +-
 src/components/dialogs/BirthDateSettings.tsx  |   2 +-
 src/components/dialogs/Embed.tsx              |   2 +-
 src/components/dialogs/EmbedConsent.tsx       |   6 +-
 src/components/dialogs/GifSelect.ios.tsx      |   2 +-
 src/components/dialogs/GifSelect.tsx          |   2 +-
 src/components/dialogs/MutedWords.tsx         |   2 +-
 .../dialogs/PostInteractionSettingsDialog.tsx |   2 +-
 src/components/dms/MessagesNUX.tsx            |   2 +-
 src/components/forms/DateField/index.tsx      |   2 +-
 .../intents/VerifyEmailIntentDialog.tsx       |   4 +-
 .../moderation/LabelsOnMeDialog.tsx           |   4 +-
 src/screens/Deactivated.tsx                   |   6 +-
 .../E2E/SharedPreferencesTesterScreen.tsx     |  12 +-
 src/screens/Home/NoFeedsPinned.tsx            |   4 +-
 src/screens/List/ListHiddenScreen.tsx         |   8 +-
 src/screens/Login/ChooseAccountForm.tsx       |   2 +-
 src/screens/Login/ForgotPasswordForm.tsx      |   6 +-
 src/screens/Login/LoginForm.tsx               |   6 +-
 src/screens/Login/PasswordUpdatedForm.tsx     |   2 +-
 src/screens/Login/SetNewPasswordForm.tsx      |   4 +-
 .../Messages/Conversation/ChatDisabled.tsx    |   4 +-
 src/screens/Messages/List/index.tsx           |   2 +-
 .../components/DeactivateAccountDialog.tsx    |   2 +-
 src/screens/Signup/BackNextButtons.tsx        |   6 +-
 .../StarterPack/StarterPackLandingScreen.tsx  |   2 +-
 src/screens/StarterPack/StarterPackScreen.tsx |   4 +-
 src/screens/StarterPack/Wizard/index.tsx      |   2 +-
 src/view/com/composer/GifAltText.tsx          |   2 +-
 .../com/composer/threadgate/ThreadgateBtn.tsx |   2 +-
 .../com/composer/videos/SubtitleDialog.tsx    |   4 +-
 .../composer/videos/SubtitleFilePicker.tsx    |   2 +-
 src/view/com/notifications/FeedItem.tsx       |   2 +-
 src/view/com/util/post-ctrls/RepostButton.tsx |   2 +-
 .../web-controls/ControlButton.tsx            |   2 +-
 src/view/screens/Storybook/Buttons.tsx        | 131 ++++++++++------
 src/view/screens/Storybook/index.tsx          |   2 +
 40 files changed, 258 insertions(+), 149 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 704aa9d987..8728b88c2c 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {android, atoms as a, flatten, select, tokens, useTheme} from '#/alf'
+import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
 
@@ -30,7 +30,7 @@ export type ButtonColor =
   | 'gradient_sunset'
   | 'gradient_nordic'
   | 'gradient_bonfire'
-export type ButtonSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large'
+export type ButtonSize = 'tiny' | 'small' | 'large'
 export type ButtonShape = 'round' | 'square' | 'default'
 export type VariantProps = {
   /**
@@ -343,39 +343,46 @@ export const Button = React.forwardRef<View, ButtonProps>(
 
       if (shape === 'default') {
         if (size === 'large') {
-          baseStyles.push(
-            {paddingVertical: 15},
-            a.px_2xl,
-            a.rounded_sm,
-            a.gap_md,
-          )
-        } else if (size === 'medium') {
-          baseStyles.push(
-            {paddingVertical: 12},
-            a.px_2xl,
-            a.rounded_sm,
-            a.gap_md,
-          )
+          baseStyles.push({
+            paddingVertical: 13,
+            paddingHorizontal: 20,
+            borderRadius: 8,
+            gap: 8,
+          })
         } else if (size === 'small') {
-          baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
-        } else if (size === 'xsmall') {
-          baseStyles.push({paddingVertical: 6}, a.px_sm, a.rounded_sm, a.gap_sm)
+          baseStyles.push({
+            paddingVertical: 8,
+            paddingHorizontal: 12,
+            borderRadius: 6,
+            gap: 6,
+          })
         } else if (size === 'tiny') {
-          baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs)
+          baseStyles.push({
+            paddingVertical: 4,
+            paddingHorizontal: 8,
+            borderRadius: 4,
+            gap: 4,
+          })
         }
       } else if (shape === 'round' || shape === 'square') {
         if (size === 'large') {
           if (shape === 'round') {
-            baseStyles.push({height: 54, width: 54})
+            baseStyles.push({height: 46, width: 46})
           } else {
-            baseStyles.push({height: 50, width: 50})
+            baseStyles.push({height: 44, width: 44})
           }
         } else if (size === 'small') {
-          baseStyles.push({height: 34, width: 34})
-        } else if (size === 'xsmall') {
-          baseStyles.push({height: 28, width: 28})
+          if (shape === 'round') {
+            baseStyles.push({height: 36, width: 36})
+          } else {
+            baseStyles.push({height: 34, width: 34})
+          }
         } else if (size === 'tiny') {
-          baseStyles.push({height: 20, width: 20})
+          if (shape === 'round') {
+            baseStyles.push({height: 22, width: 22})
+          } else {
+            baseStyles.push({height: 21, width: 21})
+          }
         }
 
         if (shape === 'round') {
@@ -619,11 +626,11 @@ export function useSharedButtonTextStyles() {
     }
 
     if (size === 'large') {
-      baseStyles.push(a.text_md, android({paddingBottom: 1}))
+      baseStyles.push(a.text_md, a.leading_tight, web({paddingTop: 1}))
+    } else if (size === 'small') {
+      baseStyles.push(a.text_sm, a.leading_tight, web({paddingTop: 1}))
     } else if (size === 'tiny') {
-      baseStyles.push(a.text_xs, android({paddingBottom: 1}))
-    } else {
-      baseStyles.push(a.text_sm, android({paddingBottom: 1}))
+      baseStyles.push(a.text_xs, a.leading_tight)
     }
 
     return StyleSheet.flatten(baseStyles)
@@ -643,31 +650,98 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) {
 export function ButtonIcon({
   icon: Comp,
   position,
-  size: iconSize,
+  size,
 }: {
   icon: React.ComponentType<SVGIconProps>
   position?: 'left' | 'right'
   size?: SVGIconProps['size']
 }) {
-  const {size, disabled} = useButtonContext()
+  const {size: buttonSize, disabled} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
+  const {iconSize, iconContainerSize} = React.useMemo(() => {
+    /**
+     * Pre-set icon sizes for different button sizes
+     */
+    const iconSizeShorthand =
+      size ??
+      (({
+        large: 'sm',
+        small: 'xs',
+        tiny: 'xs',
+      }[buttonSize || 'small'] || 'sm') as Exclude<
+        SVGIconProps['size'],
+        undefined
+      >)
+
+    /*
+     * Copied here from icons/common.tsx so we can tweak if we need to, but
+     * also so that we can calculate transforms.
+     */
+    const iconSize = {
+      xs: 12,
+      sm: 16,
+      md: 20,
+      lg: 24,
+      xl: 28,
+      '2xl': 32,
+    }[iconSizeShorthand]
+
+    /*
+     * Goal here is to match rendered text size so that different size icons
+     * don't increase button size
+     */
+    const iconContainerSize = {
+      large: 18,
+      small: 16,
+      tiny: 13,
+    }[buttonSize || 'small']
+
+    return {
+      iconSize,
+      iconContainerSize,
+    }
+  }, [buttonSize, size])
 
   return (
     <View
       style={[
         a.z_20,
         {
+          width: iconContainerSize,
+          height: iconContainerSize,
           opacity: disabled ? 0.7 : 1,
           marginLeft: position === 'left' ? -2 : 0,
           marginRight: position === 'right' ? -2 : 0,
         },
       ]}>
-      <Comp
-        size={
-          iconSize ?? (size === 'large' ? 'md' : size === 'tiny' ? 'xs' : 'sm')
-        }
-        style={[{color: textStyles.color, pointerEvents: 'none'}]}
-      />
+      <View
+        style={[
+          a.absolute,
+          {
+            width: iconSize,
+            height: iconSize,
+            top: '50%',
+            left: '50%',
+            transform: [
+              {
+                translateX: (iconSize / 2) * -1,
+              },
+              {
+                translateY: (iconSize / 2) * -1,
+              },
+            ],
+          },
+        ]}>
+        <Comp
+          width={iconSize}
+          style={[
+            {
+              color: textStyles.color,
+              pointerEvents: 'none',
+            },
+          ]}
+        />
+      </View>
     </View>
   )
 }
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 7836bbef95..8765cdee31 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -120,7 +120,7 @@ export function Cancel({
     <Button
       variant="solid"
       color="secondary"
-      size={gtMobile ? 'small' : 'medium'}
+      size={gtMobile ? 'small' : 'large'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
       <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
@@ -163,7 +163,7 @@ export function Action({
     <Button
       variant="solid"
       color={color}
-      size={gtMobile ? 'small' : 'medium'}
+      size={gtMobile ? 'small' : 'large'}
       label={cta || _(msg`Confirm`)}
       onPress={handleOnPress}
       testID={testID}>
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index 870cbbb9fd..f7b0aba344 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -125,7 +125,7 @@ export function WizardEditListDialog({
                   label={_(msg`Close`)}
                   variant="ghost"
                   color="primary"
-                  size="xsmall"
+                  size="small"
                   onPress={() => control.close()}>
                   <ButtonText>
                     <Trans>Close</Trans>
diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx
index bd308fc73a..ad02cdc306 100644
--- a/src/components/StarterPack/Wizard/WizardListCard.tsx
+++ b/src/components/StarterPack/Wizard/WizardListCard.tsx
@@ -101,7 +101,7 @@ function WizardListCard({
           label={_(msg`Remove`)}
           variant="solid"
           color="secondary"
-          size="xsmall"
+          size="small"
           style={[a.self_center, {marginLeft: 'auto'}]}
           onPress={onPress}>
           <ButtonText>
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index d831c6002a..08608f9d88 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -117,7 +117,7 @@ function BirthdayInner({
       <View style={isWeb && [a.flex_row, a.justify_end]}>
         <Button
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
-          size="medium"
+          size="large"
           onPress={onSave}
           variant="solid"
           color="primary">
diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index f43c3c6fe6..73ecf6616b 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -120,7 +120,7 @@ function EmbedDialogInner({
           label={_(msg`Copy code`)}
           color="primary"
           variant="solid"
-          size="medium"
+          size="large"
           onPress={() => {
             ref.current?.focus()
             ref.current?.setSelection(0, snippet.length)
diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index f7e6145975..765b8adc7e 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -83,7 +83,7 @@ export function EmbedConsentDialog({
             onPress={onShowAllPress}
             onAccessibilityEscape={control.close}
             color="primary"
-            size="medium"
+            size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable external media</Trans>
@@ -95,7 +95,7 @@ export function EmbedConsentDialog({
             onPress={onShowPress}
             onAccessibilityEscape={control.close}
             color="secondary"
-            size="medium"
+            size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable {externalEmbedLabels[source]} only</Trans>
@@ -106,7 +106,7 @@ export function EmbedConsentDialog({
             onAccessibilityEscape={control.close}
             onPress={onHidePress}
             color="secondary"
-            size="medium"
+            size="large"
             variant="ghost">
             <ButtonText>
               <Trans>No thanks</Trans>
diff --git a/src/components/dialogs/GifSelect.ios.tsx b/src/components/dialogs/GifSelect.ios.tsx
index 091a23e51c..2f867e8657 100644
--- a/src/components/dialogs/GifSelect.ios.tsx
+++ b/src/components/dialogs/GifSelect.ios.tsx
@@ -244,7 +244,7 @@ function ModalError({details, close}: {details?: string; close: () => void}) {
         label={_(msg`Close dialog`)}
         onPress={close}
         color="primary"
-        size="medium"
+        size="large"
         variant="solid">
         <ButtonText>
           <Trans>Close</Trans>
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 4c60c6ebeb..1afc588dad 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -264,7 +264,7 @@ function DialogError({details}: {details?: string}) {
         label={_(msg`Close dialog`)}
         onPress={() => control.close()}
         color="primary"
-        size="medium"
+        size="large"
         variant="solid">
         <ButtonText>
           <Trans>Close</Trans>
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 38273aad54..81a6141038 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -319,7 +319,7 @@ function MutedWordsInner() {
             <Button
               disabled={isPending || !field}
               label={_(msg`Add mute word for configured settings`)}
-              size="medium"
+              size="large"
               color="primary"
               variant="solid"
               style={[]}
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index a326602b72..d1828e4c86 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -439,7 +439,7 @@ export function PostInteractionSettingsForm({
         onPress={onSave}
         onAccessibilityEscape={control.close}
         color="primary"
-        size="medium"
+        size="large"
         variant="solid"
         style={a.mt_xl}>
         <ButtonText>{_(msg`Save`)}</ButtonText>
diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
index 9a3425243b..5c21ee05be 100644
--- a/src/components/dms/MessagesNUX.tsx
+++ b/src/components/dms/MessagesNUX.tsx
@@ -160,7 +160,7 @@ function DialogInner({
         <Button
           label={_(msg`Start chatting`)}
           accessibilityHint={_(msg`Close modal`)}
-          size="medium"
+          size="large"
           color="primary"
           variant="solid"
           onPress={() => control.close()}>
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index c916f4efce..1c78d2abbb 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -76,7 +76,7 @@ export function DateField({
             <Button
               label={_(msg`Done`)}
               onPress={() => control.close()}
-              size="medium"
+              size="large"
               color="primary"
               variant="solid">
               <ButtonText>
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index 4dca8bd904..e8c63af82f 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -112,7 +112,7 @@ function Inner({control}: {control: DialogControlProps}) {
               onPress={() => control.close()}
               variant="solid"
               color={status === 'failure' ? 'secondary' : 'primary'}
-              size="medium"
+              size="large"
               style={{marginLeft: 'auto'}}>
               <ButtonText>
                 <Trans>Close</Trans>
@@ -124,7 +124,7 @@ function Inner({control}: {control: DialogControlProps}) {
                 onPress={onPressResendEmail}
                 variant="solid"
                 color="primary"
-                size="medium"
+                size="large"
                 disabled={sending}>
                 <ButtonText>
                   <Trans>Resend Email</Trans>
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index fe6932290d..c54a04a785 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -279,7 +279,7 @@ function AppealForm({
           testID="backBtn"
           variant="solid"
           color="secondary"
-          size="medium"
+          size="large"
           onPress={onPressBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
@@ -288,7 +288,7 @@ function AppealForm({
           testID="submitBtn"
           variant="solid"
           color="primary"
-          size="medium"
+          size="large"
           onPress={onSubmit}
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx
index 997fe419ed..9b0b5b1660 100644
--- a/src/screens/Deactivated.tsx
+++ b/src/screens/Deactivated.tsx
@@ -142,7 +142,7 @@ export function Deactivated() {
                 <View style={[a.gap_sm]}>
                   <Button
                     label={_(msg`Reactivate your account`)}
-                    size="medium"
+                    size="large"
                     variant="solid"
                     color="primary"
                     onPress={handleActivate}>
@@ -153,7 +153,7 @@ export function Deactivated() {
                   </Button>
                   <Button
                     label={_(msg`Cancel reactivation and log out`)}
-                    size="medium"
+                    size="large"
                     variant="solid"
                     color="secondary"
                     onPress={onPressLogout}>
@@ -212,7 +212,7 @@ export function Deactivated() {
                   </Text>
                   <Button
                     label={_(msg`Log in or sign up`)}
-                    size="medium"
+                    size="large"
                     variant="solid"
                     color="secondary"
                     onPress={() => setShowLoggedOut(true)}>
diff --git a/src/screens/E2E/SharedPreferencesTesterScreen.tsx b/src/screens/E2E/SharedPreferencesTesterScreen.tsx
index 380f1080b0..06bf538ea6 100644
--- a/src/screens/E2E/SharedPreferencesTesterScreen.tsx
+++ b/src/screens/E2E/SharedPreferencesTesterScreen.tsx
@@ -23,7 +23,7 @@ export function SharedPreferencesTesterScreen() {
             style={[a.self_center]}
             variant="solid"
             color="primary"
-            size="xsmall"
+            size="small"
             onPress={async () => {
               SharedPrefs.removeValue('testerString')
               SharedPrefs.setValue('testerString', 'Hello')
@@ -39,7 +39,7 @@ export function SharedPreferencesTesterScreen() {
             style={[a.self_center]}
             variant="solid"
             color="primary"
-            size="xsmall"
+            size="small"
             onPress={async () => {
               SharedPrefs.removeValue('testerString')
               const str = SharedPrefs.getString('testerString')
@@ -53,7 +53,7 @@ export function SharedPreferencesTesterScreen() {
             style={[a.self_center]}
             variant="solid"
             color="primary"
-            size="xsmall"
+            size="small"
             onPress={async () => {
               SharedPrefs.removeValue('testerBool')
               SharedPrefs.setValue('testerBool', true)
@@ -68,7 +68,7 @@ export function SharedPreferencesTesterScreen() {
             style={[a.self_center]}
             variant="solid"
             color="primary"
-            size="xsmall"
+            size="small"
             onPress={async () => {
               SharedPrefs.removeValue('testerNumber')
               SharedPrefs.setValue('testerNumber', 123)
@@ -83,7 +83,7 @@ export function SharedPreferencesTesterScreen() {
             style={[a.self_center]}
             variant="solid"
             color="primary"
-            size="xsmall"
+            size="small"
             onPress={async () => {
               SharedPrefs.removeFromSet('testerSet', 'Hello!')
               SharedPrefs.addToSet('testerSet', 'Hello!')
@@ -98,7 +98,7 @@ export function SharedPreferencesTesterScreen() {
             style={[a.self_center]}
             variant="solid"
             color="primary"
-            size="xsmall"
+            size="small"
             onPress={async () => {
               SharedPrefs.removeFromSet('testerSet', 'Hello!')
               const contains = SharedPrefs.setContains('testerSet', 'Hello!')
diff --git a/src/screens/Home/NoFeedsPinned.tsx b/src/screens/Home/NoFeedsPinned.tsx
index 3a98b87341..74412763f2 100644
--- a/src/screens/Home/NoFeedsPinned.tsx
+++ b/src/screens/Home/NoFeedsPinned.tsx
@@ -91,7 +91,7 @@ export function NoFeedsPinned({
           <Button
             disabled={isPending}
             label={_(msg`Apply default recommended feeds`)}
-            size="medium"
+            size="large"
             variant="solid"
             color="primary"
             onPress={addRecommendedFeeds}>
@@ -102,7 +102,7 @@ export function NoFeedsPinned({
           <Link
             label={_(msg`Browse other feeds`)}
             to="/feeds"
-            size="medium"
+            size="large"
             variant="solid"
             color="secondary">
             <ButtonIcon icon={ListSparkle} position="left" />
diff --git a/src/screens/List/ListHiddenScreen.tsx b/src/screens/List/ListHiddenScreen.tsx
index 473bb08ea4..e4354337a8 100644
--- a/src/screens/List/ListHiddenScreen.tsx
+++ b/src/screens/List/ListHiddenScreen.tsx
@@ -152,7 +152,7 @@ export function ListHiddenScreen({
             <Button
               variant="solid"
               color="secondary"
-              size="medium"
+              size="large"
               label={_(msg`Remove from saved feeds`)}
               onPress={onRemoveList}
               disabled={isProcessing}>
@@ -168,7 +168,7 @@ export function ListHiddenScreen({
             <Button
               variant="solid"
               color="secondary"
-              size="medium"
+              size="large"
               label={_(msg`Show list anyway`)}
               onPress={() => setIsContentVisible(true)}
               disabled={isProcessing}>
@@ -180,7 +180,7 @@ export function ListHiddenScreen({
             <Button
               variant="solid"
               color="secondary"
-              size="medium"
+              size="large"
               label={_(msg`Unsubscribe from list`)}
               onPress={() => {
                 if (isModList) {
@@ -204,7 +204,7 @@ export function ListHiddenScreen({
           color="primary"
           label={_(msg`Return to previous page`)}
           onPress={goBack}
-          size="medium"
+          size="large"
           disabled={isProcessing}>
           <ButtonText>
             <Trans>Go Back</Trans>
diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx
index 8c002b1600..678ba51237 100644
--- a/src/screens/Login/ChooseAccountForm.tsx
+++ b/src/screens/Login/ChooseAccountForm.tsx
@@ -98,7 +98,7 @@ export const ChooseAccountForm = ({
           label={_(msg`Back`)}
           variant="solid"
           color="secondary"
-          size="medium"
+          size="large"
           onPress={onPressBack}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
         </Button>
diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx
index 8588888b87..7acaae5101 100644
--- a/src/screens/Login/ForgotPasswordForm.tsx
+++ b/src/screens/Login/ForgotPasswordForm.tsx
@@ -129,7 +129,7 @@ export const ForgotPasswordForm = ({
           label={_(msg`Back`)}
           variant="solid"
           color="secondary"
-          size="medium"
+          size="large"
           onPress={onPressBack}>
           <ButtonText>
             <Trans>Back</Trans>
@@ -143,7 +143,7 @@ export const ForgotPasswordForm = ({
             label={_(msg`Next`)}
             variant="solid"
             color={'primary'}
-            size="medium"
+            size="large"
             onPress={onPressNext}>
             <ButtonText>
               <Trans>Next</Trans>
@@ -170,7 +170,7 @@ export const ForgotPasswordForm = ({
           onPress={onEmailSent}
           label={_(msg`Go to next`)}
           accessibilityHint={_(msg`Navigates to the next screen`)}
-          size="medium"
+          size="large"
           variant="ghost"
           color="secondary">
           <ButtonText>
diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx
index 9a01c04990..c2038b2879 100644
--- a/src/screens/Login/LoginForm.tsx
+++ b/src/screens/Login/LoginForm.tsx
@@ -285,7 +285,7 @@ export const LoginForm = ({
           label={_(msg`Back`)}
           variant="solid"
           color="secondary"
-          size="medium"
+          size="large"
           onPress={onPressBack}>
           <ButtonText>
             <Trans>Back</Trans>
@@ -299,7 +299,7 @@ export const LoginForm = ({
             accessibilityHint={_(msg`Retries login`)}
             variant="solid"
             color="secondary"
-            size="medium"
+            size="large"
             onPress={onPressRetryConnect}>
             <ButtonText>
               <Trans>Retry</Trans>
@@ -319,7 +319,7 @@ export const LoginForm = ({
             accessibilityHint={_(msg`Navigates to the next screen`)}
             variant="solid"
             color="primary"
-            size="medium"
+            size="large"
             onPress={onPressNext}>
             <ButtonText>
               <Trans>Next</Trans>
diff --git a/src/screens/Login/PasswordUpdatedForm.tsx b/src/screens/Login/PasswordUpdatedForm.tsx
index 5407f3f1e3..03e7d86696 100644
--- a/src/screens/Login/PasswordUpdatedForm.tsx
+++ b/src/screens/Login/PasswordUpdatedForm.tsx
@@ -39,7 +39,7 @@ export const PasswordUpdatedForm = ({
           accessibilityHint={_(msg`Closes password update alert`)}
           variant="solid"
           color="primary"
-          size="medium">
+          size="large">
           <ButtonText>
             <Trans>Okay</Trans>
           </ButtonText>
diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx
index 88f7ec5416..a6658621cc 100644
--- a/src/screens/Login/SetNewPasswordForm.tsx
+++ b/src/screens/Login/SetNewPasswordForm.tsx
@@ -160,7 +160,7 @@ export const SetNewPasswordForm = ({
           label={_(msg`Back`)}
           variant="solid"
           color="secondary"
-          size="medium"
+          size="large"
           onPress={onPressBack}>
           <ButtonText>
             <Trans>Back</Trans>
@@ -174,7 +174,7 @@ export const SetNewPasswordForm = ({
             label={_(msg`Next`)}
             variant="solid"
             color="primary"
-            size="medium"
+            size="large"
             onPress={onPressNext}>
             <ButtonText>
               <Trans>Next</Trans>
diff --git a/src/screens/Messages/Conversation/ChatDisabled.tsx b/src/screens/Messages/Conversation/ChatDisabled.tsx
index 23acc41cde..c768d2504b 100644
--- a/src/screens/Messages/Conversation/ChatDisabled.tsx
+++ b/src/screens/Messages/Conversation/ChatDisabled.tsx
@@ -128,7 +128,7 @@ function DialogInner() {
           testID="backBtn"
           variant="solid"
           color="secondary"
-          size="medium"
+          size="large"
           onPress={onBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
@@ -137,7 +137,7 @@ function DialogInner() {
           testID="submitBtn"
           variant="solid"
           color="primary"
-          size="medium"
+          size="large"
           onPress={onSubmit}
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx
index e782395808..efd717f0b4 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/List/index.tsx
@@ -198,7 +198,7 @@ export function MessagesScreen({navigation, route}: Props) {
 
                     <Button
                       label={_(msg`Reload conversations`)}
-                      size="medium"
+                      size="large"
                       color="secondary"
                       variant="solid"
                       onPress={() => refetch()}>
diff --git a/src/screens/Settings/components/DeactivateAccountDialog.tsx b/src/screens/Settings/components/DeactivateAccountDialog.tsx
index 2be42d13e6..6958b7a478 100644
--- a/src/screens/Settings/components/DeactivateAccountDialog.tsx
+++ b/src/screens/Settings/components/DeactivateAccountDialog.tsx
@@ -102,7 +102,7 @@ function DeactivateAccountDialogInner({
         <Button
           variant="solid"
           color="negative"
-          size={gtMobile ? 'small' : 'medium'}
+          size={gtMobile ? 'small' : 'large'}
           label={_(msg`Yes, deactivate`)}
           onPress={handleDeactivate}>
           <ButtonText>{_(msg`Yes, deactivate`)}</ButtonText>
diff --git a/src/screens/Signup/BackNextButtons.tsx b/src/screens/Signup/BackNextButtons.tsx
index 73bd428c8b..47256bf6f0 100644
--- a/src/screens/Signup/BackNextButtons.tsx
+++ b/src/screens/Signup/BackNextButtons.tsx
@@ -34,7 +34,7 @@ export function BackNextButtons({
         label={_(msg`Go back to previous step`)}
         variant="solid"
         color="secondary"
-        size="medium"
+        size="large"
         onPress={onBackPress}>
         <ButtonText>
           <Trans>Back</Trans>
@@ -46,7 +46,7 @@ export function BackNextButtons({
             label={_(msg`Press to retry`)}
             variant="solid"
             color="primary"
-            size="medium"
+            size="large"
             onPress={onRetryPress}>
             <ButtonText>
               <Trans>Retry</Trans>
@@ -59,7 +59,7 @@ export function BackNextButtons({
             label={_(msg`Continue to next step`)}
             variant="solid"
             color="primary"
-            size="medium"
+            size="large"
             disabled={isLoading || isNextDisabled}
             onPress={onNextPress}>
             <ButtonText>
diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx
index 5f1d5e0628..4d7f9ace9d 100644
--- a/src/screens/StarterPack/StarterPackLandingScreen.tsx
+++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx
@@ -308,7 +308,7 @@ function LandingScreenLoaded({
             label={_(msg`Signup without a starter pack`)}
             variant="solid"
             color="secondary"
-            size="medium"
+            size="large"
             style={[a.py_lg]}
             onPress={onJoinWithoutPress}>
             <ButtonText>
diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx
index 5b267ff272..0aa863f7b2 100644
--- a/src/screens/StarterPack/StarterPackScreen.tsx
+++ b/src/screens/StarterPack/StarterPackScreen.tsx
@@ -449,7 +449,7 @@ function Header({
               }}
               variant="solid"
               color="primary"
-              size="medium">
+              size="large">
               <ButtonText style={[a.text_lg]}>
                 <Trans>Join Bluesky</Trans>
               </ButtonText>
@@ -645,7 +645,7 @@ function OverflowMenu({
           <Button
             variant="solid"
             color="negative"
-            size={gtMobile ? 'small' : 'medium'}
+            size={gtMobile ? 'small' : 'large'}
             label={_(msg`Yes, delete this starter pack`)}
             onPress={onDeleteStarterPack}>
             <ButtonText>
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index 40a4a510b7..29ef44ee09 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/src/screens/StarterPack/Wizard/index.tsx
@@ -358,7 +358,7 @@ function Container({children}: {children: React.ReactNode}) {
             label={_(msg`Next`)}
             variant="solid"
             color="primary"
-            size="medium"
+            size="large"
             style={[a.mx_xl, a.mb_lg, {marginTop: 35}]}
             onPress={() => dispatch({type: 'Next'})}>
             <ButtonText>
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index b7690e1023..a37452604f 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -160,7 +160,7 @@ function AltTextInner({
           </View>
           <Button
             label={_(msg`Save`)}
-            size="medium"
+            size="large"
             color="primary"
             variant="solid"
             onPress={onPressSubmit}>
diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
index 666473afd9..c4ce9a232c 100644
--- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx
+++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
@@ -60,7 +60,7 @@ export function ThreadgateBtn({
         <Button
           variant="solid"
           color="secondary"
-          size="xsmall"
+          size="small"
           testID="openReplyGateButton"
           onPress={onPress}
           label={label}
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index 10c2d75642..c07fdfc562 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -44,7 +44,7 @@ export function SubtitleDialogBtn(props: Props) {
             ? _('Opens captions and alt text dialog')
             : _('Opens alt text dialog')
         }
-        size="xsmall"
+        size="small"
         color="secondary"
         variant="ghost"
         onPress={() => {
@@ -169,7 +169,7 @@ function SubtitleDialogInner({
         <View style={web([a.flex_row, a.justify_end])}>
           <Button
             label={_(msg`Done`)}
-            size={isWeb ? 'small' : 'medium'}
+            size={isWeb ? 'small' : 'large'}
             color="primary"
             variant="solid"
             onPress={() => {
diff --git a/src/view/com/composer/videos/SubtitleFilePicker.tsx b/src/view/com/composer/videos/SubtitleFilePicker.tsx
index 856a0eb4fc..44a6b53b6f 100644
--- a/src/view/com/composer/videos/SubtitleFilePicker.tsx
+++ b/src/view/com/composer/videos/SubtitleFilePicker.tsx
@@ -57,7 +57,7 @@ export function SubtitleFilePicker({
         <Button
           onPress={handleClick}
           label={_('Select subtitle file (.vtt)')}
-          size="medium"
+          size="large"
           color="primary"
           variant="solid"
           disabled={disabled}>
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index b1cf3b4856..b248bb4c54 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -412,7 +412,7 @@ function SayHelloBtn({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) {
       label={_(msg`Say hello!`)}
       variant="ghost"
       color="primary"
-      size="xsmall"
+      size="small"
       style={[a.self_center, {marginLeft: 'auto'}]}
       disabled={isLoading}
       onPress={async () => {
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 8c4928dfcd..0ecdf25b93 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -157,7 +157,7 @@ let RepostButton = ({
               label={_(msg`Cancel quote post`)}
               onAccessibilityEscape={close}
               onPress={close}
-              size="medium"
+              size="large"
               variant="solid"
               color="primary">
               <ButtonText>{_(msg`Cancel`)}</ButtonText>
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
index 36b32a0725..6b509d09a3 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx
@@ -26,7 +26,7 @@ export function ControlButton({
       onPress={onPress}
       variant="ghost"
       shape="round"
-      size="medium"
+      size="large"
       style={a.p_2xs}
       hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}>
       {active ? (
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index 2935103dfb..66040c2e3d 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -9,7 +9,6 @@ import {
   ButtonText,
   ButtonVariant,
 } from '#/components/Button'
-import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/Arrow'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {H1} from '#/components/Typography'
@@ -70,81 +69,115 @@ export function Buttons() {
               ),
             )}
           </View>
-          {/*
-          <View style={[a.gap_md, a.align_start]}>
-            {['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map(
-              name => (
-                <React.Fragment key={name}>
-                  <Button
-                    variant="gradient"
-                    color={name as ButtonColor}
-                    size="large"
-                    label="Click here">
-                    <ButtonText>Button</ButtonText>
-                  </Button>
-                  <Button
-                    disabled
-                    variant="gradient"
-                    color={name as ButtonColor}
-                    size="large"
-                    label="Click here">
-                    <ButtonText>Button</ButtonText>
-                  </Button>
-                </React.Fragment>
-              ),
-            )}
-          </View>
-            */}
         </View>
       </View>
 
       <View style={[a.flex_wrap, a.gap_md, a.align_start]}>
+        <Button variant="solid" color="primary" size="large" label="Link out">
+          <ButtonText>Button</ButtonText>
+        </Button>
+        <Button variant="solid" color="primary" size="large" label="Link out">
+          <ButtonText>Button</ButtonText>
+          <ButtonIcon icon={Globe} position="right" />
+        </Button>
+
+        <Button variant="solid" color="primary" size="small" label="Link out">
+          <ButtonText>Button</ButtonText>
+        </Button>
+        <Button variant="solid" color="primary" size="small" label="Link out">
+          <ButtonText>Button</ButtonText>
+          <ButtonIcon icon={Globe} position="right" />
+        </Button>
+
+        <Button variant="solid" color="primary" size="tiny" label="Link out">
+          <ButtonIcon icon={Globe} position="left" />
+          <ButtonText>Button</ButtonText>
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
+        <Button variant="solid" color="primary" size="large" label="Link out">
+          <ButtonText>Button</ButtonText>
+        </Button>
+        <Button variant="solid" color="primary" size="large" label="Link out">
+          <ButtonText>Button</ButtonText>
+          <ButtonIcon icon={Globe} position="right" />
+        </Button>
+        <Button variant="solid" color="primary" size="large" label="Link out">
+          <ButtonText>Button</ButtonText>
+          <ButtonIcon icon={Globe} position="right" size="lg" />
+        </Button>
         <Button
-          variant="gradient"
-          color="gradient_sky"
+          variant="solid"
+          color="primary"
+          size="large"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="solid"
+          color="primary"
           size="large"
+          shape="round"
           label="Link out">
-          <ButtonText>Link out</ButtonText>
-          <ButtonIcon icon={ArrowTopRight} position="right" />
+          <ButtonIcon icon={ChevronLeft} size="lg" />
         </Button>
+      </View>
 
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
+        <Button variant="solid" color="primary" size="small" label="Link out">
+          <ButtonText>Button</ButtonText>
+        </Button>
+        <Button variant="solid" color="primary" size="small" label="Link out">
+          <ButtonText>Button</ButtonText>
+          <ButtonIcon icon={Globe} position="right" />
+        </Button>
         <Button
-          variant="gradient"
-          color="gradient_sky"
+          variant="solid"
+          color="primary"
           size="small"
+          shape="round"
           label="Link out">
-          <ButtonText>Link out</ButtonText>
-          <ButtonIcon icon={ArrowTopRight} position="right" />
+          <ButtonIcon icon={ChevronLeft} />
         </Button>
-
         <Button
-          variant="gradient"
-          color="gradient_sky"
+          variant="solid"
+          color="primary"
           size="small"
+          shape="round"
           label="Link out">
-          <ButtonText>Link xxxxxx</ButtonText>
+          <ButtonIcon icon={ChevronLeft} size="lg" />
         </Button>
+      </View>
 
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
+        <Button variant="solid" color="primary" size="tiny" label="Link out">
+          <ButtonText>Button</ButtonText>
+        </Button>
+        <Button variant="solid" color="primary" size="tiny" label="Link out">
+          <ButtonText>Button</ButtonText>
+          <ButtonIcon icon={Globe} position="right" />
+        </Button>
         <Button
-          variant="gradient"
-          color="gradient_sky"
-          size="small"
+          variant="solid"
+          color="primary"
+          size="tiny"
+          shape="round"
           label="Link out">
-          <ButtonIcon icon={Globe} position="left" />
-          <ButtonText>Link out</ButtonText>
+          <ButtonIcon icon={ChevronLeft} />
         </Button>
-
         <Button
-          variant="gradient"
-          color="gradient_sky"
+          variant="solid"
+          color="primary"
           size="tiny"
+          shape="round"
           label="Link out">
-          <ButtonIcon icon={Globe} position="left" />
-          <ButtonText>Link out</ButtonText>
+          <ButtonIcon icon={ChevronLeft} size="md" />
         </Button>
       </View>
 
-      <View style={[a.flex_row, a.gap_md, a.align_start]}>
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
         <Button
           variant="solid"
           color="primary"
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index 71dbe8839d..c6beecefeb 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -80,6 +80,8 @@ function StorybookInner() {
               </Button>
             </View>
 
+            <Buttons />
+
             <Dialogs />
             <ThemeProvider theme="light">
               <Theming />