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

revert all the button import changes

Browse Source
This commit is contained in:
Hailey
2024-10-02 17:00:08 -07:00
committed by Hailey
parent fee24685db
commit bb33aa0106
31 changed files with 155 additions and 180 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/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/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/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'
@@ -101,7 +100,7 @@ export function SubmitView({
return (
<View style={[a.gap_2xl]}>
<BottomSheetButton
<Button
size="small"
variant="solid"
color="secondary"
@@ -109,7 +108,7 @@ export function SubmitView({
label={_(msg`Go back to previous step`)}
onPress={goBack}>
<ButtonIcon icon={ChevronLeft} />
</BottomSheetButton>
</Button>
<View
style={[
@@ -212,7 +211,7 @@ export function SubmitView({
</Text>
))}
<BottomSheetButton
<Button
testID="sendReportBtn"
size="large"
variant="solid"
@@ -224,7 +223,7 @@ export function SubmitView({
<Trans>Send report</Trans>
</ButtonText>
{submitting && <ButtonIcon icon={Loader} />}
</BottomSheetButton>
</Button>
</View>
</View>
)
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'
@@ -316,7 +315,7 @@ function MutedWordsInner() {
</View>
<View style={[a.pt_xs]}>
<BottomSheetButton
<Button
disabled={isPending || !field}
label={_(msg`Add mute word for configured settings`)}
size="large"
@@ -328,7 +327,7 @@ function MutedWordsInner() {
<Trans>Add</Trans>
</ButtonText>
<ButtonIcon icon={isPending ? Loader : Plus} position="right" />
</BottomSheetButton>
</Button>
</View>
{error && (
@@ -519,7 +518,7 @@ function MutedWordRow({
)}
</View>
<BottomSheetButton
<Button
label={_(msg`Remove mute word from your list`)}
size="tiny"
shape="round"
@@ -528,7 +527,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'
@@ -230,6 +229,7 @@ export function PostInteractionSettingsForm({
}: PostInteractionSettingsFormProps) {
const t = useTheme()
const {_} = useLingui()
const control = Dialog.useDialogContext()
const {data: lists} = useMyListsQuery('curate')
const [quotesEnabled, setQuotesEnabled] = React.useState(
!(
@@ -432,16 +432,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>
)
}
@@ -461,7 +462,7 @@ function Selectable({
}) {
const t = useTheme()
return (
<BottomSheetButton
<Button
disabled={disabled}
onPress={onPress}
label={label}
@@ -471,8 +472,7 @@ function Selectable({
checked: isSelected,
}}
style={a.flex_1}>
{/* @TODO DIALOG REFACTOR hovered focused */}
{({pressed}) => (
{({hovered, focused}) => (
<View
style={[
a.flex_1,
@@ -483,7 +483,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,
},
@@ -497,7 +497,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/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'
@@ -125,7 +124,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"
@@ -133,7 +132,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>
)}
@@ -161,7 +160,7 @@ export function ServerInputDialog({
</View>
<View style={gtMobile && [a.flex_row, a.justify_end]}>
<BottomSheetButton
<Button
testID="doneBtn"
variant="outline"
color="primary"
@@ -169,7 +168,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,9 +152,9 @@ let RepostButton = ({
? _(msg`Quote posts disabled`)
: _(msg`Quote post`)}
</Text>
</BottomSheetButton>
</Button>
</View>
<BottomSheetButton
<Button
label={_(msg`Cancel quote post`)}
onAccessibilityEscape={close}
onPress={close}
@@ -163,7 +162,7 @@ let RepostButton = ({
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={[