[ELI5] Tweaks to hosting provider (bluesky-social#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/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>
+      )}
     </>
   )
 }

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',
 })

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

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