Skip to content

Commit

Permalink
Use large, small, tiny
Browse files Browse the repository at this point in the history
  • Loading branch information
@estrattonbailey
estrattonbailey committed Sep 18, 2024
1 parent bcec243 commit 1dc333c
Show file tree
Hide file tree
Showing 39 changed files with 70 additions and 87 deletions.
18 changes: 7 additions & 11 deletions src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
/**
Expand Down Expand Up @@ -342,14 +342,14 @@ export const Button = React.forwardRef<View, ButtonProps>(
}

if (shape === 'default') {
if (size === 'large' || size === 'medium') {
if (size === 'large') {
baseStyles.push({
paddingVertical: 13,
paddingHorizontal: 20,
borderRadius: 8,
gap: 8,
})
} else if (size === 'small' || size === 'xsmall') {
} else if (size === 'small') {
baseStyles.push({
paddingVertical: 9,
paddingHorizontal: 14,
Expand All @@ -365,13 +365,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
})
}
} else if (shape === 'round' || shape === 'square') {
if (size === 'large' || size === 'medium') {
if (size === 'large') {
if (shape === 'round') {
baseStyles.push({height: 46, width: 46})
} else {
baseStyles.push({height: 44, width: 44})
}
} else if (size === 'small' || size === 'xsmall') {
} else if (size === 'small') {
if (shape === 'round') {
baseStyles.push({height: 36, width: 36})
} else {
Expand Down Expand Up @@ -625,9 +625,9 @@ export function useSharedButtonTextStyles() {
}
}

if (size === 'large' || size === 'medium') {
if (size === 'large') {
baseStyles.push(a.text_md, a.leading_tight, web({paddingTop: 1}))
} else if (size === 'small' || size === 'xsmall') {
} else if (size === 'small') {
baseStyles.push(a.text_sm, a.leading_tight, web({paddingTop: 1}))
} else if (size === 'tiny') {
baseStyles.push(a.text_xs, a.leading_tight)
Expand Down Expand Up @@ -666,9 +666,7 @@ export function ButtonIcon({
size ??
(({
large: 'sm',
medium: 'sm',
small: 'xs',
xsmall: 'xs',
tiny: 'xs',
}[buttonSize || 'small'] || 'sm') as Exclude<
SVGIconProps['size'],
Expand All @@ -694,9 +692,7 @@ export function ButtonIcon({
*/
const iconContainerSize = {
large: 18,
medium: 18,
small: 16,
xsmall: 16,
tiny: 13,
}[buttonSize || 'small']

Expand Down
4 changes: 2 additions & 2 deletions src/components/Prompt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/StarterPack/Wizard/WizardEditListDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/StarterPack/Wizard/WizardListCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/BirthDateSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/Embed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
6 changes: 3 additions & 3 deletions src/components/dialogs/EmbedConsent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/GifSelect.ios.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/GifSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/MutedWords.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={[]}
Expand Down
2 changes: 1 addition & 1 deletion src/components/dialogs/PostInteractionSettingsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dms/MessagesNUX.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/forms/DateField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export function DateField({
<Button
label={_(msg`Done`)}
onPress={() => control.close()}
size="medium"
size="large"
color="primary"
variant="solid">
<ButtonText>
Expand Down
4 changes: 2 additions & 2 deletions src/components/intents/VerifyEmailIntentDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/moderation/LabelsOnMeDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/screens/Deactivated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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}>
Expand Down Expand Up @@ -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)}>
Expand Down
12 changes: 6 additions & 6 deletions src/screens/E2E/SharedPreferencesTesterScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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')
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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!')
Expand All @@ -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!')
Expand Down
4 changes: 2 additions & 2 deletions src/screens/Home/NoFeedsPinned.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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" />
Expand Down
8 changes: 4 additions & 4 deletions src/screens/List/ListHiddenScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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}>
Expand All @@ -180,7 +180,7 @@ export function ListHiddenScreen({
<Button
variant="solid"
color="secondary"
size="medium"
size="large"
label={_(msg`Unsubscribe from list`)}
onPress={() => {
if (isModList) {
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/screens/Login/ChooseAccountForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 1dc333c

Please sign in to comment.