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

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

Browse Source
This commit is contained in:
Hailey
2024-10-02 17:17:46 -07:00
parent ca0888c633 67e4d775c9
commit 7ef51acad6
44 changed files with 419 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AccountList.tsx
+9 -9
View File
@@ -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
-12
View File
@@ -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
-3
View File
@@ -1,3 +0,0 @@
import {Button as BottomSheetButton} from '#/components/Button'
export {BottomSheetButton}
src/components/Button.tsx
+235 -243
View File
@@ -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 &
VariantProps & {disabled?: boolean | null}
export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
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,13 +197,226 @@ export const Button = React.forwardRef<View, ButtonProps>(
}))
}, [setState])
const {baseStyles, hoverStyles} = useSharedButtonStyles({
color,
variant,
disabled,
shape,
size,
})
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 {gradientColors, gradientHoverColors, gradientLocations} =
React.useMemo(() => {
@@ -296,239 +521,6 @@ 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/Dialog/context.ts
+1
View File
@@ -9,6 +9,7 @@ import {
export const Context = React.createContext<DialogContextProps>({
close: () => {},
insideDialog: false,
})
export function useDialogContext() {
src/components/Dialog/index.tsx
+1 -10
View File
@@ -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?
// React.useEffect(() => {
// return () => {
// setDialogIsOpen(control.id, false)
// }
// }, [control.id, setDialogIsOpen])
const context = React.useMemo(() => ({close}), [close])
const context = React.useMemo(() => ({close, insideDialog: true}), [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
+1 -4
View File
@@ -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
+1
View File
@@ -37,6 +37,7 @@ export type DialogControlProps = DialogControlRefProps & {
export type DialogContextProps = {
close: DialogControlProps['close']
insideDialog: boolean
}
export type DialogControlOpenOptions = {
src/components/FeedCard.tsx
+3 -9
View File
@@ -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) => {
// WEB ONLY - this is okay. See `BottomSheetPressable.web.tsx`
if (isWeb) {
e = e as GestureResponderEvent
e.preventDefault()
e.stopPropagation()
}
async (e: GestureResponderEvent) => {
e.preventDefault()
e.stopPropagation()
try {
if (savedFeedConfig) {
src/components/Link.tsx
+2 -3
View File
@@ -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
+2 -3
View File
@@ -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
+2 -2
View File
@@ -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
+9 -11
View File
@@ -1,13 +1,11 @@
import React from 'react'
import {View} from 'react-native'
import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
import {GestureResponderEvent, View} from 'react-native'
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 {ButtonColor, ButtonText} from '#/components/Button'
import {Button, 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
+3 -4
View File
@@ -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 {useButtonContext} from '#/components/Button'
import {Button, 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 -6
View File
@@ -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 {ButtonIcon, ButtonText, useButtonContext} from '#/components/Button'
import {
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
+5 -6
View File
@@ -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 {ButtonIcon, ButtonText} from '#/components/Button'
import {Button, 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
+2 -1
View File
@@ -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
+5 -6
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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>
<BottomSheetButton
</Button>
<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
+7 -8
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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>
<BottomSheetButton
</Button>
<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
+3 -4
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+3 -4
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+5 -6
View File
@@ -13,8 +13,7 @@ import {
useUpsertMutedWordsMutation,
} from '#/state/queries/preferences'
import {atoms as a, native, useTheme} from '#/alf'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import {Button, 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
+5 -6
View File
@@ -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 */}
{({pressed}) => (
{({hovered}) => (
<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
+3 -4
View File
@@ -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
+3 -4
View File
@@ -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 -8
View File
@@ -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>
<BottomSheetButton
</Button>
<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>
<BottomSheetButton
</Button>
<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
+5 -6
View File
@@ -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
+5 -6
View File
@@ -19,8 +19,7 @@ import {
ViewStyleProp,
web,
} from '#/alf'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonIcon, ButtonText} from '#/components/Button'
import {Button, 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
+9 -9
View File
@@ -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 {ButtonIcon, ButtonText} from '#/components/Button'
import {Button, 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 */}
{({pressed}) => (
{({hovered, focused}) => (
<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
+5 -6
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+3 -4
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+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 {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
+3 -4
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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 -6
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+7 -8
View File
@@ -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>
<BottomSheetButton
</Button>
<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
+2 -3
View File
@@ -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
+5 -6
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+3 -4
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+3 -4
View File
@@ -12,8 +12,7 @@ import {
manipulateImage,
} from '#/state/gallery'
import {atoms as a} from '#/alf'
import {BottomSheetButton} from '#/components/BottomSheetButton'
import {ButtonText} from '#/components/Button'
import {Button, 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
+3 -4
View File
@@ -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 {ButtonText} from '#/components/Button'
import {Button, 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
+4 -5
View File
@@ -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
+6 -7
View File
@@ -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>
<BottomSheetButton
</Button>
<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 -10
View File
@@ -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 {ButtonIcon, ButtonText} from '#/components/Button'
import {Button, 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>
<BottomSheetButton
</Button>
<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>
<BottomSheetButton
</Button>
<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
+3 -4
View File
@@ -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 {ButtonIcon, ButtonText} from '#/components/Button'
import {Button, 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={[