+111 -37

src/components/Button.tsx

··· 14 14 } from 'react-native' 15 15 import {LinearGradient} from 'expo-linear-gradient' 16 16 17 17 - import {android, atoms as a, flatten, select, tokens, useTheme} from '#/alf' 17 17 + import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf' 18 18 import {Props as SVGIconProps} from '#/components/icons/common' 19 19 import {Text} from '#/components/Typography' 20 20 ··· 30 30 | 'gradient_sunset' 31 31 | 'gradient_nordic' 32 32 | 'gradient_bonfire' 33 33 - export type ButtonSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large' 33 33 + export type ButtonSize = 'tiny' | 'small' | 'large' 34 34 export type ButtonShape = 'round' | 'square' | 'default' 35 35 export type VariantProps = { 36 36 /** ··· 343 343 344 344 if (shape === 'default') { 345 345 if (size === 'large') { 346 346 - baseStyles.push( 347 347 - {paddingVertical: 15}, 348 348 - a.px_2xl, 349 349 - a.rounded_sm, 350 350 - a.gap_md, 351 351 - ) 352 352 - } else if (size === 'medium') { 353 353 - baseStyles.push( 354 354 - {paddingVertical: 12}, 355 355 - a.px_2xl, 356 356 - a.rounded_sm, 357 357 - a.gap_md, 358 358 - ) 346 346 + baseStyles.push({ 347 347 + paddingVertical: 13, 348 348 + paddingHorizontal: 20, 349 349 + borderRadius: 8, 350 350 + gap: 8, 351 351 + }) 359 352 } else if (size === 'small') { 360 360 - baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm) 361 361 - } else if (size === 'xsmall') { 362 362 - baseStyles.push({paddingVertical: 6}, a.px_sm, a.rounded_sm, a.gap_sm) 353 353 + baseStyles.push({ 354 354 + paddingVertical: 8, 355 355 + paddingHorizontal: 12, 356 356 + borderRadius: 6, 357 357 + gap: 6, 358 358 + }) 363 359 } else if (size === 'tiny') { 364 364 - baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs) 360 360 + baseStyles.push({ 361 361 + paddingVertical: 4, 362 362 + paddingHorizontal: 8, 363 363 + borderRadius: 4, 364 364 + gap: 4, 365 365 + }) 365 366 } 366 367 } else if (shape === 'round' || shape === 'square') { 367 368 if (size === 'large') { 368 369 if (shape === 'round') { 369 369 - baseStyles.push({height: 54, width: 54}) 370 370 + baseStyles.push({height: 46, width: 46}) 370 371 } else { 371 371 - baseStyles.push({height: 50, width: 50}) 372 372 + baseStyles.push({height: 44, width: 44}) 372 373 } 373 374 } else if (size === 'small') { 374 374 - baseStyles.push({height: 34, width: 34}) 375 375 - } else if (size === 'xsmall') { 376 376 - baseStyles.push({height: 28, width: 28}) 375 375 + if (shape === 'round') { 376 376 + baseStyles.push({height: 36, width: 36}) 377 377 + } else { 378 378 + baseStyles.push({height: 34, width: 34}) 379 379 + } 377 380 } else if (size === 'tiny') { 378 378 - baseStyles.push({height: 20, width: 20}) 381 381 + if (shape === 'round') { 382 382 + baseStyles.push({height: 22, width: 22}) 383 383 + } else { 384 384 + baseStyles.push({height: 21, width: 21}) 385 385 + } 379 386 } 380 387 381 388 if (shape === 'round') { ··· 619 626 } 620 627 621 628 if (size === 'large') { 622 622 - baseStyles.push(a.text_md, android({paddingBottom: 1})) 629 629 + baseStyles.push(a.text_md, a.leading_tight, web({paddingTop: 1})) 630 630 + } else if (size === 'small') { 631 631 + baseStyles.push(a.text_sm, a.leading_tight, web({paddingTop: 1})) 623 632 } else if (size === 'tiny') { 624 624 - baseStyles.push(a.text_xs, android({paddingBottom: 1})) 625 625 - } else { 626 626 - baseStyles.push(a.text_sm, android({paddingBottom: 1})) 633 633 + baseStyles.push(a.text_xs, a.leading_tight) 627 634 } 628 635 629 636 return StyleSheet.flatten(baseStyles) ··· 643 650 export function ButtonIcon({ 644 651 icon: Comp, 645 652 position, 646 646 - size: iconSize, 653 653 + size, 647 654 }: { 648 655 icon: React.ComponentType<SVGIconProps> 649 656 position?: 'left' | 'right' 650 657 size?: SVGIconProps['size'] 651 658 }) { 652 652 - const {size, disabled} = useButtonContext() 659 659 + const {size: buttonSize, disabled} = useButtonContext() 653 660 const textStyles = useSharedButtonTextStyles() 661 661 + const {iconSize, iconContainerSize} = React.useMemo(() => { 662 662 + /** 663 663 + * Pre-set icon sizes for different button sizes 664 664 + */ 665 665 + const iconSizeShorthand = 666 666 + size ?? 667 667 + (({ 668 668 + large: 'sm', 669 669 + small: 'xs', 670 670 + tiny: 'xs', 671 671 + }[buttonSize || 'small'] || 'sm') as Exclude< 672 672 + SVGIconProps['size'], 673 673 + undefined 674 674 + >) 675 675 + 676 676 + /* 677 677 + * Copied here from icons/common.tsx so we can tweak if we need to, but 678 678 + * also so that we can calculate transforms. 679 679 + */ 680 680 + const iconSize = { 681 681 + xs: 12, 682 682 + sm: 16, 683 683 + md: 20, 684 684 + lg: 24, 685 685 + xl: 28, 686 686 + '2xl': 32, 687 687 + }[iconSizeShorthand] 688 688 + 689 689 + /* 690 690 + * Goal here is to match rendered text size so that different size icons 691 691 + * don't increase button size 692 692 + */ 693 693 + const iconContainerSize = { 694 694 + large: 18, 695 695 + small: 16, 696 696 + tiny: 13, 697 697 + }[buttonSize || 'small'] 698 698 + 699 699 + return { 700 700 + iconSize, 701 701 + iconContainerSize, 702 702 + } 703 703 + }, [buttonSize, size]) 654 704 655 705 return ( 656 706 <View 657 707 style={[ 658 708 a.z_20, 659 709 { 710 710 + width: iconContainerSize, 711 711 + height: iconContainerSize, 660 712 opacity: disabled ? 0.7 : 1, 661 713 marginLeft: position === 'left' ? -2 : 0, 662 714 marginRight: position === 'right' ? -2 : 0, 663 715 }, 664 716 ]}> 665 665 - <Comp 666 666 - size={ 667 667 - iconSize ?? (size === 'large' ? 'md' : size === 'tiny' ? 'xs' : 'sm') 668 668 - } 669 669 - style={[{color: textStyles.color, pointerEvents: 'none'}]} 670 670 - /> 717 717 + <View 718 718 + style={[ 719 719 + a.absolute, 720 720 + { 721 721 + width: iconSize, 722 722 + height: iconSize, 723 723 + top: '50%', 724 724 + left: '50%', 725 725 + transform: [ 726 726 + { 727 727 + translateX: (iconSize / 2) * -1, 728 728 + }, 729 729 + { 730 730 + translateY: (iconSize / 2) * -1, 731 731 + }, 732 732 + ], 733 733 + }, 734 734 + ]}> 735 735 + <Comp 736 736 + width={iconSize} 737 737 + style={[ 738 738 + { 739 739 + color: textStyles.color, 740 740 + pointerEvents: 'none', 741 741 + }, 742 742 + ]} 743 743 + /> 744 744 + </View> 671 745 </View> 672 746 ) 673 747 }

