diff --git a/assets/icons/ticket_stroke2_corner0_rounded.svg b/assets/icons/ticket_stroke2_corner0_rounded.svg index 0edb01eedf..99f375718b 100644 --- a/assets/icons/ticket_stroke2_corner0_rounded.svg +++ b/assets/icons/ticket_stroke2_corner0_rounded.svg @@ -1 +1 @@ - + diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 6cbabe2911..4732434b01 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} /> - + {minimal ? ( + + + You are creating an account on{' '} + + + + ) : ( + + )} ) } diff --git a/src/components/icons/Ticket.tsx b/src/components/icons/Ticket.tsx index 1a8059c2a1..d4cfe7e470 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 d9b680602a..fa0c7c8cf4 100644 --- a/src/screens/Signup/StepInfo/index.tsx +++ b/src/screens/Signup/StepInfo/index.tsx @@ -128,17 +128,11 @@ export function StepInfo({ - - - Hosting provider - - - dispatch({type: 'setServiceUrl', value: v}) - } - /> - + dispatch({type: 'setServiceUrl', value: v})} + /> {state.isLoading || isLoadingStarterPack ? ( diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 74b0d23155..f9a5c84bf8 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( 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 ( - + - Choose Service + Choose your account provider -

- Select the service that hosts your data. -

- + {fixedOption[0] === BSKY_SERVICE && isFirstTimeUser && ( + + + 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. + + + )} + {fixedOption[0] === 'custom' && ( - - Bluesky is an open network where you can choose your hosting - provider. If you're a developer, you can host your own server. - {' '} + {isFirstTimeUser ? ( + + If you're a developer, you can host your own server. + + ) : ( + + Bluesky is an open network where you can choose your hosting + provider. If you're a developer, you can host your own server. + + )}{' '}