diff options
| -rw-r--r-- | assets/icons/ticket_stroke2_corner0_rounded.svg | 2 | ||||
| -rw-r--r-- | src/components/forms/HostingProvider.tsx | 143 | ||||
| -rw-r--r-- | src/components/icons/Ticket.tsx | 2 | ||||
| -rw-r--r-- | src/screens/Signup/StepInfo/index.tsx | 16 | ||||
| -rw-r--r-- | src/view/com/auth/server-input/index.tsx | 42 |
5 files changed, 122 insertions, 83 deletions
diff --git a/assets/icons/ticket_stroke2_corner0_rounded.svg b/assets/icons/ticket_stroke2_corner0_rounded.svg index 0edb01eed..99f375718 100644 --- a/assets/icons/ticket_stroke2_corner0_rounded.svg +++ b/assets/icons/ticket_stroke2_corner0_rounded.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" stroke="#000" stroke-linejoin="round" d="M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.5 3.5 0 0 1 5.5 12a3.5 3.5 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.5 3.5 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z"/></svg> +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 0-1 1v4.17a1 1 0 0 0 .667.944 2.001 2.001 0 0 1 0 3.772A1 1 0 0 0 2 14.83V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4.17a1 1 0 0 0-.667-.944 2.001 2.001 0 0 1 0-3.772A1 1 0 0 0 22 9.17V5a1 1 0 0 0-1-1H3Zm1 4.535V6h16v2.535A4 4 0 0 0 18 12c0 1.482.805 2.773 2 3.465V18H4v-2.535A4 4 0 0 0 6 12a4 4 0 0 0-2-3.465ZM15 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-1-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" clip-rule="evenodd"/></svg> diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 6cbabe291..4732434b0 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -6,21 +6,23 @@ import {useLingui} from '@lingui/react' import {toNiceDomain} from '#/lib/strings/url-helpers' import {isAndroid} from '#/platform/detection' import {ServerInputDialog} from '#/view/com/auth/server-input' -import {atoms as a, useTheme} from '#/alf' -import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' -import {Button} from '../Button' -import {useDialogControl} from '../Dialog' -import {Text} from '../Typography' +import {atoms as a, tokens, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {useDialogControl} from '#/components/Dialog' +import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' +import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil' +import {Text} from '#/components/Typography' export function HostingProvider({ serviceUrl, onSelectServiceUrl, onOpenDialog, + minimal, }: { serviceUrl: string onSelectServiceUrl: (provider: string) => void onOpenDialog?: () => void + minimal?: boolean }) { const serverInputControl = useDialogControl() const t = useTheme() @@ -29,9 +31,7 @@ export function HostingProvider({ const onPressSelectService = React.useCallback(() => { Keyboard.dismiss() serverInputControl.open() - if (onOpenDialog) { - onOpenDialog() - } + onOpenDialog?.() }, [onOpenDialog, serverInputControl]) return ( @@ -40,57 +40,80 @@ export function HostingProvider({ control={serverInputControl} onSelect={onSelectServiceUrl} /> - <Button - testID="selectServiceButton" - label={toNiceDomain(serviceUrl)} - accessibilityHint={_(msg`Press to change hosting provider`)} - variant="solid" - color="secondary" - style={[ - a.w_full, - a.flex_row, - a.align_center, - a.rounded_sm, - a.px_md, - a.pr_sm, - a.gap_xs, - {paddingVertical: isAndroid ? 14 : 9}, - ]} - onPress={onPressSelectService}> - {({hovered, pressed}) => { - const interacted = hovered || pressed - return ( - <> - <View style={a.pr_xs}> - <Globe - size="md" - fill={ - interacted ? t.palette.contrast_800 : t.palette.contrast_500 - } - /> - </View> - <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> - <View - style={[ - a.rounded_sm, - interacted - ? t.atoms.bg_contrast_300 - : t.atoms.bg_contrast_100, - {marginLeft: 'auto', padding: 6}, - ]}> - <Pencil - size="sm" - style={{ - color: interacted - ? t.palette.contrast_800 - : t.palette.contrast_500, - }} - /> - </View> - </> - ) - }} - </Button> + {minimal ? ( + <View style={[a.flex_row, a.align_center, a.flex_wrap]}> + <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> + You are creating an account on{' '} + </Text> + <Button + label={toNiceDomain(serviceUrl)} + accessibilityHint={_(msg`Press to change hosting provider`)} + onPress={onPressSelectService} + variant="ghost" + color="secondary" + size="tiny" + style={[a.px_xs, {marginLeft: tokens.space.xs * -1}]}> + <ButtonText style={[a.text_sm]}> + {toNiceDomain(serviceUrl)} + </ButtonText> + <ButtonIcon icon={PencilIcon} /> + </Button> + </View> + ) : ( + <Button + testID="selectServiceButton" + label={toNiceDomain(serviceUrl)} + accessibilityHint={_(msg`Press to change hosting provider`)} + variant="solid" + color="secondary" + style={[ + a.w_full, + a.flex_row, + a.align_center, + a.rounded_sm, + a.px_md, + a.pr_sm, + a.gap_xs, + {paddingVertical: isAndroid ? 14 : 9}, + ]} + onPress={onPressSelectService}> + {({hovered, pressed}) => { + const interacted = hovered || pressed + return ( + <> + <View style={a.pr_xs}> + <GlobeIcon + size="md" + fill={ + interacted + ? t.palette.contrast_800 + : t.palette.contrast_500 + } + /> + </View> + <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> + <View + style={[ + a.rounded_sm, + interacted + ? t.atoms.bg_contrast_300 + : t.atoms.bg_contrast_100, + {marginLeft: 'auto', padding: 6}, + ]}> + <PencilIcon + size="sm" + style={{ + color: interacted + ? t.palette.contrast_800 + : t.palette.contrast_500, + }} + /> + </View> + </> + ) + }} + </Button> + )} </> ) } diff --git a/src/components/icons/Ticket.tsx b/src/components/icons/Ticket.tsx index 1a8059c2a..d4cfe7e47 100644 --- a/src/components/icons/Ticket.tsx +++ b/src/components/icons/Ticket.tsx @@ -1,5 +1,5 @@ import {createSinglePathSVG} from './TEMPLATE' export const Ticket_Stroke2_Corner0_Rounded = createSinglePathSVG({ - path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z', + path: 'M3 4a1 1 0 0 0-1 1v4.17a1 1 0 0 0 .667.944 2.001 2.001 0 0 1 0 3.772A1 1 0 0 0 2 14.83V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4.17a1 1 0 0 0-.667-.944 2.001 2.001 0 0 1 0-3.772A1 1 0 0 0 22 9.17V5a1 1 0 0 0-1-1H3Zm1 4.535V6h16v2.535A4 4 0 0 0 18 12c0 1.482.805 2.773 2 3.465V18H4v-2.535A4 4 0 0 0 6 12a4 4 0 0 0-2-3.465ZM15 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-1-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z', }) diff --git a/src/screens/Signup/StepInfo/index.tsx b/src/screens/Signup/StepInfo/index.tsx index d9b680602..fa0c7c8cf 100644 --- a/src/screens/Signup/StepInfo/index.tsx +++ b/src/screens/Signup/StepInfo/index.tsx @@ -128,17 +128,11 @@ export function StepInfo({ <ScreenTransition> <View style={[a.gap_md]}> <FormError error={state.error} /> - <View> - <TextField.LabelText> - <Trans>Hosting provider</Trans> - </TextField.LabelText> - <HostingProvider - serviceUrl={state.serviceUrl} - onSelectServiceUrl={v => - dispatch({type: 'setServiceUrl', value: v}) - } - /> - </View> + <HostingProvider + minimal + serviceUrl={state.serviceUrl} + onSelectServiceUrl={v => dispatch({type: 'setServiceUrl', value: v})} + /> {state.isLoading || isLoadingStarterPack ? ( <View style={[a.align_center]}> <Loader size="xl" /> 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"> |
