[ELI5] Tweaks to hosting provider (#6935)

* minimal hosting provider

* change wording and move back up

* first time user nudge

* move tip

* reexport ticket svg

* fix ticket fr this time

* text tweak + add minHeight

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">