diff options
| author | Hailey <me@haileyok.com> | 2024-03-08 14:43:28 -0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-08 14:43:28 -0800 |
| commit | 62e57c3b08020e17b3266876de342996c8bd12db (patch) | |
| tree | b134bbe54b212e7ce0c57a70ca3806bd769bf553 | |
| parent | 8ee325e73d927a34ef23a776c5404e9556f0d94a (diff) | |
| download | voidsky-62e57c3b08020e17b3266876de342996c8bd12db.tar.zst | |
Adjustments to ALF prompt buttons (Dialogs Pt. 2) (#3144)
* Improve a11y on ios * Format * Remove android * Fix android * small adjustment to buttons in prompt * full width below gtmobile * Revert some changes * use sharedvalue for `importantForAccessibility` * add back `isOpen` * fix some more types * small adjustment to buttons in prompt * full width below gtmobile --------- Co-authored-by: Eric Bailey <git@esb.lol>
| -rw-r--r-- | src/components/Button.tsx | 4 | ||||
| -rw-r--r-- | src/components/Prompt.tsx | 9 |
2 files changed, 8 insertions, 5 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 5361be963..d3bf73cc3 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -27,7 +27,7 @@ export type ButtonColor = | 'gradient_sunset' | 'gradient_nordic' | 'gradient_bonfire' -export type ButtonSize = 'tiny' | 'small' | 'large' +export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large' export type ButtonShape = 'round' | 'square' | 'default' export type VariantProps = { /** @@ -274,6 +274,8 @@ export function Button({ 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) } else if (size === 'small') { baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm) } else if (size === 'tiny') { diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 28ec2d036..3b245c440 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -78,10 +78,9 @@ export function Actions({children}: React.PropsWithChildren<{}>) { <View style={[ a.w_full, - a.flex_row, a.gap_sm, a.justify_end, - gtMobile && [a.pb_4xl], + gtMobile ? [a.flex_row] : [a.flex_col, a.pt_md, a.pb_4xl], ]}> {children} </View> @@ -92,12 +91,13 @@ export function Cancel({ children, }: React.PropsWithChildren<{onPress?: PressableProps['onPress']}>) { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {close} = Dialog.useDialogContext() return ( <Button variant="solid" color="secondary" - size="small" + size={gtMobile ? 'small' : 'medium'} label={_(msg`Cancel`)} onPress={() => close()}> {children} @@ -110,6 +110,7 @@ export function Action({ onPress, }: React.PropsWithChildren<{onPress?: () => void}>) { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {close} = Dialog.useDialogContext() const handleOnPress = React.useCallback(() => { close() @@ -119,7 +120,7 @@ export function Action({ <Button variant="solid" color="primary" - size="small" + size={gtMobile ? 'small' : 'medium'} label={_(msg`Confirm`)} onPress={handleOnPress}> {children} |