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 <[email protected]>
bluesky-social · Mar 8, 2024 · 62e57c3 · 62e57c3
1 parent 8ee325e
commit 62e57c3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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}