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 screenzio/stable
parent
c8175b9c4e
commit
6149437c05
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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`)}
|
||||
|
|
|
@ -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 && (
|
||||
|
|
Loading…
Reference in New Issue