From 6149437c05bd0ffbde08833e2a32c967f08f8414 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 25 Jan 2024 22:24:37 -0800
Subject: Account creation improvements & some other fixes (#2636)

* Quick fix to mobile

* Enlarge tap targets in account creation

* Improve keyboard behaviors during account creation

* Improve autocompletion behaviors during account creation

* Use the logo in the Deactivated screen
---
 src/screens/Deactivated.tsx                | 10 +++++-----
 src/view/com/auth/create/CreateAccount.tsx | 17 ++++++++++++-----
 src/view/com/auth/create/Step1.tsx         |  4 ++--
 src/view/com/auth/create/Step2.tsx         |  4 +++-
 src/view/com/auth/create/Step3.tsx         |  3 +++
 src/view/com/util/PostMeta.tsx             |  8 +++-----
 6 files changed, 28 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx
index 965fad07b..4a2ebf589 100644
--- a/src/screens/Deactivated.tsx
+++ b/src/screens/Deactivated.tsx
@@ -14,8 +14,8 @@ import {Text} from '#/components/Typography'
 import {isWeb} from '#/platform/detection'
 import {H2, P} from '#/components/Typography'
 import {ScrollView} from '#/view/com/util/Views'
-import {Group3_Stroke2_Corner0_Rounded as Group3} from '#/components/icons/Group3'
 import {Loader} from '#/components/Loader'
+import {Logo} from '#/view/icons/Logo'
 
 const COL_WIDTH = 400
 
@@ -96,8 +96,8 @@ export function Deactivated() {
           style={[a.flex_row, a.justify_center, gtMobile ? a.pt_4xl : a.px_xl]}>
           <View style={[a.flex_1, {maxWidth: COL_WIDTH}]}>
             <View
-              style={[a.w_full, a.justify_center, a.align_center, a.mt_4xl]}>
-              <Group3 fill="none" stroke={t.palette.contrast_900} width={120} />
+              style={[a.w_full, a.justify_center, a.align_center, a.my_4xl]}>
+              <Logo width={120} />
             </View>
 
             <H2 style={[a.pb_sm]}>
@@ -105,8 +105,8 @@ export function Deactivated() {
             </H2>
             <P style={[t.atoms.text_contrast_700]}>
               <Trans>
-                There's been a rush of new users! We'll activate your account as
-                soon as we can.
+                There's been a rush of new users to Bluesky! We'll activate your
+                account as soon as we can.
               </Trans>
             </P>
 
diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx
index 449afb0d3..5d452736a 100644
--- a/src/view/com/auth/create/CreateAccount.tsx
+++ b/src/view/com/auth/create/CreateAccount.tsx
@@ -22,7 +22,7 @@ import {
   useSetSaveFeedsMutation,
   DEFAULT_PROD_FEEDS,
 } from '#/state/queries/preferences'
-import {FEEDBACK_FORM_URL, IS_PROD} from '#/lib/constants'
+import {FEEDBACK_FORM_URL, HITSLOP_10, IS_PROD} from '#/lib/constants'
 
 import {Step1} from './Step1'
 import {Step2} from './Step2'
@@ -121,7 +121,11 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
       leadin=""
       title={_(msg`Create Account`)}
       description={_(msg`We're so excited to have you join us!`)}>
-      <ScrollView testID="createAccount" style={pal.view}>
+      <ScrollView
+        testID="createAccount"
+        style={pal.view}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag">
         <View style={styles.stepContainer}>
           {uiState.step === 1 && (
             <Step1 uiState={uiState} uiDispatch={uiDispatch} />
@@ -137,7 +141,8 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
           <TouchableOpacity
             onPress={onPressBackInner}
             testID="backBtn"
-            accessibilityRole="button">
+            accessibilityRole="button"
+            hitSlop={HITSLOP_10}>
             <Text type="xl" style={pal.link}>
               <Trans>Back</Trans>
             </Text>
@@ -147,7 +152,8 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
             <TouchableOpacity
               testID="nextBtn"
               onPress={onPressNext}
-              accessibilityRole="button">
+              accessibilityRole="button"
+              hitSlop={HITSLOP_10}>
               {uiState.isProcessing ? (
                 <ActivityIndicator />
               ) : (
@@ -163,7 +169,8 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
               accessibilityRole="button"
               accessibilityLabel={_(msg`Retry`)}
               accessibilityHint=""
-              accessibilityLiveRegion="polite">
+              accessibilityLiveRegion="polite"
+              hitSlop={HITSLOP_10}>
               <Text type="xl-bold" style={[pal.link, s.pr5]}>
                 <Trans>Retry</Trans>
               </Text>
diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx
index 41ec93502..a2663da86 100644
--- a/src/view/com/auth/create/Step1.tsx
+++ b/src/view/com/auth/create/Step1.tsx
@@ -144,7 +144,7 @@ export function Step1({
                   accessibilityHint={_(msg`Input email for Bluesky account`)}
                   accessibilityLabelledBy="email"
                   autoCapitalize="none"
-                  autoComplete="off"
+                  autoComplete="email"
                   autoCorrect={false}
                   autoFocus={!uiState.isInviteCodeRequired}
                 />
@@ -169,7 +169,7 @@ export function Step1({
                   accessibilityHint={_(msg`Set password`)}
                   accessibilityLabelledBy="password"
                   autoCapitalize="none"
-                  autoComplete="off"
+                  autoComplete="new-password"
                   autoCorrect={false}
                 />
               </View>
diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx
index f6eedc2eb..6005ee3a5 100644
--- a/src/view/com/auth/create/Step2.tsx
+++ b/src/view/com/auth/create/Step2.tsx
@@ -28,6 +28,7 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
+import {HITSLOP_10} from '#/lib/constants'
 
 export function Step2({
   uiState,
@@ -243,7 +244,8 @@ export function Step2({
               <TouchableWithoutFeedback
                 onPress={onPressRetry}
                 accessibilityLabel={_(msg`Retry.`)}
-                accessibilityHint="">
+                accessibilityHint=""
+                hitSlop={HITSLOP_10}>
                 <View style={styles.touchable}>
                   <Text
                     type="md-medium"
diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx
index bc7956da4..2fd265535 100644
--- a/src/view/com/auth/create/Step3.tsx
+++ b/src/view/com/auth/create/Step3.tsx
@@ -33,6 +33,9 @@ export function Step3({
           placeholder="e.g. alice"
           value={uiState.handle}
           editable
+          autoFocus
+          autoComplete="off"
+          autoCorrect={false}
           onChange={value => uiDispatch({type: 'set-handle', value})}
           // TODO: Add explicit text label
           accessibilityLabel={_(msg`User handle`)}
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 4cd574d59..3795dcf13 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -68,11 +68,9 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
             </>
           }
           href={makeProfileLink(opts.author)}
-          onPointerEnter={() => {
-            if (isWeb) {
-              prefetchProfileQuery(opts.author.did)
-            }
-          }}
+          onPointerEnter={
+            isWeb ? () => prefetchProfileQuery(opts.author.did) : undefined
+          }
         />
       </View>
       {!isAndroid && (
-- 
cgit 1.4.1