forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add `rectangular` shape to button (#9382)
authored by
Samuel Newman
and committed by
GitHub
e663e824
68a4d844
+43
-9
+1
src/components/AppLanguageDropdown.tsx
+1
src/components/AppLanguageDropdown.tsx
+29
-1
src/components/Button.tsx
+29
-1
src/components/Button.tsx
···
39
39
| 'primary_subtle'
40
40
| 'negative_subtle'
41
41
export type ButtonSize = 'tiny' | 'small' | 'large'
42
-
export type ButtonShape = 'round' | 'square' | 'default'
42
+
export type ButtonShape = 'round' | 'square' | 'rectangular' | 'default'
43
43
export type VariantProps = {
44
44
/**
45
45
* The style variation of the button
···
56
56
size?: ButtonSize
57
57
/**
58
58
* The shape of the button
59
+
*
60
+
* - `default`: Pill shaped. Most buttons should use this shape.
61
+
* - `round`: Circular. For icon-only buttons.
62
+
* - `square`: Square. For icon-only buttons.
63
+
* - `rectangular`: Rectangular. Matches previous style, use when adjacent to form fields.
59
64
*/
60
65
shape?: ButtonShape
61
66
}
···
450
455
baseStyles.push(a.rounded_full, {
451
456
paddingVertical: 5,
452
457
paddingHorizontal: 9,
458
+
gap: 2,
459
+
})
460
+
}
461
+
} else if (shape === 'rectangular') {
462
+
if (size === 'large') {
463
+
baseStyles.push({
464
+
paddingVertical: 12,
465
+
paddingHorizontal: 25,
466
+
borderRadius: 10,
467
+
gap: 3,
468
+
})
469
+
} else if (size === 'small') {
470
+
baseStyles.push({
471
+
paddingVertical: 8,
472
+
paddingHorizontal: 13,
473
+
borderRadius: 8,
474
+
gap: 3,
475
+
})
476
+
} else if (size === 'tiny') {
477
+
baseStyles.push({
478
+
paddingVertical: 5,
479
+
paddingHorizontal: 9,
480
+
borderRadius: 6,
453
481
gap: 2,
454
482
})
455
483
}
+1
-1
src/components/Select/index.tsx
+1
-1
src/components/Select/index.tsx
+2
-1
src/screens/Search/Shell.tsx
+2
-1
src/screens/Search/Shell.tsx
+2
-3
src/screens/Settings/AppPasswords.tsx
+2
-3
src/screens/Settings/AppPasswords.tsx
···
5
5
FadeOut,
6
6
LayoutAnimationConfig,
7
7
LinearTransition,
8
-
StretchOutY,
9
8
} from 'react-native-reanimated'
10
9
import {type ComAtprotoServerListAppPasswords} from '@atproto/api'
11
10
import {msg, Trans} from '@lingui/macro'
···
14
13
15
14
import {type CommonNavigatorParams} from '#/lib/routes/types'
16
15
import {cleanError} from '#/lib/strings/errors'
17
-
import {isWeb} from '#/platform/detection'
18
16
import {
19
17
useAppPasswordDeleteMutation,
20
18
useAppPasswordsQuery,
···
94
92
key={appPassword.name}
95
93
style={a.w_full}
96
94
entering={FadeIn}
97
-
exiting={isWeb ? FadeOut : StretchOutY}
95
+
exiting={FadeOut}
98
96
layout={LinearTransition.delay(150)}>
99
97
<SettingsList.Item>
100
98
<AppPasswordCard appPassword={appPassword} />
···
188
186
variant="ghost"
189
187
color="negative"
190
188
size="small"
189
+
shape="square"
191
190
style={[a.bg_transparent]}
192
191
onPress={() => deleteControl.open()}>
193
192
<ButtonIcon icon={TrashIcon} />
+1
-1
src/screens/Settings/LanguageSettings.tsx
+1
-1
src/screens/Settings/LanguageSettings.tsx
+7
-2
src/screens/Settings/components/ChangeHandleDialog.tsx
+7
-2
src/screens/Settings/components/ChangeHandleDialog.tsx
···
500
500
value={currentAccount?.did ?? ''}
501
501
label={_(msg`Copy DID`)}
502
502
size="large"
503
-
variant="solid"
503
+
shape="rectangular"
504
504
color="secondary"
505
-
style={[a.px_md, a.border, t.atoms.border_contrast_low]}>
505
+
style={[
506
+
a.px_md,
507
+
a.border,
508
+
t.atoms.border_contrast_low,
509
+
t.atoms.bg_contrast_25,
510
+
]}>
506
511
<Text style={[a.text_md, a.flex_1]}>{currentAccount?.did}</Text>
507
512
<ButtonIcon icon={CopyIcon} />
508
513
</CopyButton>