[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
2025-01-08 19:22:04 +00:00
parent 40ab77781c
commit 7c8c78b18f
5 changed files with 122 additions and 83 deletions
@@ -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>
@@ -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>
+      )}
    </>
  )
 }
@@ -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',
 })
@@ -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" />
@@ -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">