diff options
40 files changed, 258 insertions, 149 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 704aa9d98..8728b88c2 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 7836bbef9..8765cdee3 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 870cbbb9f..f7b0aba34 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 bd308fc73..ad02cdc30 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 d831c6002..08608f9d8 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 f43c3c6fe..73ecf6616 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 f7e614597..765b8adc7 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 091a23e51..2f867e865 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 4c60c6ebe..1afc588da 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 38273aad5..81a614103 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 a326602b7..d1828e4c8 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 9a3425243..5c21ee05b 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 c916f4efc..1c78d2abb 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 4dca8bd90..e8c63af82 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 fe6932290..c54a04a78 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 997fe419e..9b0b5b166 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 380f1080b..06bf538ea 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 3a98b8734..74412763f 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 473bb08ea..e4354337a 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 8c002b160..678ba5123 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 8588888b8..7acaae510 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 9a01c0499..c2038b287 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 5407f3f1e..03e7d8669 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 88f7ec541..a6658621c 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 23acc41cd..c768d2504 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 e78239580..efd717f0b 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 2be42d13e..6958b7a47 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 73bd428c8..47256bf6f 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 5f1d5e062..4d7f9ace9 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 5b267ff27..0aa863f7b 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 40a4a510b..29ef44ee0 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 b7690e102..a37452604 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 666473afd..c4ce9a232 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 10c2d7564..c07fdfc56 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 856a0eb4f..44a6b53b6 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 b1cf3b485..b248bb4c5 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 8c4928dfc..0ecdf25b9 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 36b32a072..6b509d09a 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 2935103df..66040c2e3 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 71dbe8839..c6beecefe 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 /> |