+2 -2

src/components/Prompt.tsx

··· 120 120 <Button 121 121 variant="solid" 122 122 color="secondary" 123 123 - size={gtMobile ? 'small' : 'medium'} 123 123 + size={gtMobile ? 'small' : 'large'} 124 124 label={cta || _(msg`Cancel`)} 125 125 onPress={onPress}> 126 126 <ButtonText>{cta || _(msg`Cancel`)}</ButtonText> ··· 163 163 <Button 164 164 variant="solid" 165 165 color={color} 166 166 - size={gtMobile ? 'small' : 'medium'} 166 166 + size={gtMobile ? 'small' : 'large'} 167 167 label={cta || _(msg`Confirm`)} 168 168 onPress={handleOnPress} 169 169 testID={testID}>

+1 -1

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

··· 125 125 label={_(msg`Close`)} 126 126 variant="ghost" 127 127 color="primary" 128 128 - size="xsmall" 128 128 + size="small" 129 129 onPress={() => control.close()}> 130 130 <ButtonText> 131 131 <Trans>Close</Trans>

+1 -1

src/components/StarterPack/Wizard/WizardListCard.tsx

··· 101 101 label={_(msg`Remove`)} 102 102 variant="solid" 103 103 color="secondary" 104 104 - size="xsmall" 104 104 + size="small" 105 105 style={[a.self_center, {marginLeft: 'auto'}]} 106 106 onPress={onPress}> 107 107 <ButtonText>

