[Neue] Buttons (#5406)

* Re-align button sizing

(cherry picked from commit bcec243bb59dfe468313d98ba61f464d9750feec)

* Use large, small, tiny

(cherry picked from commit 1dc333c2993ab7f2e0ac750c0670dcec9a7069d0)

* Tweaks

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}>

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}

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={() => {

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}>

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 () => {

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>

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 ? (

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="gradient"
-          color="gradient_sky"
-          size="large"
-          label="Link out">
-          <ButtonText>Link out</ButtonText>
-          <ButtonIcon icon={ArrowTopRight} position="right" />
+        <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="gradient"
-          color="gradient_sky"
-          size="small"
-          label="Link out">
-          <ButtonText>Link out</ButtonText>
-          <ButtonIcon icon={ArrowTopRight} position="right" />
+        <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"
-          size="small"
-          label="Link out">
-          <ButtonText>Link xxxxxx</ButtonText>
-        </Button>
-
-        <Button
-          variant="gradient"
-          color="gradient_sky"
-          size="small"
-          label="Link out">
+        <Button variant="solid" color="primary" size="tiny" label="Link out">
           <ButtonIcon icon={Globe} position="left" />
-          <ButtonText>Link out</ButtonText>
-        </Button>
-
-        <Button
-          variant="gradient"
-          color="gradient_sky"
-          size="tiny"
-          label="Link out">
-          <ButtonIcon icon={Globe} position="left" />
-          <ButtonText>Link out</ButtonText>
+          <ButtonText>Button</ButtonText>
         </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" 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="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">
+          <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="solid"
+          color="primary"
+          size="small"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="solid"
+          color="primary"
+          size="small"
+          shape="round"
+          label="Link out">
+          <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="solid"
+          color="primary"
+          size="tiny"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="solid"
+          color="primary"
+          size="tiny"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} size="md" />
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
         <Button
           variant="solid"
           color="primary"

src/view/screens/Storybook/index.tsx

@@ -80,6 +80,8 @@ function StorybookInner() {
               </Button>
             </View>
 
+            <Buttons />
+
             <Dialogs />
             <ThemeProvider theme="light">
               <Theming />