diff options
Diffstat (limited to 'src/view/com/auth/server-input/index.tsx')
-rw-r--r-- | src/view/com/auth/server-input/index.tsx | 42 |
1 files changed, 32 insertions, 10 deletions
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 74b0d2315..f9a5c84bf 100644 --- a/src/view/com/auth/server-input/index.tsx +++ b/src/view/com/auth/server-input/index.tsx @@ -1,11 +1,14 @@ import React from 'react' import {View} from 'react-native' +import {useWindowDimensions} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {BSKY_SERVICE} from '#/lib/constants' import * as persisted from '#/state/persisted' +import {useSession} from '#/state/session' import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import * as TextField from '#/components/forms/TextField' @@ -23,12 +26,16 @@ export function ServerInputDialog({ }) { const {_} = useLingui() const t = useTheme() + const {height} = useWindowDimensions() const {gtMobile} = useBreakpoints() const [pdsAddressHistory, setPdsAddressHistory] = React.useState<string[]>( persisted.get('pdsAddressHistory') || [], ) const [fixedOption, setFixedOption] = React.useState([BSKY_SERVICE]) const [customAddress, setCustomAddress] = React.useState('') + const {accounts} = useSession() + + const isFirstTimeUser = accounts.length === 0 const onClose = React.useCallback(() => { let url @@ -66,19 +73,18 @@ export function ServerInputDialog({ ]) return ( - <Dialog.Outer control={control} onClose={onClose}> + <Dialog.Outer + control={control} + onClose={onClose} + nativeOptions={{minHeight: height / 2}}> <Dialog.Handle /> <Dialog.ScrollableInner accessibilityDescribedBy="dialog-description" accessibilityLabelledBy="dialog-title"> <View style={[a.relative, a.gap_md, a.w_full]}> <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}> - <Trans>Choose Service</Trans> + <Trans>Choose your account provider</Trans> </Text> - <P nativeID="dialog-description" style={[a.text_sm]}> - <Trans>Select the service that hosts your data.</Trans> - </P> - <ToggleButton.Group label="Preferences" values={fixedOption} @@ -98,6 +104,16 @@ export function ServerInputDialog({ </ToggleButton.Button> </ToggleButton.Group> + {fixedOption[0] === BSKY_SERVICE && isFirstTimeUser && ( + <Admonition type="tip"> + <Trans> + Bluesky is an open network where you can choose your own + provider. If you're new here, we recommend sticking with the + default Bluesky Social option. + </Trans> + </Admonition> + )} + {fixedOption[0] === 'custom' && ( <View style={[ @@ -148,10 +164,16 @@ export function ServerInputDialog({ a.leading_snug, a.flex_1, ]}> - <Trans> - Bluesky is an open network where you can choose your hosting - provider. If you're a developer, you can host your own server. - </Trans>{' '} + {isFirstTimeUser ? ( + <Trans> + If you're a developer, you can host your own server. + </Trans> + ) : ( + <Trans> + Bluesky is an open network where you can choose your hosting + provider. If you're a developer, you can host your own server. + </Trans> + )}{' '} <InlineLinkText label={_(msg`Learn more about self hosting your PDS.`)} to="https://atproto.com/guides/self-hosting"> |