acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

replace all buttons with BottomSheetButton

Browse Source
This commit is contained in:
Hailey
2024-10-01 19:14:12 -07:00
parent baf1923ac6
commit a3737f0015
33 changed files with 533 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BottomSheetButton.tsx
+110
View File
@@ -0,0 +1,110 @@
import React from 'react'
import {AccessibilityProps, ViewStyle} from 'react-native'
import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
import {
BlueskyBottomSheetPressable,
BueskyBottomSheetPressableProps,
} from '@haileyok/bluesky-bottom-sheet'
import {atoms as a} from '#/alf'
import {
ButtonContext,
useSharedButtonStyles,
VariantProps,
} from '#/components/Button'
export function BottomSheetButton({
children,
label,
color,
variant,
shape = 'default',
size,
disabled,
style,
...rest
}: BueskyBottomSheetPressableProps &
AccessibilityProps &
VariantProps & {
/**
* For a11y, try to make this descriptive and clear
*/
label: string
}) {
const [state, setState] = React.useState({
pressed: false,
hovered: false,
focused: false,
})
const onPressInOuter = rest.onPressIn
const onPressIn = React.useCallback(
(e: PressableEvent) => {
setState(s => ({
...s,
pressed: true,
}))
onPressInOuter?.(e)
},
[setState, onPressInOuter],
)
const onPressOutOuter = rest.onPressOut
const onPressOut = React.useCallback(
(e: PressableEvent) => {
setState(s => ({
...s,
pressed: false,
}))
onPressOutOuter?.(e)
},
[setState, onPressOutOuter],
)
const {baseStyles, hoverStyles} = useSharedButtonStyles({
/**
* For a11y, try to make this descriptive and clear
*/
color,
variant,
shape,
size,
disabled,
})
const context = React.useMemo<ButtonContext>(
() => ({
...state,
variant,
color,
size,
disabled: disabled || false,
}),
[state, variant, color, size, disabled],
)
return (
<BlueskyBottomSheetPressable
style={[
a.flex_row,
a.align_center,
a.justify_center,
baseStyles,
style as ViewStyle,
...(state.hovered || state.pressed ? [hoverStyles] : []),
]}
aria-label={label}
aria-pressed={state.pressed}
accessibilityLabel={label}
accessibilityHint={undefined}
accessibilityState={{
disabled: disabled || false,
}}
onPressIn={onPressIn}
onPressOut={onPressOut}
{...rest}>
<ButtonContext.Provider value={context}>
{typeof children === 'function' ? children(context) : children}
</ButtonContext.Provider>
</BlueskyBottomSheetPressable>
)
}
src/components/BottomSheetButton.web.tsx
+3
View File
@@ -0,0 +1,3 @@
import {Button as BottomSheetButton} from '#/components/Button'
export {BottomSheetButton}
src/components/Button.tsx
+243 -222
View File
@@ -89,7 +89,8 @@ export type ButtonProps = Pick<
children: NonTextElements | ((context: ButtonContext) => NonTextElements)
}
export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
export type ButtonTextProps = TextProps &
VariantProps & {disabled?: boolean | null}
const Context = React.createContext<VariantProps & ButtonState>({
hovered: false,
@@ -97,6 +98,7 @@ const Context = React.createContext<VariantProps & ButtonState>({
pressed: false,
disabled: false,
})
export const ButtonContext = Context
export function useButtonContext() {
return React.useContext(Context)
@@ -118,7 +120,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
},
ref,
) => {
const t = useTheme()
const [state, setState] = React.useState({
pressed: false,
hovered: false,
@@ -182,226 +183,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
}))
}, [setState])
const {baseStyles, hoverStyles} = React.useMemo(() => {
const baseStyles: ViewStyle[] = []
const hoverStyles: ViewStyle[] = []
if (color === 'primary') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.primary_500,
})
hoverStyles.push({
backgroundColor: t.palette.primary_600,
})
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.primary_700,
dim: t.palette.primary_300,
dark: t.palette.primary_300,
}),
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.primary_500,
})
hoverStyles.push(a.border, {
backgroundColor: t.palette.primary_50,
})
} else {
baseStyles.push(a.border, {
borderColor: t.palette.primary_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.primary_100,
})
}
}
} else if (color === 'secondary') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push(t.atoms.bg_contrast_25)
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(t.atoms.bg_contrast_100)
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_300,
})
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
})
}
}
} else if (color === 'secondary_inverted') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.contrast_900,
})
hoverStyles.push({
backgroundColor: t.palette.contrast_950,
})
} else {
baseStyles.push({
backgroundColor: t.palette.contrast_600,
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_300,
})
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
})
}
}
} else if (color === 'negative') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.negative_500,
})
hoverStyles.push({
backgroundColor: t.palette.negative_600,
})
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.negative_700,
dim: t.palette.negative_300,
dark: t.palette.negative_300,
}),
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.negative_500,
})
hoverStyles.push(a.border, {
backgroundColor: t.palette.negative_50,
})
} else {
baseStyles.push(a.border, {
borderColor: t.palette.negative_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.negative_100,
})
}
}
}
if (shape === 'default') {
if (size === 'large') {
baseStyles.push({
paddingVertical: 13,
paddingHorizontal: 20,
borderRadius: 8,
gap: 8,
})
} else if (size === 'small') {
baseStyles.push({
paddingVertical: 8,
paddingHorizontal: 12,
borderRadius: 6,
gap: 6,
})
} else if (size === 'tiny') {
baseStyles.push({
paddingVertical: 4,
paddingHorizontal: 8,
borderRadius: 4,
gap: 4,
})
}
} else if (shape === 'round' || shape === 'square') {
if (size === 'large') {
if (shape === 'round') {
baseStyles.push({height: 46, width: 46})
} else {
baseStyles.push({height: 44, width: 44})
}
} else if (size === 'small') {
if (shape === 'round') {
baseStyles.push({height: 36, width: 36})
} else {
baseStyles.push({height: 34, width: 34})
}
} else if (size === 'tiny') {
if (shape === 'round') {
baseStyles.push({height: 22, width: 22})
} else {
baseStyles.push({height: 21, width: 21})
}
}
if (shape === 'round') {
baseStyles.push(a.rounded_full)
} else if (shape === 'square') {
if (size === 'tiny') {
baseStyles.push(a.rounded_xs)
} else {
baseStyles.push(a.rounded_sm)
}
}
}
return {
baseStyles,
hoverStyles,
}
}, [t, variant, color, size, shape, disabled])
const {baseStyles, hoverStyles} = useSharedButtonStyles({
color,
variant,
disabled,
shape,
size,
})
const {gradientColors, gradientHoverColors, gradientLocations} =
React.useMemo(() => {
@@ -506,6 +294,239 @@ export const Button = React.forwardRef<View, ButtonProps>(
)
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[] = []
if (color === 'primary') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.primary_500,
})
hoverStyles.push({
backgroundColor: t.palette.primary_600,
})
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.primary_700,
dim: t.palette.primary_300,
dark: t.palette.primary_300,
}),
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.primary_500,
})
hoverStyles.push(a.border, {
backgroundColor: t.palette.primary_50,
})
} else {
baseStyles.push(a.border, {
borderColor: t.palette.primary_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.primary_100,
})
}
}
} else if (color === 'secondary') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push(t.atoms.bg_contrast_25)
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(t.atoms.bg_contrast_100)
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_300,
})
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
})
}
}
} else if (color === 'secondary_inverted') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.contrast_900,
})
hoverStyles.push({
backgroundColor: t.palette.contrast_950,
})
} else {
baseStyles.push({
backgroundColor: t.palette.contrast_600,
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_300,
})
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(a.border, {
borderColor: t.palette.contrast_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.contrast_25,
})
}
}
} else if (color === 'negative') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.negative_500,
})
hoverStyles.push({
backgroundColor: t.palette.negative_600,
})
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.negative_700,
dim: t.palette.negative_300,
dark: t.palette.negative_300,
}),
})
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
borderWidth: 1,
})
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.negative_500,
})
hoverStyles.push(a.border, {
backgroundColor: t.palette.negative_50,
})
} else {
baseStyles.push(a.border, {
borderColor: t.palette.negative_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: t.palette.negative_100,
})
}
}
}
if (shape === 'default') {
if (size === 'large') {
baseStyles.push({
paddingVertical: 13,
paddingHorizontal: 20,
borderRadius: 8,
gap: 8,
})
} else if (size === 'small') {
baseStyles.push({
paddingVertical: 8,
paddingHorizontal: 12,
borderRadius: 6,
gap: 6,
})
} else if (size === 'tiny') {
baseStyles.push({
paddingVertical: 4,
paddingHorizontal: 8,
borderRadius: 4,
gap: 4,
})
}
} else if (shape === 'round' || shape === 'square') {
if (size === 'large') {
if (shape === 'round') {
baseStyles.push({height: 46, width: 46})
} else {
baseStyles.push({height: 44, width: 44})
}
} else if (size === 'small') {
if (shape === 'round') {
baseStyles.push({height: 36, width: 36})
} else {
baseStyles.push({height: 34, width: 34})
}
} else if (size === 'tiny') {
if (shape === 'round') {
baseStyles.push({height: 22, width: 22})
} else {
baseStyles.push({height: 21, width: 21})
}
}
if (shape === 'round') {
baseStyles.push(a.rounded_full)
} else if (shape === 'square') {
if (size === 'tiny') {
baseStyles.push(a.rounded_xs)
} else {
baseStyles.push(a.rounded_sm)
}
}
}
return {
baseStyles,
hoverStyles,
}
}, [t, variant, color, size, shape, disabled])
return {baseStyles, hoverStyles}
}
export function useSharedButtonTextStyles() {
const t = useTheme()
const {color, variant, disabled, size} = useButtonContext()
src/components/NewskieDialog.tsx
+3 -2
View File
@@ -12,6 +12,7 @@ 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'
@@ -141,7 +142,7 @@ export function NewskieDialog({
) : null}
{isNative && (
<Button
<BottomSheetButton
label={_(msg`Close`)}
variant="solid"
color="secondary"
@@ -151,7 +152,7 @@ export function NewskieDialog({
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
)}
</View>
src/components/Prompt.tsx
+11 -9
View File
@@ -1,10 +1,12 @@
import React from 'react'
import {GestureResponderEvent, View} from 'react-native'
import {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 {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonColor, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Text} from '#/components/Typography'
@@ -115,14 +117,14 @@ export function Cancel({
}, [close])
return (
<Button
<BottomSheetButton
variant="solid"
color="secondary"
size={gtMobile ? 'small' : 'large'}
label={cta || _(msg`Cancel`)}
onPress={onPress}>
<ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
</Button>
</BottomSheetButton>
)
}
@@ -139,7 +141,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: ButtonProps['onPress']
onPress: (e: PressableEvent) => void
color?: ButtonColor
/**
* Optional i18n string. If undefined, it will default to "Confirm".
@@ -151,14 +153,14 @@ export function Action({
const {gtMobile} = useBreakpoints()
const {close} = Dialog.useDialogContext()
const handleOnPress = React.useCallback(
(e: GestureResponderEvent) => {
(e: PressableEvent) => {
close(() => onPress?.(e))
},
[close, onPress],
)
return (
<Button
<BottomSheetButton
variant="solid"
color={color}
size={gtMobile ? 'small' : 'large'}
@@ -166,7 +168,7 @@ export function Action({
onPress={handleOnPress}
testID={testID}>
<ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
</Button>
</BottomSheetButton>
)
}
@@ -192,7 +194,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: ButtonProps['onPress']
onConfirm: (e: PressableEvent) => void
confirmButtonColor?: ButtonColor
showCancel?: boolean
}>) {
src/components/ReportDialog/SelectReportOptionView.tsx
+6 -10
View File
@@ -10,12 +10,8 @@ import {DMCA_LINK} from '#/components/ReportDialog/const'
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {
Button,
ButtonIcon,
ButtonText,
useButtonContext,
} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonIcon, ButtonText, useButtonContext} from '#/components/Button'
import {Divider} from '#/components/Divider'
import {
ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
@@ -72,7 +68,7 @@ export function SelectReportOptionView({
return (
<View style={[a.gap_lg]}>
{props.labelers?.length > 1 ? (
<Button
<BottomSheetButton
size="small"
variant="solid"
color="secondary"
@@ -80,7 +76,7 @@ export function SelectReportOptionView({
label={_(msg`Go back to previous step`)}
onPress={props.goBack}>
<ButtonIcon icon={ChevronLeft} />
</Button>
</BottomSheetButton>
) : null}
<View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
@@ -95,7 +91,7 @@ export function SelectReportOptionView({
<View style={[a.gap_sm]}>
{reportOptions.map(reportOption => {
return (
<Button
<BottomSheetButton
key={reportOption.reason}
testID={reportOption.reason}
label={_(msg`Create report for ${reportOption.title}`)}
@@ -104,7 +100,7 @@ export function SelectReportOptionView({
title={reportOption.title}
description={reportOption.description}
/>
</Button>
</BottomSheetButton>
)
})}
src/components/ReportDialog/SubmitView.tsx
+6 -5
View File
@@ -10,7 +10,8 @@ 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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -100,7 +101,7 @@ export function SubmitView({
return (
<View style={[a.gap_2xl]}>
<Button
<BottomSheetButton
size="small"
variant="solid"
color="secondary"
@@ -108,7 +109,7 @@ export function SubmitView({
label={_(msg`Go back to previous step`)}
onPress={goBack}>
<ButtonIcon icon={ChevronLeft} />
</Button>
</BottomSheetButton>
<View
style={[
@@ -211,7 +212,7 @@ export function SubmitView({
</Text>
))}
<Button
<BottomSheetButton
testID="sendReportBtn"
size="large"
variant="solid"
@@ -223,7 +224,7 @@ export function SubmitView({
<Trans>Send report</Trans>
</ButtonText>
{submitting && <ButtonIcon icon={Loader} />}
</Button>
</BottomSheetButton>
</View>
</View>
)
src/components/StarterPack/QrCodeDialog.tsx
+6 -5
View File
@@ -13,7 +13,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {DialogControlProps} from '#/components/Dialog'
import {Loader} from '#/components/Loader'
@@ -165,7 +166,7 @@ export function QrCodeDialog({
) : (
<View
style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
<Button
<BottomSheetButton
label={_(msg`Copy QR code`)}
variant="solid"
color="secondary"
@@ -174,8 +175,8 @@ export function QrCodeDialog({
<ButtonText>
{isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
label={_(msg`Save QR code`)}
variant="solid"
color="secondary"
@@ -184,7 +185,7 @@ export function QrCodeDialog({
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
)}
</>
src/components/StarterPack/ShareDialog.tsx
+8 -7
View File
@@ -15,7 +15,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import {DialogControlProps} from '#/components/Dialog'
import * as Dialog from '#/components/Dialog'
import {Loader} from '#/components/Loader'
@@ -119,7 +120,7 @@ function ShareDialogInner({
a.gap_md,
isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
]}>
<Button
<BottomSheetButton
label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
variant="solid"
color="secondary"
@@ -129,8 +130,8 @@ function ShareDialogInner({
<ButtonText>
{isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
label={_(msg`Share QR code`)}
variant="solid"
color="secondary"
@@ -144,9 +145,9 @@ function ShareDialogInner({
<ButtonText>
<Trans>Share QR code</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
{isNative && (
<Button
<BottomSheetButton
label={_(msg`Save image`)}
variant="ghost"
color="secondary"
@@ -156,7 +157,7 @@ function ShareDialogInner({
<ButtonText>
<Trans>Save image</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
)}
</View>
</View>
src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+4 -3
View File
@@ -12,7 +12,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {
WizardFeedCard,
@@ -111,7 +112,7 @@ export function WizardEditListDialog({
</Text>
<View style={{width: 60}}>
{isWeb && (
<Button
<BottomSheetButton
label={_(msg`Close`)}
variant="ghost"
color="primary"
@@ -120,7 +121,7 @@ export function WizardEditListDialog({
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
)}
</View>
</View>
src/components/TagMenu/index.tsx
+6 -5
View File
@@ -13,7 +13,8 @@ import {
useUpsertMutedWordsMutation,
} from '#/state/queries/preferences'
import {atoms as a, native, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -211,7 +212,7 @@ export function TagMenu({
<>
<Divider />
<Button
<BottomSheetButton
label={
isMuted
? _(msg`Unmute all ${displayTag} posts`)
@@ -265,12 +266,12 @@ export function TagMenu({
<Trans>posts</Trans>
</Text>
</View>
</Button>
</BottomSheetButton>
</>
) : null}
</View>
<Button
<BottomSheetButton
label={_(msg`Close this dialog`)}
size="small"
variant="ghost"
@@ -279,7 +280,7 @@ export function TagMenu({
<ButtonText>
<Trans>Cancel</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</>
)}
</Dialog.Inner>
src/components/WhoCanReply.tsx
+6 -5
View File
@@ -17,7 +17,7 @@ import {
threadgateViewToAllowUISetting,
} from '#/state/queries/threadgate'
import {atoms as a, useTheme} from '#/alf'
import {Button} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import * as Dialog from '#/components/Dialog'
import {useDialogControl} from '#/components/Dialog'
import {
@@ -82,7 +82,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
return (
<>
<Button
<BottomSheetButton
label={
isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
}
@@ -98,7 +98,8 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
})
: {})}
hitSlop={HITSLOP_10}>
{({hovered}) => (
{/* @TODO DIALOG REFACTOR hovered */}
{({pressed}) => (
<View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
<Icon
color={t.palette.contrast_400}
@@ -110,7 +111,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
a.text_sm,
a.leading_tight,
t.atoms.text_contrast_medium,
hovered && a.underline,
pressed && a.underline,
]}>
{description}
</Text>
@@ -120,7 +121,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
)}
</View>
)}
</Button>
</BottomSheetButton>
{isThreadAuthor ? (
<PostInteractionSettingsDialog
src/components/dialogs/BirthDateSettings.tsx
+4 -3
View File
@@ -14,9 +14,10 @@ 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 {Button, ButtonIcon, ButtonText} from '../Button'
import {ButtonIcon, ButtonText} from '../Button'
import {Text} from '../Typography'
export function BirthDateSettingsDialog({
@@ -113,7 +114,7 @@ function BirthdayInner({
) : undefined}
<View style={isWeb && [a.flex_row, a.justify_end]}>
<Button
<BottomSheetButton
label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
size="large"
onPress={onSave}
@@ -123,7 +124,7 @@ function BirthdayInner({
{hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
</ButtonText>
{isPending && <ButtonIcon icon={Loader} />}
</Button>
</BottomSheetButton>
</View>
</View>
)
src/components/dialogs/Embed.tsx
+4 -3
View File
@@ -8,12 +8,13 @@ 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 {Button, ButtonIcon, ButtonText} from '../Button'
import {ButtonIcon, ButtonText} from '../Button'
type EmbedDialogProps = {
control: Dialog.DialogControlProps
@@ -117,7 +118,7 @@ function EmbedDialogInner({
/>
</TextField.Root>
</View>
<Button
<BottomSheetButton
label={_(msg`Copy code`)}
color="primary"
variant="solid"
@@ -140,7 +141,7 @@ function EmbedDialogInner({
<Trans>Copy code</Trans>
</ButtonText>
)}
</Button>
</BottomSheetButton>
</View>
<Dialog.Close />
</Dialog.Inner>
src/components/dialogs/EmbedConsent.tsx
+8 -7
View File
@@ -10,8 +10,9 @@ 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 {Button, ButtonText} from '../Button'
import {ButtonText} from '../Button'
import {Text} from '../Typography'
export function EmbedConsentDialog({
@@ -75,7 +76,7 @@ export function EmbedConsentDialog({
</View>
</View>
<View style={a.gap_md}>
<Button
<BottomSheetButton
style={gtMobile && a.flex_1}
label={_(msg`Enable external media`)}
onPress={onShowAllPress}
@@ -86,8 +87,8 @@ export function EmbedConsentDialog({
<ButtonText>
<Trans>Enable external media</Trans>
</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
style={gtMobile && a.flex_1}
label={_(msg`Enable this source only`)}
onPress={onShowPress}
@@ -98,8 +99,8 @@ export function EmbedConsentDialog({
<ButtonText>
<Trans>Enable {externalEmbedLabels[source]} only</Trans>
</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
label={_(msg`No thanks`)}
onAccessibilityEscape={control.close}
onPress={onHidePress}
@@ -109,7 +110,7 @@ export function EmbedConsentDialog({
<ButtonText>
<Trans>No thanks</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
<Dialog.Close />
</Dialog.ScrollableInner>
src/components/dialogs/GifSelect.tsx
+6 -5
View File
@@ -20,12 +20,13 @@ 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 {Button, ButtonIcon, ButtonText} from '../Button'
import {ButtonIcon, ButtonText} from '../Button'
import {ListFooter, ListMaybePlaceholder} from '../Lists'
import {GifPreview} from './GifSelect.shared'
@@ -148,7 +149,7 @@ function GifList({
/>
{!gtMobile && isWeb && (
<Button
<BottomSheetButton
size="small"
variant="ghost"
color="secondary"
@@ -156,7 +157,7 @@ function GifList({
onPress={() => control.close()}
label={_(msg`Close GIF dialog`)}>
<ButtonIcon icon={Arrow} size="md" />
</Button>
</BottomSheetButton>
)}
<TextField.Root>
@@ -256,7 +257,7 @@ function DialogError({details}: {details?: string}) {
)}
details={details}
/>
<Button
<BottomSheetButton
label={_(msg`Close dialog`)}
onPress={() => control.close()}
color="primary"
@@ -265,7 +266,7 @@ function DialogError({details}: {details?: string}) {
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</Dialog.ScrollableInner>
)
}
src/components/dialogs/MutedWords.tsx
+6 -5
View File
@@ -19,7 +19,8 @@ import {
ViewStyleProp,
web,
} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
import {Divider} from '#/components/Divider'
@@ -315,7 +316,7 @@ function MutedWordsInner() {
</View>
<View style={[a.pt_xs]}>
<Button
<BottomSheetButton
disabled={isPending || !field}
label={_(msg`Add mute word for configured settings`)}
size="large"
@@ -327,7 +328,7 @@ function MutedWordsInner() {
<Trans>Add</Trans>
</ButtonText>
<ButtonIcon icon={isPending ? Loader : Plus} position="right" />
</Button>
</BottomSheetButton>
</View>
{error && (
@@ -518,7 +519,7 @@ function MutedWordRow({
)}
</View>
<Button
<BottomSheetButton
label={_(msg`Remove mute word from your list`)}
size="tiny"
shape="round"
@@ -527,7 +528,7 @@ function MutedWordRow({
onPress={() => control.open()}
style={[a.ml_sm]}>
<ButtonIcon icon={isPending ? Loader : X} />
</Button>
</BottomSheetButton>
</View>
</>
)
src/components/dialogs/PostInteractionSettingsDialog.tsx
+9 -7
View File
@@ -30,7 +30,8 @@ import {
import {useAgent, useSession} from '#/state/session'
import * as Toast from '#/view/com/util/Toast'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Divider} from '#/components/Divider'
import * as Toggle from '#/components/forms/Toggle'
@@ -432,7 +433,7 @@ export function PostInteractionSettingsForm({
</View>
</View>
<Button
<BottomSheetButton
label={_(msg`Save`)}
onPress={onSave}
onAccessibilityEscape={control.close}
@@ -442,7 +443,7 @@ export function PostInteractionSettingsForm({
style={a.mt_xl}>
<ButtonText>{_(msg`Save`)}</ButtonText>
{isSaving && <ButtonIcon icon={Loader} position="right" />}
</Button>
</BottomSheetButton>
</View>
)
}
@@ -462,7 +463,7 @@ function Selectable({
}) {
const t = useTheme()
return (
<Button
<BottomSheetButton
disabled={disabled}
onPress={onPress}
label={label}
@@ -472,7 +473,8 @@ function Selectable({
checked: isSelected,
}}
style={a.flex_1}>
{({hovered, focused}) => (
{/* @TODO DIALOG REFACTOR hovered focused */}
{({pressed}) => (
<View
style={[
a.flex_1,
@@ -483,7 +485,7 @@ function Selectable({
a.p_md,
{height: 40}, // for consistency with checkmark icon visible or not
t.atoms.bg_contrast_50,
(hovered || focused) && t.atoms.bg_contrast_100,
pressed && t.atoms.bg_contrast_100,
isSelected && {
backgroundColor: t.palette.primary_100,
},
@@ -497,7 +499,7 @@ function Selectable({
)}
</View>
)}
</Button>
</BottomSheetButton>
)
}
src/components/dialogs/Signin.tsx
+6 -5
View File
@@ -9,7 +9,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
import {Text} from '#/components/Typography'
@@ -77,7 +78,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
</Text>
<View style={[a.flex_col, a.gap_md]}>
<Button
<BottomSheetButton
variant="solid"
color="primary"
size="large"
@@ -86,9 +87,9 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
<ButtonText>
<Trans>Create an account</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
<Button
<BottomSheetButton
variant="solid"
color="secondary"
size="large"
@@ -97,7 +98,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
<ButtonText>
<Trans>Sign in</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
{isNative && <View style={{height: 10}} />}
src/components/dms/MessagesNUX.tsx
+4 -3
View File
@@ -9,7 +9,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -156,7 +157,7 @@ function DialogInner({
</Toggle.Group>
</View>
</View>
<Button
<BottomSheetButton
label={_(msg`Start chatting`)}
accessibilityHint={_(msg`Close modal`)}
size="large"
@@ -166,7 +167,7 @@ function DialogInner({
<ButtonText>
<Trans>Get started</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
<Dialog.Close />
</Dialog.ScrollableInner>
src/components/dms/dialogs/SearchablePeopleList.tsx
+9 -9
View File
@@ -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 {Button} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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},
]}>
<Button
<BottomSheetButton
label={_(msg`Close`)}
size="small"
shape="round"
@@ -264,6 +264,7 @@ export function SearchablePeopleList({
a.absolute,
a.z_20,
native({
top: 2,
left: -7,
}),
web({
@@ -276,7 +277,7 @@ export function SearchablePeopleList({
) : (
<ChevronLeft size="md" fill={t.palette.contrast_500} />
)}
</Button>
</BottomSheetButton>
<Text
style={[
a.z_10,
@@ -363,11 +364,11 @@ function ProfileCard({
}, [onPress, profile.did])
return (
<Button
<BottomSheetButton
disabled={!enabled}
label={_(msg`Start chat with ${displayName}`)}
onPress={handleOnPress}>
{({hovered, pressed, focused}) => (
{({pressed}) => (
<View
style={[
a.flex_1,
@@ -376,12 +377,11 @@ function ProfileCard({
a.gap_md,
a.align_center,
a.flex_row,
// @TODO DIALOG REFACTOR focused hovered
!enabled
? {opacity: 0.5}
: pressed || focused
: pressed
? t.atoms.bg_contrast_25
: hovered
? t.atoms.bg_contrast_50
: t.atoms.bg,
]}>
<UserAvatar
@@ -404,7 +404,7 @@ function ProfileCard({
</View>
</View>
)}
</Button>
</BottomSheetButton>
)
}
src/components/forms/DateField/index.tsx
+4 -3
View File
@@ -5,7 +5,8 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -72,7 +73,7 @@ export function DateField({
accessibilityHint={accessibilityHint}
/>
</View>
<Button
<BottomSheetButton
label={_(msg`Done`)}
onPress={() => control.close()}
size="large"
@@ -81,7 +82,7 @@ export function DateField({
<ButtonText>
<Trans>Done</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
</Dialog.Inner>
</Dialog.Outer>
src/components/intents/VerifyEmailIntentDialog.tsx
+6 -5
View File
@@ -5,7 +5,8 @@ import {useLingui} from '@lingui/react'
import {useAgent, useSession} from '#/state/session'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {DialogControlProps} from '#/components/Dialog'
import {useIntentDialogs} from '#/components/intents/IntentDialogs'
@@ -106,7 +107,7 @@ function Inner({control}: {control: DialogControlProps}) {
)}
{status !== 'loading' ? (
<View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
<Button
<BottomSheetButton
label={_(msg`Close`)}
onPress={() => control.close()}
variant="solid"
@@ -116,9 +117,9 @@ function Inner({control}: {control: DialogControlProps}) {
<ButtonText>
<Trans>Close</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
{status === 'failure' ? (
<Button
<BottomSheetButton
label={_(msg`Resend Verification Email`)}
onPress={onPressResendEmail}
variant="solid"
@@ -129,7 +130,7 @@ function Inner({control}: {control: DialogControlProps}) {
<Trans>Resend Email</Trans>
</ButtonText>
{sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
</Button>
</BottomSheetButton>
) : null}
</View>
) : null}
src/components/moderation/LabelsOnMeDialog.tsx
+8 -7
View File
@@ -13,7 +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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography'
@@ -139,7 +140,7 @@ function Label({
</View>
{!isSelfLabel && (
<View>
<Button
<BottomSheetButton
variant="solid"
color="secondary"
size="small"
@@ -148,7 +149,7 @@ function Label({
<ButtonText>
<Trans>Appeal</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
)}
</View>
@@ -275,7 +276,7 @@ function AppealForm({
? [a.flex_row, a.justify_between]
: [{flexDirection: 'column-reverse'}, a.gap_sm]
}>
<Button
<BottomSheetButton
testID="backBtn"
variant="solid"
color="secondary"
@@ -283,8 +284,8 @@ function AppealForm({
onPress={onPressBack}
label={_(msg`Back`)}>
<ButtonText>{_(msg`Back`)}</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
testID="submitBtn"
variant="solid"
color="primary"
@@ -293,7 +294,7 @@ function AppealForm({
label={_(msg`Submit`)}>
<ButtonText>{_(msg`Submit`)}</ButtonText>
{isPending && <ButtonIcon icon={Loader} />}
</Button>
</BottomSheetButton>
</View>
</>
)
src/screens/Onboarding/StepProfile/index.tsx
+3 -2
View File
@@ -30,6 +30,7 @@ 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'
@@ -311,7 +312,7 @@ export function StepProfile() {
/>
</View>
<View style={[a.pt_4xl]}>
<Button
<BottomSheetButton
variant="solid"
color="primary"
size="large"
@@ -320,7 +321,7 @@ export function StepProfile() {
<ButtonText>
<Trans>Done</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
</Dialog.Inner>
</Dialog.Outer>
src/view/com/auth/server-input/index.tsx
+6 -5
View File
@@ -6,7 +6,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -124,7 +125,7 @@ export function ServerInputDialog({
{pdsAddressHistory.length > 0 && (
<View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
{pdsAddressHistory.map(uri => (
<Button
<BottomSheetButton
key={uri}
variant="ghost"
color="primary"
@@ -132,7 +133,7 @@ export function ServerInputDialog({
style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
onPress={() => setCustomAddress(uri)}>
<ButtonText>{uri}</ButtonText>
</Button>
</BottomSheetButton>
))}
</View>
)}
@@ -160,7 +161,7 @@ export function ServerInputDialog({
</View>
<View style={gtMobile && [a.flex_row, a.justify_end]}>
<Button
<BottomSheetButton
testID="doneBtn"
variant="outline"
color="primary"
@@ -168,7 +169,7 @@ export function ServerInputDialog({
onPress={() => control.close()}
label={_(msg`Done`)}>
<ButtonText>{_(msg`Done`)}</ButtonText>
</Button>
</BottomSheetButton>
</View>
</View>
</Dialog.ScrollableInner>
src/view/com/composer/GifAltText.tsx
+4 -3
View File
@@ -14,7 +14,8 @@ import {
import {enforceLen} from '#/lib/strings/helpers'
import {Gif} from '#/state/queries/tenor'
import {atoms as a, native, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -154,7 +155,7 @@ function AltTextInner({
/>
</TextField.Root>
</View>
<Button
<BottomSheetButton
label={_(msg`Save`)}
size="large"
color="primary"
@@ -163,7 +164,7 @@ function AltTextInner({
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
{/* below the text input to force tab order */}
<View>
src/view/com/composer/photos/EditImageDialog.web.tsx
+4 -3
View File
@@ -12,7 +12,8 @@ import {
manipulateImage,
} from '#/state/gallery'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Text} from '#/components/Typography'
import {EditImageDialogProps} from './EditImageDialog'
@@ -71,7 +72,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
</View>
<View style={[a.mt_md, a.gap_md]}>
<Button
<BottomSheetButton
disabled={!isNew}
label={_(msg`Save`)}
size="large"
@@ -81,7 +82,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
</Dialog.Inner>
)
src/view/com/composer/photos/ImageAltTextDialog.tsx
+4 -3
View File
@@ -8,7 +8,8 @@ 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 {Button, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import * as TextField from '#/components/forms/TextField'
import {Text} from '#/components/Typography'
@@ -102,7 +103,7 @@ const ImageAltTextInner = ({
/>
</TextField.Root>
</View>
<Button
<BottomSheetButton
label={_(msg`Save`)}
disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
size="large"
@@ -112,7 +113,7 @@ const ImageAltTextInner = ({
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
</Dialog.ScrollableInner>
)
src/view/com/composer/videos/SubtitleDialog.tsx
+5 -4
View File
@@ -10,6 +10,7 @@ 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'
@@ -164,7 +165,7 @@ function SubtitleDialogInner({
)}
<View style={web([a.flex_row, a.justify_end])}>
<Button
<BottomSheetButton
label={_(msg`Done`)}
size={isWeb ? 'small' : 'large'}
color="primary"
@@ -177,7 +178,7 @@ function SubtitleDialogInner({
<ButtonText>
<Trans>Done</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
</View>
<Dialog.Close />
@@ -257,7 +258,7 @@ function SubtitleFileRow({
</View>
</View>
<Button
<BottomSheetButton
label={_(msg`Remove subtitle file`)}
size="tiny"
shape="round"
@@ -268,7 +269,7 @@ function SubtitleFileRow({
}
style={[a.ml_sm]}>
<ButtonIcon icon={X} />
</Button>
</BottomSheetButton>
</View>
)
}
src/view/com/util/post-ctrls/RepostButton.tsx
+7 -6
View File
@@ -7,6 +7,7 @@ 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'
@@ -92,7 +93,7 @@ let RepostButton = ({
<Dialog.Inner label={_(msg`Repost or quote post`)}>
<View style={a.gap_xl}>
<View style={a.gap_xs}>
<Button
<BottomSheetButton
style={[a.justify_start, a.px_md]}
label={
isReposted
@@ -115,8 +116,8 @@ let RepostButton = ({
? _(msg`Remove repost`)
: _(msg({message: `Repost`, context: 'action'}))}
</Text>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
disabled={embeddingDisabled}
testID="quoteBtn"
style={[a.justify_start, a.px_md]}
@@ -152,9 +153,9 @@ let RepostButton = ({
? _(msg`Quote posts disabled`)
: _(msg`Quote post`)}
</Text>
</Button>
</BottomSheetButton>
</View>
<Button
<BottomSheetButton
label={_(msg`Cancel quote post`)}
onAccessibilityEscape={close}
onPress={close}
@@ -162,7 +163,7 @@ let RepostButton = ({
variant="solid"
color="primary">
<ButtonText>{_(msg`Cancel`)}</ButtonText>
</Button>
</BottomSheetButton>
</View>
</Dialog.Inner>
</Dialog.Outer>
src/view/screens/Settings/DisableEmail2FADialog.tsx
+10 -9
View File
@@ -9,7 +9,8 @@ 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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
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'
@@ -108,7 +109,7 @@ export function DisableEmail2FADialog({
{stage === Stages.Email ? (
<View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}>
<Button
<BottomSheetButton
testID="sendEmailButton"
variant="solid"
color="primary"
@@ -120,8 +121,8 @@ export function DisableEmail2FADialog({
<Trans>Send verification email</Trans>
</ButtonText>
{isProcessing && <ButtonIcon icon={Loader} />}
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
testID="haveCodeButton"
variant="ghost"
color="primary"
@@ -132,7 +133,7 @@ export function DisableEmail2FADialog({
<ButtonText>
<Trans>I have a code</Trans>
</ButtonText>
</Button>
</BottomSheetButton>
</View>
) : stage === Stages.ConfirmCode ? (
<View>
@@ -157,7 +158,7 @@ export function DisableEmail2FADialog({
</TextField.Root>
</View>
<View style={gtMobile && [a.flex_row, a.justify_end]}>
<Button
<BottomSheetButton
testID="resendCodeBtn"
variant="ghost"
color="primary"
@@ -168,8 +169,8 @@ export function DisableEmail2FADialog({
<ButtonText>
<Trans>Resend email</Trans>
</ButtonText>
</Button>
<Button
</BottomSheetButton>
<BottomSheetButton
testID="confirmBtn"
variant="solid"
color="primary"
@@ -181,7 +182,7 @@ export function DisableEmail2FADialog({
<Trans>Confirm</Trans>
</ButtonText>
{isProcessing && <ButtonIcon icon={Loader} />}
</Button>
</BottomSheetButton>
</View>
</View>
) : undefined}
src/view/screens/Settings/ExportCarDialog.tsx
+4 -3
View File
@@ -8,7 +8,8 @@ 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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {InlineLinkText} from '#/components/Link'
import {Loader} from '#/components/Loader'
@@ -68,7 +69,7 @@ export function ExportCarDialog({
</Trans>
</Text>
<Button
<BottomSheetButton
variant="solid"
color="primary"
size="large"
@@ -79,7 +80,7 @@ export function ExportCarDialog({
<Trans>Download CAR file</Trans>
</ButtonText>
{loading && <ButtonIcon icon={Loader} />}
</Button>
</BottomSheetButton>
<Text
style={[