[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

1 files changed, 83 insertions, 60 deletions

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>
+      )}
     </>
   )
 }