+1 -1

src/components/dialogs/BirthDateSettings.tsx

··· 117 117 <View style={isWeb && [a.flex_row, a.justify_end]}> 118 118 <Button 119 119 label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)} 120 120 - size="medium" 120 120 + size="large" 121 121 onPress={onSave} 122 122 variant="solid" 123 123 color="primary">

+1 -1

src/components/dialogs/Embed.tsx

··· 120 120 label={_(msg`Copy code`)} 121 121 color="primary" 122 122 variant="solid" 123 123 - size="medium" 123 123 + size="large" 124 124 onPress={() => { 125 125 ref.current?.focus() 126 126 ref.current?.setSelection(0, snippet.length)

+3 -3

src/components/dialogs/EmbedConsent.tsx

··· 83 83 onPress={onShowAllPress} 84 84 onAccessibilityEscape={control.close} 85 85 color="primary" 86 86 - size="medium" 86 86 + size="large" 87 87 variant="solid"> 88 88 <ButtonText> 89 89 <Trans>Enable external media</Trans> ··· 95 95 onPress={onShowPress} 96 96 onAccessibilityEscape={control.close} 97 97 color="secondary" 98 98 - size="medium" 98 98 + size="large" 99 99 variant="solid"> 100 100 <ButtonText> 101 101 <Trans>Enable {externalEmbedLabels[source]} only</Trans> ··· 106 106 onAccessibilityEscape={control.close} 107 107 onPress={onHidePress} 108 108 color="secondary" 109 109 - size="medium" 109 109 + size="large" 110 110 variant="ghost"> 111 111 <ButtonText> 112 112 <Trans>No thanks</Trans>

+1 -1

src/components/dialogs/GifSelect.ios.tsx

··· 244 244 label={_(msg`Close dialog`)} 245 245 onPress={close} 246 246 color="primary" 247 247 - size="medium" 247 247 + size="large" 248 248 variant="solid"> 249 249 <ButtonText> 250 250 <Trans>Close</Trans>

+1 -1

src/components/dialogs/GifSelect.tsx

··· 264 264 label={_(msg`Close dialog`)} 265 265 onPress={() => control.close()} 266 266 color="primary" 267 267 - size="medium" 267 267 + size="large" 268 268 variant="solid"> 269 269 <ButtonText> 270 270 <Trans>Close</Trans>

+1 -1

src/components/dialogs/MutedWords.tsx

··· 319 319 <Button 320 320 disabled={isPending || !field} 321 321 label={_(msg`Add mute word for configured settings`)} 322 322 - size="medium" 322 322 + size="large" 323 323 color="primary" 324 324 variant="solid" 325 325 style={[]}

+1 -1

src/components/dialogs/PostInteractionSettingsDialog.tsx

··· 439 439 onPress={onSave} 440 440 onAccessibilityEscape={control.close} 441 441 color="primary" 442 442 - size="medium" 442 442 + size="large" 443 443 variant="solid" 444 444 style={a.mt_xl}> 445 445 <ButtonText>{_(msg`Save`)}</ButtonText>

+1 -1

src/components/dms/MessagesNUX.tsx

··· 160 160 <Button 161 161 label={_(msg`Start chatting`)} 162 162 accessibilityHint={_(msg`Close modal`)} 163 163 - size="medium" 163 163 + size="large" 164 164 color="primary" 165 165 variant="solid" 166 166 onPress={() => control.close()}>

+1 -1

src/components/forms/DateField/index.tsx

··· 76 76 <Button 77 77 label={_(msg`Done`)} 78 78 onPress={() => control.close()} 79 79 - size="medium" 79 79 + size="large" 80 80 color="primary" 81 81 variant="solid"> 82 82 <ButtonText>

+2 -2

src/components/intents/VerifyEmailIntentDialog.tsx

··· 112 112 onPress={() => control.close()} 113 113 variant="solid" 114 114 color={status === 'failure' ? 'secondary' : 'primary'} 115 115 - size="medium" 115 115 + size="large" 116 116 style={{marginLeft: 'auto'}}> 117 117 <ButtonText> 118 118 <Trans>Close</Trans> ··· 124 124 onPress={onPressResendEmail} 125 125 variant="solid" 126 126 color="primary" 127 127 - size="medium" 127 127 + size="large" 128 128 disabled={sending}> 129 129 <ButtonText> 130 130 <Trans>Resend Email</Trans>

+2 -2

src/components/moderation/LabelsOnMeDialog.tsx

··· 279 279 testID="backBtn" 280 280 variant="solid" 281 281 color="secondary" 282 282 - size="medium" 282 282 + size="large" 283 283 onPress={onPressBack} 284 284 label={_(msg`Back`)}> 285 285 <ButtonText>{_(msg`Back`)}</ButtonText> ··· 288 288 testID="submitBtn" 289 289 variant="solid" 290 290 color="primary" 291 291 - size="medium" 291 291 + size="large" 292 292 onPress={onSubmit} 293 293 label={_(msg`Submit`)}> 294 294 <ButtonText>{_(msg`Submit`)}</ButtonText>

+3 -3

src/screens/Deactivated.tsx

··· 142 142 <View style={[a.gap_sm]}> 143 143 <Button 144 144 label={_(msg`Reactivate your account`)} 145 145 - size="medium" 145 145 + size="large" 146 146 variant="solid" 147 147 color="primary" 148 148 onPress={handleActivate}> ··· 153 153 </Button> 154 154 <Button 155 155 label={_(msg`Cancel reactivation and log out`)} 156 156 - size="medium" 156 156 + size="large" 157 157 variant="solid" 158 158 color="secondary" 159 159 onPress={onPressLogout}> ··· 212 212 </Text> 213 213 <Button 214 214 label={_(msg`Log in or sign up`)} 215 215 - size="medium" 215 215 + size="large" 216 216 variant="solid" 217 217 color="secondary" 218 218 onPress={() => setShowLoggedOut(true)}>

+6 -6

src/screens/E2E/SharedPreferencesTesterScreen.tsx

··· 23 23 style={[a.self_center]} 24 24 variant="solid" 25 25 color="primary" 26 26 - size="xsmall" 26 26 + size="small" 27 27 onPress={async () => { 28 28 SharedPrefs.removeValue('testerString') 29 29 SharedPrefs.setValue('testerString', 'Hello') ··· 39 39 style={[a.self_center]} 40 40 variant="solid" 41 41 color="primary" 42 42 - size="xsmall" 42 42 + size="small" 43 43 onPress={async () => { 44 44 SharedPrefs.removeValue('testerString') 45 45 const str = SharedPrefs.getString('testerString') ··· 53 53 style={[a.self_center]} 54 54 variant="solid" 55 55 color="primary" 56 56 - size="xsmall" 56 56 + size="small" 57 57 onPress={async () => { 58 58 SharedPrefs.removeValue('testerBool') 59 59 SharedPrefs.setValue('testerBool', true) ··· 68 68 style={[a.self_center]} 69 69 variant="solid" 70 70 color="primary" 71 71 - size="xsmall" 71 71 + size="small" 72 72 onPress={async () => { 73 73 SharedPrefs.removeValue('testerNumber') 74 74 SharedPrefs.setValue('testerNumber', 123) ··· 83 83 style={[a.self_center]} 84 84 variant="solid" 85 85 color="primary" 86 86 - size="xsmall" 86 86 + size="small" 87 87 onPress={async () => { 88 88 SharedPrefs.removeFromSet('testerSet', 'Hello!') 89 89 SharedPrefs.addToSet('testerSet', 'Hello!') ··· 98 98 style={[a.self_center]} 99 99 variant="solid" 100 100 color="primary" 101 101 - size="xsmall" 101 101 + size="small" 102 102 onPress={async () => { 103 103 SharedPrefs.removeFromSet('testerSet', 'Hello!') 104 104 const contains = SharedPrefs.setContains('testerSet', 'Hello!')

+2 -2

src/screens/Home/NoFeedsPinned.tsx

··· 91 91 <Button 92 92 disabled={isPending} 93 93 label={_(msg`Apply default recommended feeds`)} 94 94 - size="medium" 94 94 + size="large" 95 95 variant="solid" 96 96 color="primary" 97 97 onPress={addRecommendedFeeds}> ··· 102 102 <Link 103 103 label={_(msg`Browse other feeds`)} 104 104 to="/feeds" 105 105 - size="medium" 105 105 + size="large" 106 106 variant="solid" 107 107 color="secondary"> 108 108 <ButtonIcon icon={ListSparkle} position="left" />

+4 -4

src/screens/List/ListHiddenScreen.tsx

··· 152 152 <Button 153 153 variant="solid" 154 154 color="secondary" 155 155 - size="medium" 155 155 + size="large" 156 156 label={_(msg`Remove from saved feeds`)} 157 157 onPress={onRemoveList} 158 158 disabled={isProcessing}> ··· 168 168 <Button 169 169 variant="solid" 170 170 color="secondary" 171 171 - size="medium" 171 171 + size="large" 172 172 label={_(msg`Show list anyway`)} 173 173 onPress={() => setIsContentVisible(true)} 174 174 disabled={isProcessing}> ··· 180 180 <Button 181 181 variant="solid" 182 182 color="secondary" 183 183 - size="medium" 183 183 + size="large" 184 184 label={_(msg`Unsubscribe from list`)} 185 185 onPress={() => { 186 186 if (isModList) { ··· 204 204 color="primary" 205 205 label={_(msg`Return to previous page`)} 206 206 onPress={goBack} 207 207 - size="medium" 207 207 + size="large" 208 208 disabled={isProcessing}> 209 209 <ButtonText> 210 210 <Trans>Go Back</Trans>

+1 -1

src/screens/Login/ChooseAccountForm.tsx

··· 98 98 label={_(msg`Back`)} 99 99 variant="solid" 100 100 color="secondary" 101 101 - size="medium" 101 101 + size="large" 102 102 onPress={onPressBack}> 103 103 <ButtonText>{_(msg`Back`)}</ButtonText> 104 104 </Button>

+3 -3

src/screens/Login/ForgotPasswordForm.tsx

··· 129 129 label={_(msg`Back`)} 130 130 variant="solid" 131 131 color="secondary" 132 132 - size="medium" 132 132 + size="large" 133 133 onPress={onPressBack}> 134 134 <ButtonText> 135 135 <Trans>Back</Trans> ··· 143 143 label={_(msg`Next`)} 144 144 variant="solid" 145 145 color={'primary'} 146 146 - size="medium" 146 146 + size="large" 147 147 onPress={onPressNext}> 148 148 <ButtonText> 149 149 <Trans>Next</Trans> ··· 170 170 onPress={onEmailSent} 171 171 label={_(msg`Go to next`)} 172 172 accessibilityHint={_(msg`Navigates to the next screen`)} 173 173 - size="medium" 173 173 + size="large" 174 174 variant="ghost" 175 175 color="secondary"> 176 176 <ButtonText>

+3 -3

src/screens/Login/LoginForm.tsx

··· 285 285 label={_(msg`Back`)} 286 286 variant="solid" 287 287 color="secondary" 288 288 - size="medium" 288 288 + size="large" 289 289 onPress={onPressBack}> 290 290 <ButtonText> 291 291 <Trans>Back</Trans> ··· 299 299 accessibilityHint={_(msg`Retries login`)} 300 300 variant="solid" 301 301 color="secondary" 302 302 - size="medium" 302 302 + size="large" 303 303 onPress={onPressRetryConnect}> 304 304 <ButtonText> 305 305 <Trans>Retry</Trans> ··· 319 319 accessibilityHint={_(msg`Navigates to the next screen`)} 320 320 variant="solid" 321 321 color="primary" 322 322 - size="medium" 322 322 + size="large" 323 323 onPress={onPressNext}> 324 324 <ButtonText> 325 325 <Trans>Next</Trans>

+1 -1

src/screens/Login/PasswordUpdatedForm.tsx

··· 39 39 accessibilityHint={_(msg`Closes password update alert`)} 40 40 variant="solid" 41 41 color="primary" 42 42 - size="medium"> 42 42 + size="large"> 43 43 <ButtonText> 44 44 <Trans>Okay</Trans> 45 45 </ButtonText>

+2 -2

src/screens/Login/SetNewPasswordForm.tsx

··· 160 160 label={_(msg`Back`)} 161 161 variant="solid" 162 162 color="secondary" 163 163 - size="medium" 163 163 + size="large" 164 164 onPress={onPressBack}> 165 165 <ButtonText> 166 166 <Trans>Back</Trans> ··· 174 174 label={_(msg`Next`)} 175 175 variant="solid" 176 176 color="primary" 177 177 - size="medium" 177 177 + size="large" 178 178 onPress={onPressNext}> 179 179 <ButtonText> 180 180 <Trans>Next</Trans>

+2 -2

src/screens/Messages/Conversation/ChatDisabled.tsx

··· 128 128 testID="backBtn" 129 129 variant="solid" 130 130 color="secondary" 131 131 - size="medium" 131 131 + size="large" 132 132 onPress={onBack} 133 133 label={_(msg`Back`)}> 134 134 <ButtonText>{_(msg`Back`)}</ButtonText> ··· 137 137 testID="submitBtn" 138 138 variant="solid" 139 139 color="primary" 140 140 - size="medium" 140 140 + size="large" 141 141 onPress={onSubmit} 142 142 label={_(msg`Submit`)}> 143 143 <ButtonText>{_(msg`Submit`)}</ButtonText>

+1 -1

src/screens/Messages/List/index.tsx

··· 198 198 199 199 <Button 200 200 label={_(msg`Reload conversations`)} 201 201 - size="medium" 201 201 + size="large" 202 202 color="secondary" 203 203 variant="solid" 204 204 onPress={() => refetch()}>

+1 -1

src/screens/Settings/components/DeactivateAccountDialog.tsx

··· 102 102 <Button 103 103 variant="solid" 104 104 color="negative" 105 105 - size={gtMobile ? 'small' : 'medium'} 105 105 + size={gtMobile ? 'small' : 'large'} 106 106 label={_(msg`Yes, deactivate`)} 107 107 onPress={handleDeactivate}> 108 108 <ButtonText>{_(msg`Yes, deactivate`)}</ButtonText>

+3 -3

src/screens/Signup/BackNextButtons.tsx

··· 34 34 label={_(msg`Go back to previous step`)} 35 35 variant="solid" 36 36 color="secondary" 37 37 - size="medium" 37 37 + size="large" 38 38 onPress={onBackPress}> 39 39 <ButtonText> 40 40 <Trans>Back</Trans> ··· 46 46 label={_(msg`Press to retry`)} 47 47 variant="solid" 48 48 color="primary" 49 49 - size="medium" 49 49 + size="large" 50 50 onPress={onRetryPress}> 51 51 <ButtonText> 52 52 <Trans>Retry</Trans> ··· 59 59 label={_(msg`Continue to next step`)} 60 60 variant="solid" 61 61 color="primary" 62 62 - size="medium" 62 62 + size="large" 63 63 disabled={isLoading || isNextDisabled} 64 64 onPress={onNextPress}> 65 65 <ButtonText>

+1 -1

src/screens/StarterPack/StarterPackLandingScreen.tsx

··· 308 308 label={_(msg`Signup without a starter pack`)} 309 309 variant="solid" 310 310 color="secondary" 311 311 - size="medium" 311 311 + size="large" 312 312 style={[a.py_lg]} 313 313 onPress={onJoinWithoutPress}> 314 314 <ButtonText>

+2 -2

src/screens/StarterPack/StarterPackScreen.tsx

··· 449 449 }} 450 450 variant="solid" 451 451 color="primary" 452 452 - size="medium"> 452 452 + size="large"> 453 453 <ButtonText style={[a.text_lg]}> 454 454 <Trans>Join Bluesky</Trans> 455 455 </ButtonText> ··· 645 645 <Button 646 646 variant="solid" 647 647 color="negative" 648 648 - size={gtMobile ? 'small' : 'medium'} 648 648 + size={gtMobile ? 'small' : 'large'} 649 649 label={_(msg`Yes, delete this starter pack`)} 650 650 onPress={onDeleteStarterPack}> 651 651 <ButtonText>

+1 -1

src/screens/StarterPack/Wizard/index.tsx

··· 358 358 label={_(msg`Next`)} 359 359 variant="solid" 360 360 color="primary" 361 361 - size="medium" 361 361 + size="large" 362 362 style={[a.mx_xl, a.mb_lg, {marginTop: 35}]} 363 363 onPress={() => dispatch({type: 'Next'})}> 364 364 <ButtonText>

+1 -1

src/view/com/composer/GifAltText.tsx

··· 160 160 </View> 161 161 <Button 162 162 label={_(msg`Save`)} 163 163 - size="medium" 163 163 + size="large" 164 164 color="primary" 165 165 variant="solid" 166 166 onPress={onPressSubmit}>

+1 -1

src/view/com/composer/threadgate/ThreadgateBtn.tsx

··· 60 60 <Button 61 61 variant="solid" 62 62 color="secondary" 63 63 - size="xsmall" 63 63 + size="small" 64 64 testID="openReplyGateButton" 65 65 onPress={onPress} 66 66 label={label}

+2 -2

src/view/com/composer/videos/SubtitleDialog.tsx

··· 44 44 ? _('Opens captions and alt text dialog') 45 45 : _('Opens alt text dialog') 46 46 } 47 47 - size="xsmall" 47 47 + size="small" 48 48 color="secondary" 49 49 variant="ghost" 50 50 onPress={() => { ··· 169 169 <View style={web([a.flex_row, a.justify_end])}> 170 170 <Button 171 171 label={_(msg`Done`)} 172 172 - size={isWeb ? 'small' : 'medium'} 172 172 + size={isWeb ? 'small' : 'large'} 173 173 color="primary" 174 174 variant="solid" 175 175 onPress={() => {

+1 -1

src/view/com/composer/videos/SubtitleFilePicker.tsx

··· 57 57 <Button 58 58 onPress={handleClick} 59 59 label={_('Select subtitle file (.vtt)')} 60 60 - size="medium" 60 60 + size="large" 61 61 color="primary" 62 62 variant="solid" 63 63 disabled={disabled}>

+1 -1

src/view/com/notifications/FeedItem.tsx

··· 412 412 label={_(msg`Say hello!`)} 413 413 variant="ghost" 414 414 color="primary" 415 415 - size="xsmall" 415 415 + size="small" 416 416 style={[a.self_center, {marginLeft: 'auto'}]} 417 417 disabled={isLoading} 418 418 onPress={async () => {

+1 -1

src/view/com/util/post-ctrls/RepostButton.tsx

··· 157 157 label={_(msg`Cancel quote post`)} 158 158 onAccessibilityEscape={close} 159 159 onPress={close} 160 160 - size="medium" 160 160 + size="large" 161 161 variant="solid" 162 162 color="primary"> 163 163 <ButtonText>{_(msg`Cancel`)}</ButtonText>

+1 -1

src/view/com/util/post-embeds/VideoEmbedInner/web-controls/ControlButton.tsx

··· 26 26 onPress={onPress} 27 27 variant="ghost" 28 28 shape="round" 29 29 - size="medium" 29 29 + size="large" 30 30 style={a.p_2xs} 31 31 hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}> 32 32 {active ? (

+82 -49

src/view/screens/Storybook/Buttons.tsx

··· 9 9 ButtonText, 10 10 ButtonVariant, 11 11 } from '#/components/Button' 12 12 - import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/Arrow' 13 12 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' 14 13 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' 15 14 import {H1} from '#/components/Typography' ··· 70 69 ), 71 70 )} 72 71 </View> 73 73 - {/* 74 74 - <View style={[a.gap_md, a.align_start]}> 75 75 - {['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map( 76 76 - name => ( 77 77 - <React.Fragment key={name}> 78 78 - <Button 79 79 - variant="gradient" 80 80 - color={name as ButtonColor} 81 81 - size="large" 82 82 - label="Click here"> 83 83 - <ButtonText>Button</ButtonText> 84 84 - </Button> 85 85 - <Button 86 86 - disabled 87 87 - variant="gradient" 88 88 - color={name as ButtonColor} 89 89 - size="large" 90 90 - label="Click here"> 91 91 - <ButtonText>Button</ButtonText> 92 92 - </Button> 93 93 - </React.Fragment> 94 94 - ), 95 95 - )} 96 96 - </View> 97 97 - */} 98 72 </View> 99 73 </View> 100 74 101 75 <View style={[a.flex_wrap, a.gap_md, a.align_start]}> 76 76 + <Button variant="solid" color="primary" size="large" label="Link out"> 77 77 + <ButtonText>Button</ButtonText> 78 78 + </Button> 79 79 + <Button variant="solid" color="primary" size="large" label="Link out"> 80 80 + <ButtonText>Button</ButtonText> 81 81 + <ButtonIcon icon={Globe} position="right" /> 82 82 + </Button> 83 83 + 84 84 + <Button variant="solid" color="primary" size="small" label="Link out"> 85 85 + <ButtonText>Button</ButtonText> 86 86 + </Button> 87 87 + <Button variant="solid" color="primary" size="small" label="Link out"> 88 88 + <ButtonText>Button</ButtonText> 89 89 + <ButtonIcon icon={Globe} position="right" /> 90 90 + </Button> 91 91 + 92 92 + <Button variant="solid" color="primary" size="tiny" label="Link out"> 93 93 + <ButtonIcon icon={Globe} position="left" /> 94 94 + <ButtonText>Button</ButtonText> 95 95 + </Button> 96 96 + </View> 97 97 + 98 98 + <View style={[a.flex_row, a.gap_md, a.align_center]}> 99 99 + <Button variant="solid" color="primary" size="large" label="Link out"> 100 100 + <ButtonText>Button</ButtonText> 101 101 + </Button> 102 102 + <Button variant="solid" color="primary" size="large" label="Link out"> 103 103 + <ButtonText>Button</ButtonText> 104 104 + <ButtonIcon icon={Globe} position="right" /> 105 105 + </Button> 106 106 + <Button variant="solid" color="primary" size="large" label="Link out"> 107 107 + <ButtonText>Button</ButtonText> 108 108 + <ButtonIcon icon={Globe} position="right" size="lg" /> 109 109 + </Button> 102 110 <Button 103 103 - variant="gradient" 104 104 - color="gradient_sky" 111 111 + variant="solid" 112 112 + color="primary" 113 113 + size="large" 114 114 + shape="round" 115 115 + label="Link out"> 116 116 + <ButtonIcon icon={ChevronLeft} /> 117 117 + </Button> 118 118 + <Button 119 119 + variant="solid" 120 120 + color="primary" 105 121 size="large" 122 122 + shape="round" 106 123 label="Link out"> 107 107 - <ButtonText>Link out</ButtonText> 108 108 - <ButtonIcon icon={ArrowTopRight} position="right" /> 124 124 + <ButtonIcon icon={ChevronLeft} size="lg" /> 109 125 </Button> 126 126 + </View> 110 127 128 128 + <View style={[a.flex_row, a.gap_md, a.align_center]}> 129 129 + <Button variant="solid" color="primary" size="small" label="Link out"> 130 130 + <ButtonText>Button</ButtonText> 131 131 + </Button> 132 132 + <Button variant="solid" color="primary" size="small" label="Link out"> 133 133 + <ButtonText>Button</ButtonText> 134 134 + <ButtonIcon icon={Globe} position="right" /> 135 135 + </Button> 111 136 <Button 112 112 - variant="gradient" 113 113 - color="gradient_sky" 137 137 + variant="solid" 138 138 + color="primary" 114 139 size="small" 140 140 + shape="round" 115 141 label="Link out"> 116 116 - <ButtonText>Link out</ButtonText> 117 117 - <ButtonIcon icon={ArrowTopRight} position="right" /> 142 142 + <ButtonIcon icon={ChevronLeft} /> 118 143 </Button> 119 119 - 120 144 <Button 121 121 - variant="gradient" 122 122 - color="gradient_sky" 145 145 + variant="solid" 146 146 + color="primary" 123 147 size="small" 148 148 + shape="round" 124 149 label="Link out"> 125 125 - <ButtonText>Link xxxxxx</ButtonText> 150 150 + <ButtonIcon icon={ChevronLeft} size="lg" /> 126 151 </Button> 152 152 + </View> 127 153 154 154 + <View style={[a.flex_row, a.gap_md, a.align_center]}> 155 155 + <Button variant="solid" color="primary" size="tiny" label="Link out"> 156 156 + <ButtonText>Button</ButtonText> 157 157 + </Button> 158 158 + <Button variant="solid" color="primary" size="tiny" label="Link out"> 159 159 + <ButtonText>Button</ButtonText> 160 160 + <ButtonIcon icon={Globe} position="right" /> 161 161 + </Button> 128 162 <Button 129 129 - variant="gradient" 130 130 - color="gradient_sky" 131 131 - size="small" 163 163 + variant="solid" 164 164 + color="primary" 165 165 + size="tiny" 166 166 + shape="round" 132 167 label="Link out"> 133 133 - <ButtonIcon icon={Globe} position="left" /> 134 134 - <ButtonText>Link out</ButtonText> 168 168 + <ButtonIcon icon={ChevronLeft} /> 135 169 </Button> 136 136 - 137 170 <Button 138 138 - variant="gradient" 139 139 - color="gradient_sky" 171 171 + variant="solid" 172 172 + color="primary" 140 173 size="tiny" 174 174 + shape="round" 141 175 label="Link out"> 142 142 - <ButtonIcon icon={Globe} position="left" /> 143 143 - <ButtonText>Link out</ButtonText> 176 176 + <ButtonIcon icon={ChevronLeft} size="md" /> 144 177 </Button> 145 178 </View> 146 179 147 147 - <View style={[a.flex_row, a.gap_md, a.align_start]}> 180 180 + <View style={[a.flex_row, a.gap_md, a.align_center]}> 148 181 <Button 149 182 variant="solid" 150 183 color="primary"

+2

src/view/screens/Storybook/index.tsx

··· 80 80 </Button> 81 81 </View> 82 82 83 83 + <Buttons /> 84 84 + 83 85 <Dialogs /> 84 86 <ThemeProvider theme="light"> 85 87 <Theming />