Merge branch 'hailey/dialogs-pt8' into hailey/dialogs-pt9

src/components/AccountList.tsx

@@ -7,9 +7,9 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {Button} from './Button'
 import {Text} from './Typography'
 
 export function AccountList({
@@ -51,19 +51,19 @@ export function AccountList({
           <View style={[{borderBottomWidth: 1}, t.atoms.border_contrast_low]} />
         </React.Fragment>
       ))}
-      <BottomSheetButton
+      <Button
         testID="chooseAddAccountBtn"
         style={[a.flex_1]}
         onPress={pendingDid ? undefined : onPressAddAccount}
         label={_(msg`Login to account that is not listed`)}>
-        {({pressed}) => (
+        {({hovered, pressed}) => (
           <View
             style={[
               a.flex_1,
               a.flex_row,
               a.align_center,
               {height: 48},
-              pressed && t.atoms.bg_contrast_25,
+              (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
             <Text
               style={[
@@ -78,7 +78,7 @@ export function AccountList({
             <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
           </View>
         )}
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
@@ -103,7 +103,7 @@ function AccountItem({
   }, [account, onSelect])
 
   return (
-    <BottomSheetButton
+    <Button
       testID={`chooseAccountBtn-${account.handle}`}
       key={account.did}
       style={[a.flex_1]}
@@ -113,14 +113,14 @@ function AccountItem({
           ? _(msg`Continue as ${account.handle} (currently signed in)`)
           : _(msg`Sign in as ${account.handle}`)
       }>
-      {({pressed}) => (
+      {({hovered, pressed}) => (
         <View
           style={[
             a.flex_1,
             a.flex_row,
             a.align_center,
             {height: 48},
-            (pressed || isPendingAccount) && t.atoms.bg_contrast_25,
+            (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
           ]}>
           <View style={a.p_md}>
             <UserAvatar avatar={profile?.avatar} size={24} />
@@ -143,6 +143,6 @@ function AccountItem({
           )}
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }

src/components/BottomSheetButton.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-import {Button, ButtonProps} from '#/components/Button'
-import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
-
-export function BottomSheetButton({children, ...rest}: ButtonProps) {
-  return (
-    <Button {...rest} PressableComponent={NormalizedRNGHPressable}>
-      {children}
-    </Button>
-  )
-}

src/components/BottomSheetButton.web.tsx

@@ -1,3 +0,0 @@
-import {Button as BottomSheetButton} from '#/components/Button'
-
-export {BottomSheetButton}

src/components/Button.tsx

@@ -15,7 +15,9 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -90,8 +92,7 @@ export type ButtonProps = Pick<
     PressableComponent?: React.ComponentType<PressableProps>
   }
 
-export type ButtonTextProps = TextProps &
+export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
-  VariantProps & {disabled?: boolean | null}
 
 const Context = React.createContext<VariantProps & ButtonState>({
   hovered: false,
@@ -99,7 +100,6 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
-export const ButtonContext = Context
 
 export function useButtonContext() {
   return React.useContext(Context)
@@ -122,6 +122,18 @@ export const Button = React.forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
+    // This will pick the correct default pressable to use. If we are inside a dialog, we need to use the RNGH
+    // pressable so that it is usable inside the dialog.
+    const {insideDialog} = useDialogContext()
+    if (!PressableComponent) {
+      if (insideDialog) {
+        PressableComponent = NormalizedRNGHPressable
+      } else {
+        PressableComponent = Pressable
+      }
+    }
+
+    const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
       hovered: false,
@@ -185,126 +197,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }))
     }, [setState])
 
-    const {baseStyles, hoverStyles} = useSharedButtonStyles({
-      color,
-      variant,
-      disabled,
-      shape,
-      size,
-    })
-
-    const {gradientColors, gradientHoverColors, gradientLocations} =
-      React.useMemo(() => {
-        const colors: string[] = []
-        const hoverColors: string[] = []
-        const locations: number[] = []
-        const gradient = {
-          primary: tokens.gradients.sky,
-          secondary: tokens.gradients.sky,
-          secondary_inverted: tokens.gradients.sky,
-          negative: tokens.gradients.sky,
-          gradient_primary: tokens.gradients.primary,
-          gradient_sky: tokens.gradients.sky,
-          gradient_midnight: tokens.gradients.midnight,
-          gradient_sunrise: tokens.gradients.sunrise,
-          gradient_sunset: tokens.gradients.sunset,
-          gradient_nordic: tokens.gradients.nordic,
-          gradient_bonfire: tokens.gradients.bonfire,
-        }[color || 'primary']
-
-        if (variant === 'gradient') {
-          colors.push(...gradient.values.map(([_, color]) => color))
-          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
-          locations.push(...gradient.values.map(([location, _]) => location))
-        }
-
-        return {
-          gradientColors: colors,
-          gradientHoverColors: hoverColors,
-          gradientLocations: locations,
-        }
-      }, [variant, color])
-
-    const context = React.useMemo<ButtonContext>(
-      () => ({
-        ...state,
-        variant,
-        color,
-        size,
-        disabled: disabled || false,
-      }),
-      [state, variant, color, size, disabled],
-    )
-
-    const flattenedBaseStyles = flatten([baseStyles, style])
-
-    return (
-      <PressableComponent
-        role="button"
-        accessibilityHint={undefined} // optional
-        {...rest}
-        ref={ref}
-        aria-label={label}
-        aria-pressed={state.pressed}
-        accessibilityLabel={label}
-        disabled={disabled || false}
-        accessibilityState={{
-          disabled: disabled || false,
-        }}
-        style={[
-          a.flex_row,
-          a.align_center,
-          a.justify_center,
-          flattenedBaseStyles,
-          ...(state.hovered || state.pressed
-            ? [hoverStyles, flatten(hoverStyleProp)]
-            : []),
-        ]}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        onHoverIn={onHoverIn}
-        onHoverOut={onHoverOut}
-        onFocus={onFocus}
-        onBlur={onBlur}>
-        {variant === 'gradient' && (
-          <View
-            style={[
-              a.absolute,
-              a.inset_0,
-              a.overflow_hidden,
-              {borderRadius: flattenedBaseStyles.borderRadius},
-            ]}>
-            <LinearGradient
-              colors={
-                state.hovered || state.pressed
-                  ? gradientHoverColors
-                  : gradientColors
-              }
-              locations={gradientLocations}
-              start={{x: 0, y: 0}}
-              end={{x: 1, y: 1}}
-              style={[a.absolute, a.inset_0]}
-            />
-          </View>
-        )}
-        <Context.Provider value={context}>
-          {typeof children === 'function' ? children(context) : children}
-        </Context.Provider>
-      </PressableComponent>
-    )
-  },
-)
-Button.displayName = 'Button'
-
-export function useSharedButtonStyles({
-  color,
-  variant,
-  disabled,
-  shape,
-  size,
-}: VariantProps & {disabled?: boolean | null}) {
-  const t = useTheme()
-
     const {baseStyles, hoverStyles} = React.useMemo(() => {
       const baseStyles: ViewStyle[] = []
       const hoverStyles: ViewStyle[] = []
@@ -526,9 +418,109 @@ export function useSharedButtonStyles({
       }
     }, [t, variant, color, size, shape, disabled])
 
-  return {baseStyles, hoverStyles}
+    const {gradientColors, gradientHoverColors, gradientLocations} =
+      React.useMemo(() => {
+        const colors: string[] = []
+        const hoverColors: string[] = []
+        const locations: number[] = []
+        const gradient = {
+          primary: tokens.gradients.sky,
+          secondary: tokens.gradients.sky,
+          secondary_inverted: tokens.gradients.sky,
+          negative: tokens.gradients.sky,
+          gradient_primary: tokens.gradients.primary,
+          gradient_sky: tokens.gradients.sky,
+          gradient_midnight: tokens.gradients.midnight,
+          gradient_sunrise: tokens.gradients.sunrise,
+          gradient_sunset: tokens.gradients.sunset,
+          gradient_nordic: tokens.gradients.nordic,
+          gradient_bonfire: tokens.gradients.bonfire,
+        }[color || 'primary']
+
+        if (variant === 'gradient') {
+          colors.push(...gradient.values.map(([_, color]) => color))
+          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+          locations.push(...gradient.values.map(([location, _]) => location))
         }
 
+        return {
+          gradientColors: colors,
+          gradientHoverColors: hoverColors,
+          gradientLocations: locations,
+        }
+      }, [variant, color])
+
+    const context = React.useMemo<ButtonContext>(
+      () => ({
+        ...state,
+        variant,
+        color,
+        size,
+        disabled: disabled || false,
+      }),
+      [state, variant, color, size, disabled],
+    )
+
+    const flattenedBaseStyles = flatten([baseStyles, style])
+
+    return (
+      <PressableComponent
+        role="button"
+        accessibilityHint={undefined} // optional
+        {...rest}
+        ref={ref}
+        aria-label={label}
+        aria-pressed={state.pressed}
+        accessibilityLabel={label}
+        disabled={disabled || false}
+        accessibilityState={{
+          disabled: disabled || false,
+        }}
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          flattenedBaseStyles,
+          ...(state.hovered || state.pressed
+            ? [hoverStyles, flatten(hoverStyleProp)]
+            : []),
+        ]}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        onFocus={onFocus}
+        onBlur={onBlur}>
+        {variant === 'gradient' && (
+          <View
+            style={[
+              a.absolute,
+              a.inset_0,
+              a.overflow_hidden,
+              {borderRadius: flattenedBaseStyles.borderRadius},
+            ]}>
+            <LinearGradient
+              colors={
+                state.hovered || state.pressed
+                  ? gradientHoverColors
+                  : gradientColors
+              }
+              locations={gradientLocations}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 1}}
+              style={[a.absolute, a.inset_0]}
+            />
+          </View>
+        )}
+        <Context.Provider value={context}>
+          {typeof children === 'function' ? children(context) : children}
+        </Context.Provider>
+      </PressableComponent>
+    )
+  },
+)
+Button.displayName = 'Button'
+
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()

src/components/Dialog/context.ts

@@ -9,6 +9,7 @@ import {
 
 export const Context = React.createContext<DialogContextProps>({
   close: () => {},
+  insideDialog: false,
 })
 
 export function useDialogContext() {

src/components/Dialog/index.tsx

@@ -56,7 +56,6 @@ export function OuterWithoutPortal({
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
-  // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -104,21 +103,13 @@ export function OuterWithoutPortal({
     [open, close],
   )
 
-  // @TODO DIALOG REFACTOR - what is this? rm i think?
+  const context = React.useMemo(() => ({close, insideDialog: true}), [close])
-  // React.useEffect(() => {
-  //   return () => {
-  //     setDialogIsOpen(control.id, false)
-  //   }
-  // }, [control.id, setDialogIsOpen])
-
-  const context = React.useMemo(() => ({close}), [close])
 
   const Wrapper = isIOS ? View : GestureHandlerRootView
 
   return (
     <Context.Provider value={context}>
       <BlueskyBottomSheetView
-        // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
         ref={ref}
         topInset={30}
         bottomInset={insets.bottom}

src/components/Dialog/index.web.tsx

@@ -103,6 +103,7 @@ export function Outer({
   const context = React.useMemo(
     () => ({
       close,
+      insideDialog: true,
     }),
     [close],
   )
@@ -229,10 +230,6 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
-  return null
-}
-
 export function Close() {
   const {_} = useLingui()
   const {close} = React.useContext(Context)

src/components/Dialog/types.ts

@@ -37,6 +37,7 @@ export type DialogControlProps = DialogControlRefProps & {
 
 export type DialogContextProps = {
   close: DialogControlProps['close']
+  insideDialog: boolean
 }
 
 export type DialogControlOpenOptions = {

src/components/FeedCard.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {GestureResponderEvent, View} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {
   AppBskyActorDefs,
   AppBskyFeedDefs,
@@ -14,7 +13,6 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {precacheFeedFromGeneratorView} from '#/state/queries/feed'
 import {
   useAddSavedFeedsMutation,
@@ -256,13 +254,9 @@ function SaveButtonInner({
   const isPending = isAddSavedFeedPending || isRemovePending
 
   const toggleSave = React.useCallback(
-    async (e: GestureResponderEvent | PressableEvent) => {
+    async (e: GestureResponderEvent) => {
-      // WEB ONLY - this is okay. See `BottomSheetPressable.web.tsx`
-      if (isWeb) {
-        e = e as GestureResponderEvent
       e.preventDefault()
       e.stopPropagation()
-      }
 
       try {
         if (savedFeedConfig) {

src/components/Link.tsx

@@ -23,7 +23,6 @@ import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonProps} from '#/components/Button'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text, TextProps} from '#/components/Typography'
@@ -258,7 +257,7 @@ export function BottomSheetLink({
   })
 
   return (
-    <BottomSheetButton
+    <Button
       {...rest}
       style={[a.justify_start, flatten(rest.style)]}
       role="link"
@@ -277,7 +276,7 @@ export function BottomSheetLink({
         },
       })}>
       {children}
-    </BottomSheetButton>
+    </Button>
   )
 }
 

src/components/NewskieDialog.tsx

@@ -12,7 +12,6 @@ import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
@@ -142,7 +141,7 @@ export function NewskieDialog({
             ) : null}
 
             {isNative && (
-              <BottomSheetButton
+              <Button
                 label={_(msg`Close`)}
                 variant="solid"
                 color="secondary"
@@ -152,7 +151,7 @@ export function NewskieDialog({
                 <ButtonText>
                   <Trans>Close</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             )}
           </View>
 

src/components/NormalizedRNGHPressable.web.tsx

@@ -1,3 +1,3 @@
-import {Pressable as NormalizedPressable} from 'react-native'
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
 
-export {NormalizedPressable}
+export {NormalizedRNGHPressable}

src/components/Prompt.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-import {View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonColor, ButtonText} from '#/components/Button'
-import {ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -123,14 +121,14 @@ export function Cancel({
   }, [close])
 
   return (
-    <BottomSheetButton
+    <Button
       variant="solid"
       color="secondary"
       size={gtMobile ? 'small' : 'large'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
       <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
-    </BottomSheetButton>
+    </Button>
   )
 }
 
@@ -147,7 +145,7 @@ export function Action({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onPress: (e: PressableEvent) => void
+  onPress: (e: GestureResponderEvent) => void
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -159,14 +157,14 @@ export function Action({
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(
-    (e: PressableEvent) => {
+    (e: GestureResponderEvent) => {
       close(() => onPress?.(e))
     },
     [close, onPress],
   )
 
   return (
-    <BottomSheetButton
+    <Button
       variant="solid"
       color={color}
       size={gtMobile ? 'small' : 'large'}
@@ -174,7 +172,7 @@ export function Action({
       onPress={handleOnPress}
       testID={testID}>
       <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
-    </BottomSheetButton>
+    </Button>
   )
 }
 
@@ -201,7 +199,7 @@ export function Basic({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onConfirm: (e: PressableEvent) => void
+  onConfirm: (e: GestureResponderEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
   withoutPortal?: boolean

src/components/ReportDialog/SelectLabelerView.tsx

@@ -6,8 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, useButtonContext} from '#/components/Button'
-import {useButtonContext} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import * as LabelingServiceCard from '#/components/LabelingServiceCard'
 import {Text} from '#/components/Typography'
@@ -39,12 +38,12 @@ export function SelectLabelerView({
       <View style={[a.gap_sm]}>
         {props.labelers.map(labeler => {
           return (
-            <BottomSheetButton
+            <Button
               key={labeler.creator.did}
               label={_(msg`Send report to ${labeler.creator.displayName}`)}
               onPress={() => props.onSelectLabeler(labeler.creator.did)}>
               <LabelerButton labeler={labeler} />
-            </BottomSheetButton>
+            </Button>
           )
         })}
       </View>

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -10,8 +10,12 @@ import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {
-import {ButtonIcon, ButtonText, useButtonContext} from '#/components/Button'
+  Button,
+  ButtonIcon,
+  ButtonText,
+  useButtonContext,
+} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {
   ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
@@ -68,7 +72,7 @@ export function SelectReportOptionView({
   return (
     <View style={[a.gap_lg]}>
       {props.labelers?.length > 1 ? (
-        <BottomSheetButton
+        <Button
           size="small"
           variant="solid"
           color="secondary"
@@ -76,7 +80,7 @@ export function SelectReportOptionView({
           label={_(msg`Go back to previous step`)}
           onPress={props.goBack}>
           <ButtonIcon icon={ChevronLeft} />
-        </BottomSheetButton>
+        </Button>
       ) : null}
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
@@ -91,7 +95,7 @@ export function SelectReportOptionView({
       <View style={[a.gap_sm]}>
         {reportOptions.map(reportOption => {
           return (
-            <BottomSheetButton
+            <Button
               key={reportOption.reason}
               testID={reportOption.reason}
               label={_(msg`Create report for ${reportOption.title}`)}
@@ -100,7 +104,7 @@ export function SelectReportOptionView({
                 title={reportOption.title}
                 description={reportOption.description}
               />
-            </BottomSheetButton>
+            </Button>
           )
         })}
 

src/components/ReportDialog/SubmitView.tsx

@@ -10,8 +10,7 @@ import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, native, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -102,7 +101,7 @@ export function SubmitView({
 
   return (
     <View style={[a.gap_2xl]}>
-      <BottomSheetButton
+      <Button
         size="small"
         variant="solid"
         color="secondary"
@@ -110,7 +109,7 @@ export function SubmitView({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={ChevronLeft} />
-      </BottomSheetButton>
+      </Button>
 
       <View
         style={[
@@ -214,7 +213,7 @@ export function SubmitView({
             </Text>
           ))}
 
-        <BottomSheetButton
+        <Button
           testID="sendReportBtn"
           size="large"
           variant="solid"
@@ -226,7 +225,7 @@ export function SubmitView({
             <Trans>Send report</Trans>
           </ButtonText>
           {submitting && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </View>
   )

src/components/ReportDialog/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Pressable, ScrollView, View} from 'react-native'
+import {Pressable, View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/StarterPack/QrCodeDialog.tsx

@@ -13,8 +13,7 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -166,7 +165,7 @@ export function QrCodeDialog({
                 ) : (
                   <View
                     style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                    <BottomSheetButton
+                    <Button
                       label={_(msg`Copy QR code`)}
                       variant="solid"
                       color="secondary"
@@ -175,8 +174,8 @@ export function QrCodeDialog({
                       <ButtonText>
                         {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
                       </ButtonText>
-                    </BottomSheetButton>
+                    </Button>
-                    <BottomSheetButton
+                    <Button
                       label={_(msg`Save QR code`)}
                       variant="solid"
                       color="secondary"
@@ -185,7 +184,7 @@ export function QrCodeDialog({
                       <ButtonText>
                         <Trans>Save</Trans>
                       </ButtonText>
-                    </BottomSheetButton>
+                    </Button>
                   </View>
                 )}
               </>

src/components/StarterPack/ShareDialog.tsx

@@ -15,8 +15,7 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -120,7 +119,7 @@ function ShareDialogInner({
                 a.gap_md,
                 isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
               ]}>
-              <BottomSheetButton
+              <Button
                 label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
                 variant="solid"
                 color="secondary"
@@ -130,8 +129,8 @@ function ShareDialogInner({
                 <ButtonText>
                   {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
-              <BottomSheetButton
+              <Button
                 label={_(msg`Share QR code`)}
                 variant="solid"
                 color="secondary"
@@ -145,9 +144,9 @@ function ShareDialogInner({
                 <ButtonText>
                   <Trans>Share QR code</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
               {isNative && (
-                <BottomSheetButton
+                <Button
                   label={_(msg`Save image`)}
                   variant="ghost"
                   color="secondary"
@@ -157,7 +156,7 @@ function ShareDialogInner({
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
               )}
             </View>
           </View>

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -12,8 +12,7 @@ import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {
   WizardFeedCard,
@@ -112,7 +111,7 @@ export function WizardEditListDialog({
             </Text>
             <View style={{width: 60}}>
               {isWeb && (
-                <BottomSheetButton
+                <Button
                   label={_(msg`Close`)}
                   variant="ghost"
                   color="primary"
@@ -121,7 +120,7 @@ export function WizardEditListDialog({
                   <ButtonText>
                     <Trans>Close</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
               )}
             </View>
           </View>

src/components/StarterPack/Wizard/WizardListCard.tsx

@@ -19,8 +19,7 @@ import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
@@ -99,7 +98,7 @@ function WizardListCard({
       {btnType === 'checkbox' ? (
         <Checkbox />
       ) : !disabled ? (
-        <BottomSheetButton
+        <Button
           label={_(msg`Remove`)}
           variant="solid"
           color="secondary"
@@ -109,7 +108,7 @@ function WizardListCard({
           <ButtonText>
             <Trans>Remove</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       ) : null}
     </Toggle.Item>
   )

src/components/TagMenu/index.tsx

@@ -13,8 +13,7 @@ import {
   useUpsertMutedWordsMutation,
 } from '#/state/queries/preferences'
 import {atoms as a, native, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
@@ -212,7 +211,7 @@ export function TagMenu({
                   <>
                     <Divider />
 
-                    <BottomSheetButton
+                    <Button
                       label={
                         isMuted
                           ? _(msg`Unmute all ${displayTag} posts`)
@@ -266,12 +265,12 @@ export function TagMenu({
                           <Trans>posts</Trans>
                         </Text>
                       </View>
-                    </BottomSheetButton>
+                    </Button>
                   </>
                 ) : null}
               </View>
 
-              <BottomSheetButton
+              <Button
                 label={_(msg`Close this dialog`)}
                 size="small"
                 variant="ghost"
@@ -280,7 +279,7 @@ export function TagMenu({
                 <ButtonText>
                   <Trans>Cancel</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             </>
           )}
         </Dialog.Inner>

src/components/WhoCanReply.tsx

@@ -17,7 +17,7 @@ import {
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {
@@ -82,7 +82,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
 
   return (
     <>
-      <BottomSheetButton
+      <Button
         label={
           isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
         }
@@ -98,8 +98,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             })
           : {})}
         hitSlop={HITSLOP_10}>
-        {/* @TODO DIALOG REFACTOR hovered */}
+        {({hovered}) => (
-        {({pressed}) => (
           <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
             <Icon
               color={t.palette.contrast_400}
@@ -111,7 +110,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
                 a.text_sm,
                 a.leading_tight,
                 t.atoms.text_contrast_medium,
-                pressed && a.underline,
+                hovered && a.underline,
               ]}>
               {description}
             </Text>
@@ -121,7 +120,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             )}
           </View>
         )}
-      </BottomSheetButton>
+      </Button>
 
       {isThreadAuthor ? (
         <PostInteractionSettingsDialog

src/components/dialogs/BirthDateSettings.tsx

@@ -14,10 +14,9 @@ import {
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {DateInput} from '#/view/com/util/forms/DateInput'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
-import {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
@@ -114,7 +113,7 @@ function BirthdayInner({
       ) : undefined}
 
       <View style={isWeb && [a.flex_row, a.justify_end]}>
-        <BottomSheetButton
+        <Button
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
           size="large"
           onPress={onSave}
@@ -124,7 +123,7 @@ function BirthdayInner({
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </View>
   )

src/components/dialogs/Embed.tsx

@@ -8,13 +8,12 @@ import {EMBED_SCRIPT} from '#/lib/constants'
 import {niceDate} from '#/lib/strings/time'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets'
 import {Text} from '#/components/Typography'
-import {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 
 type EmbedDialogProps = {
   control: Dialog.DialogControlProps
@@ -118,7 +117,7 @@ function EmbedDialogInner({
             />
           </TextField.Root>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Copy code`)}
           color="primary"
           variant="solid"
@@ -141,7 +140,7 @@ function EmbedDialogInner({
               <Trans>Copy code</Trans>
             </ButtonText>
           )}
-        </BottomSheetButton>
+        </Button>
       </View>
       <Dialog.Close />
     </Dialog.Inner>

src/components/dialogs/EmbedConsent.tsx

@@ -10,9 +10,8 @@ import {
 } from '#/lib/strings/embed-player'
 import {useSetExternalEmbedPref} from '#/state/preferences'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
-import {ButtonText} from '../Button'
+import {Button, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function EmbedConsentDialog({
@@ -76,30 +75,33 @@ export function EmbedConsentDialog({
           </View>
         </View>
         <View style={a.gap_md}>
-          <BottomSheetButton
+          <Button
             style={gtMobile && a.flex_1}
             label={_(msg`Enable external media`)}
             onPress={onShowAllPress}
+            onAccessibilityEscape={control.close}
             color="primary"
             size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable external media</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
-          <BottomSheetButton
+          <Button
             style={gtMobile && a.flex_1}
             label={_(msg`Enable this source only`)}
             onPress={onShowPress}
+            onAccessibilityEscape={control.close}
             color="secondary"
             size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable {externalEmbedLabels[source]} only</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
-          <BottomSheetButton
+          <Button
             label={_(msg`No thanks`)}
+            onAccessibilityEscape={control.close}
             onPress={onHidePress}
             color="secondary"
             size="large"
@@ -107,7 +109,7 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>No thanks</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>

src/components/dialogs/GifSelect.tsx

@@ -20,13 +20,12 @@ import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {ListMethods} from '#/view/com/util/List'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
 
@@ -149,7 +148,7 @@ function GifList({
         />
 
         {!gtMobile && isWeb && (
-          <BottomSheetButton
+          <Button
             size="small"
             variant="ghost"
             color="secondary"
@@ -157,7 +156,7 @@ function GifList({
             onPress={() => control.close()}
             label={_(msg`Close GIF dialog`)}>
             <ButtonIcon icon={Arrow} size="md" />
-          </BottomSheetButton>
+          </Button>
         )}
 
         <TextField.Root>
@@ -257,7 +256,7 @@ function DialogError({details}: {details?: string}) {
         )}
         details={details}
       />
-      <BottomSheetButton
+      <Button
         label={_(msg`Close dialog`)}
         onPress={() => control.close()}
         color="primary"
@@ -266,7 +265,7 @@ function DialogError({details}: {details?: string}) {
         <ButtonText>
           <Trans>Close</Trans>
         </ButtonText>
-      </BottomSheetButton>
+      </Button>
     </Dialog.ScrollableInner>
   )
 }

src/components/dialogs/MutedWords.tsx

@@ -19,8 +19,7 @@ import {
   ViewStyleProp,
   web,
 } from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Divider} from '#/components/Divider'
@@ -324,7 +323,7 @@ function MutedWordsInner() {
           </View>
 
           <View style={[a.pt_xs]}>
-            <BottomSheetButton
+            <Button
               disabled={isPending || !field}
               label={_(msg`Add mute word for configured settings`)}
               size="large"
@@ -336,7 +335,7 @@ function MutedWordsInner() {
                 <Trans>Add</Trans>
               </ButtonText>
               <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
-            </BottomSheetButton>
+            </Button>
           </View>
 
           {error && (
@@ -527,7 +526,7 @@ function MutedWordRow({
           )}
         </View>
 
-        <BottomSheetButton
+        <Button
           label={_(msg`Remove mute word from your list`)}
           size="tiny"
           shape="round"
@@ -536,7 +535,7 @@ function MutedWordRow({
           onPress={() => control.open()}
           style={[a.ml_sm]}>
           <ButtonIcon icon={isPending ? Loader : X} />
-        </BottomSheetButton>
+        </Button>
       </View>
     </>
   )

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -30,8 +30,7 @@ import {
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
@@ -231,6 +230,7 @@ export function PostInteractionSettingsForm({
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
+  const control = Dialog.useDialogContext()
   const {data: lists} = useMyListsQuery('curate')
   const [quotesEnabled, setQuotesEnabled] = React.useState(
     !(
@@ -434,16 +434,17 @@ export function PostInteractionSettingsForm({
         </View>
       </View>
 
-      <BottomSheetButton
+      <Button
         label={_(msg`Save`)}
         onPress={onSave}
+        onAccessibilityEscape={control.close}
         color="primary"
         size="large"
         variant="solid"
         style={a.mt_xl}>
         <ButtonText>{_(msg`Save`)}</ButtonText>
         {isSaving && <ButtonIcon icon={Loader} position="right" />}
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
@@ -463,7 +464,7 @@ function Selectable({
 }) {
   const t = useTheme()
   return (
-    <BottomSheetButton
+    <Button
       disabled={disabled}
       onPress={onPress}
       label={label}
@@ -473,8 +474,7 @@ function Selectable({
         checked: isSelected,
       }}
       style={a.flex_1}>
-      {/* @TODO DIALOG REFACTOR hovered focused */}
+      {({hovered, focused}) => (
-      {({pressed}) => (
         <View
           style={[
             a.flex_1,
@@ -485,7 +485,7 @@ function Selectable({
             a.p_md,
             {height: 40}, // for consistency with checkmark icon visible or not
             t.atoms.bg_contrast_50,
-            pressed && t.atoms.bg_contrast_100,
+            (hovered || focused) && t.atoms.bg_contrast_100,
             isSelected && {
               backgroundColor: t.palette.primary_100,
             },
@@ -499,7 +499,7 @@ function Selectable({
           )}
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
 

src/components/dialogs/Signin.tsx

@@ -9,8 +9,7 @@ import {useCloseAllActiveElements} from '#/state/util'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Text} from '#/components/Typography'
@@ -78,7 +77,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
         </Text>
 
         <View style={[a.flex_col, a.gap_md]}>
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="primary"
             size="large"
@@ -87,9 +86,9 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Create an account</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
 
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="secondary"
             size="large"
@@ -98,7 +97,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Sign in</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
 
         {isNative && <View style={{height: 10}} />}

src/components/dms/MessagesNUX.tsx

@@ -9,8 +9,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Message_Stroke2_Corner0_Rounded} from '#/components/icons/Message'
@@ -157,7 +156,7 @@ function DialogInner({
             </Toggle.Group>
           </View>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Start chatting`)}
           accessibilityHint={_(msg`Close modal`)}
           size="large"
@@ -167,7 +166,7 @@ function DialogInner({
           <ButtonText>
             <Trans>Get started</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
       <Dialog.Close />
     </Dialog.ScrollableInner>

src/components/dms/dialogs/SearchablePeopleList.tsx

@@ -21,7 +21,7 @@ import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -254,7 +254,7 @@ export function SearchablePeopleList({
             a.justify_center,
             {height: 32},
           ]}>
-          <BottomSheetButton
+          <Button
             label={_(msg`Close`)}
             size="small"
             shape="round"
@@ -264,7 +264,6 @@ export function SearchablePeopleList({
               a.absolute,
               a.z_20,
               native({
-                top: 2,
                 left: -7,
               }),
               web({
@@ -277,7 +276,7 @@ export function SearchablePeopleList({
             ) : (
               <ChevronLeft size="md" fill={t.palette.contrast_500} />
             )}
-          </BottomSheetButton>
+          </Button>
           <Text
             style={[
               a.z_10,
@@ -364,11 +363,11 @@ function ProfileCard({
   }, [onPress, profile.did])
 
   return (
-    <BottomSheetButton
+    <Button
       disabled={!enabled}
       label={_(msg`Start chat with ${displayName}`)}
       onPress={handleOnPress}>
-      {({pressed}) => (
+      {({hovered, pressed, focused}) => (
         <View
           style={[
             a.flex_1,
@@ -377,11 +376,12 @@ function ProfileCard({
             a.gap_md,
             a.align_center,
             a.flex_row,
-            // @TODO DIALOG REFACTOR focused hovered
             !enabled
               ? {opacity: 0.5}
-              : pressed
+              : pressed || focused
               ? t.atoms.bg_contrast_25
+              : hovered
+              ? t.atoms.bg_contrast_50
               : t.atoms.bg,
           ]}>
           <UserAvatar
@@ -404,7 +404,7 @@ function ProfileCard({
           </View>
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
 

src/components/forms/DateField/index.tsx

@@ -5,8 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
@@ -73,7 +72,7 @@ export function DateField({
                 accessibilityHint={accessibilityHint}
               />
             </View>
-            <BottomSheetButton
+            <Button
               label={_(msg`Done`)}
               onPress={() => control.close()}
               size="large"
@@ -82,7 +81,7 @@ export function DateField({
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/components/intents/VerifyEmailIntentDialog.tsx

@@ -5,8 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
@@ -107,7 +106,7 @@ function Inner({control}: {control: DialogControlProps}) {
         )}
         {status !== 'loading' ? (
           <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
-            <BottomSheetButton
+            <Button
               label={_(msg`Close`)}
               onPress={() => control.close()}
               variant="solid"
@@ -117,9 +116,9 @@ function Inner({control}: {control: DialogControlProps}) {
               <ButtonText>
                 <Trans>Close</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
             {status === 'failure' ? (
-              <BottomSheetButton
+              <Button
                 label={_(msg`Resend Verification Email`)}
                 onPress={onPressResendEmail}
                 variant="solid"
@@ -130,7 +129,7 @@ function Inner({control}: {control: DialogControlProps}) {
                   <Trans>Resend Email</Trans>
                 </ButtonText>
                 {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </BottomSheetButton>
+              </Button>
             ) : null}
           </View>
         ) : null}

src/components/moderation/LabelsOnMeDialog.tsx

@@ -13,9 +13,8 @@ import {logger} from '#/logger'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
@@ -141,7 +140,7 @@ function Label({
         </View>
         {!isSelfLabel && (
           <View>
-            <BottomSheetButton
+            <Button
               variant="solid"
               color="secondary"
               size="small"
@@ -150,7 +149,7 @@ function Label({
               <ButtonText>
                 <Trans>Appeal</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         )}
       </View>
@@ -279,7 +278,7 @@ function AppealForm({
             ? [a.flex_row, a.justify_between]
             : [{flexDirection: 'column-reverse'}, a.gap_sm]
         }>
-        <BottomSheetButton
+        <Button
           testID="backBtn"
           variant="solid"
           color="secondary"
@@ -287,8 +286,8 @@ function AppealForm({
           onPress={onPressBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
-        </BottomSheetButton>
+        </Button>
-        <BottomSheetButton
+        <Button
           testID="submitBtn"
           variant="solid"
           color="primary"
@@ -297,7 +296,7 @@ function AppealForm({
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </>
   )

src/screens/Onboarding/StepProfile/index.tsx

@@ -30,7 +30,6 @@ import {
   PlaceholderCanvasRef,
 } from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {IconCircle} from '#/components/IconCircle'
@@ -312,7 +311,7 @@ export function StepProfile() {
             />
           </View>
           <View style={[a.pt_4xl]}>
-            <BottomSheetButton
+            <Button
               variant="solid"
               color="primary"
               size="large"
@@ -321,7 +320,7 @@ export function StepProfile() {
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/view/com/auth/server-input/index.tsx

@@ -6,8 +6,7 @@ import {useLingui} from '@lingui/react'
 import {BSKY_SERVICE} from '#/lib/constants'
 import * as persisted from '#/state/persisted'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
@@ -130,7 +129,7 @@ export function ServerInputDialog({
               {pdsAddressHistory.length > 0 && (
                 <View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
                   {pdsAddressHistory.map(uri => (
-                    <BottomSheetButton
+                    <Button
                       key={uri}
                       variant="ghost"
                       color="primary"
@@ -138,7 +137,7 @@ export function ServerInputDialog({
                       style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
                       onPress={() => setCustomAddress(uri)}>
                       <ButtonText>{uri}</ButtonText>
-                    </BottomSheetButton>
+                    </Button>
                   ))}
                 </View>
               )}
@@ -166,7 +165,7 @@ export function ServerInputDialog({
           </View>
 
           <View style={gtMobile && [a.flex_row, a.justify_end]}>
-            <BottomSheetButton
+            <Button
               testID="doneBtn"
               variant="outline"
               color="primary"
@@ -174,7 +173,7 @@ export function ServerInputDialog({
               onPress={() => control.close()}
               label={_(msg`Done`)}>
               <ButtonText>{_(msg`Done`)}</ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </View>
       </Dialog.ScrollableInner>

src/view/com/composer/GifAltText.tsx

@@ -14,8 +14,7 @@ import {
 import {enforceLen} from '#/lib/strings/helpers'
 import {Gif} from '#/state/queries/tenor'
 import {atoms as a, native, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -155,7 +154,7 @@ function AltTextInner({
               />
             </TextField.Root>
           </View>
-          <BottomSheetButton
+          <Button
             label={_(msg`Save`)}
             size="large"
             color="primary"
@@ -164,7 +163,7 @@ function AltTextInner({
             <ButtonText>
               <Trans>Save</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
         {/* below the text input to force tab order */}
         <View>

src/view/com/composer/photos/EditImageDialog.web.tsx

@@ -12,8 +12,7 @@ import {
   manipulateImage,
 } from '#/state/gallery'
 import {atoms as a} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 import {EditImageDialogProps} from './EditImageDialog'
@@ -72,7 +71,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
       </View>
 
       <View style={[a.mt_md, a.gap_md]}>
-        <BottomSheetButton
+        <Button
           disabled={!isNew}
           label={_(msg`Save`)}
           size="large"
@@ -82,7 +81,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
     </Dialog.Inner>
   )

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -8,8 +8,7 @@ import {MAX_ALT_TEXT} from '#/lib/constants'
 import {isWeb} from '#/platform/detection'
 import {ComposerImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonText} from '#/components/Button'
-import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Text} from '#/components/Typography'
@@ -103,7 +102,7 @@ const ImageAltTextInner = ({
             />
           </TextField.Root>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Save`)}
           disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
           size="large"
@@ -113,7 +112,7 @@ const ImageAltTextInner = ({
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
     </Dialog.ScrollableInner>
   )

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -10,7 +10,6 @@ import {LANGUAGES} from '#/locale/languages'
 import {isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -165,7 +164,7 @@ function SubtitleDialogInner({
         )}
 
         <View style={web([a.flex_row, a.justify_end])}>
-          <BottomSheetButton
+          <Button
             label={_(msg`Done`)}
             size={isWeb ? 'small' : 'large'}
             color="primary"
@@ -178,7 +177,7 @@ function SubtitleDialogInner({
             <ButtonText>
               <Trans>Done</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
       </View>
       <Dialog.Close />
@@ -258,7 +257,7 @@ function SubtitleFileRow({
         </View>
       </View>
 
-      <BottomSheetButton
+      <Button
         label={_(msg`Remove subtitle file`)}
         size="tiny"
         shape="round"
@@ -269,7 +268,7 @@ function SubtitleFileRow({
         }
         style={[a.ml_sm]}>
         <ButtonIcon icon={X} />
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -7,7 +7,6 @@ import {POST_CTRL_HITSLOP} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
 import {useRequireAuth} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
@@ -93,7 +92,7 @@ let RepostButton = ({
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
-              <BottomSheetButton
+              <Button
                 style={[a.justify_start, a.px_md]}
                 label={
                   isReposted
@@ -116,8 +115,8 @@ let RepostButton = ({
                     ? _(msg`Remove repost`)
                     : _(msg({message: `Repost`, context: 'action'}))}
                 </Text>
-              </BottomSheetButton>
+              </Button>
-              <BottomSheetButton
+              <Button
                 disabled={embeddingDisabled}
                 testID="quoteBtn"
                 style={[a.justify_start, a.px_md]}
@@ -153,16 +152,16 @@ let RepostButton = ({
                     ? _(msg`Quote posts disabled`)
                     : _(msg`Quote post`)}
                 </Text>
-              </BottomSheetButton>
+              </Button>
             </View>
-            <BottomSheetButton
+            <Button
               label={_(msg`Cancel quote post`)}
               onPress={close}
               size="large"
               variant="solid"
               color="primary">
               <ButtonText>{_(msg`Cancel`)}</ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>

src/view/screens/Settings/DisableEmail2FADialog.tsx

@@ -9,8 +9,7 @@ import {useAgent, useSession} from '#/state/session'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
@@ -109,7 +108,7 @@ export function DisableEmail2FADialog({
 
           {stage === Stages.Email ? (
             <View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}>
-              <BottomSheetButton
+              <Button
                 testID="sendEmailButton"
                 variant="solid"
                 color="primary"
@@ -121,8 +120,8 @@ export function DisableEmail2FADialog({
                   <Trans>Send verification email</Trans>
                 </ButtonText>
                 {isProcessing && <ButtonIcon icon={Loader} />}
-              </BottomSheetButton>
+              </Button>
-              <BottomSheetButton
+              <Button
                 testID="haveCodeButton"
                 variant="ghost"
                 color="primary"
@@ -133,7 +132,7 @@ export function DisableEmail2FADialog({
                 <ButtonText>
                   <Trans>I have a code</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             </View>
           ) : stage === Stages.ConfirmCode ? (
             <View>
@@ -158,7 +157,7 @@ export function DisableEmail2FADialog({
                 </TextField.Root>
               </View>
               <View style={gtMobile && [a.flex_row, a.justify_end]}>
-                <BottomSheetButton
+                <Button
                   testID="resendCodeBtn"
                   variant="ghost"
                   color="primary"
@@ -169,8 +168,8 @@ export function DisableEmail2FADialog({
                   <ButtonText>
                     <Trans>Resend email</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
-                <BottomSheetButton
+                <Button
                   testID="confirmBtn"
                   variant="solid"
                   color="primary"
@@ -182,7 +181,7 @@ export function DisableEmail2FADialog({
                     <Trans>Confirm</Trans>
                   </ButtonText>
                   {isProcessing && <ButtonIcon icon={Loader} />}
-                </BottomSheetButton>
+                </Button>
               </View>
             </View>
           ) : undefined}

src/view/screens/Settings/ExportCarDialog.tsx

@@ -8,8 +8,7 @@ import {logger} from '#/logger'
 import {useAgent} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
@@ -69,7 +68,7 @@ export function ExportCarDialog({
             </Trans>
           </Text>
 
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="primary"
             size="large"
@@ -80,7 +79,7 @@ export function ExportCarDialog({
               <Trans>Download CAR file</Trans>
             </ButtonText>
             {loading && <ButtonIcon icon={Loader} />}
-          </BottomSheetButton>
+          </Button>
 
           <Text
             style={[