diff options
| -rw-r--r-- | src/view/com/auth/create/CreateAccount.tsx | 109 |
1 files changed, 54 insertions, 55 deletions
diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index a89e6fb34..74307a631 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -1,7 +1,6 @@ import React from 'react' import { ActivityIndicator, - KeyboardAvoidingView, ScrollView, StyleSheet, TouchableOpacity, @@ -28,6 +27,7 @@ import {IS_PROD} from '#/lib/constants' import {Step1} from './Step1' import {Step2} from './Step2' import {Step3} from './Step3' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' export function CreateAccount({onPressBack}: {onPressBack: () => void}) { const {screen} = useAnalytics() @@ -38,6 +38,7 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) { const {createAccount} = useSessionApi() const {mutate: setBirthDate} = usePreferencesSetBirthDateMutation() const {mutate: setSavedFeeds} = useSetSaveFeedsMutation() + const {isTabletOrDesktop} = useWebMediaQueries() React.useEffect(() => { screen('CreateAccount') @@ -120,64 +121,62 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) { title={_(msg`Create Account`)} description={_(msg`We're so excited to have you join us!`)}> <ScrollView testID="createAccount" style={pal.view}> - <KeyboardAvoidingView behavior="padding"> - <View style={styles.stepContainer}> - {uiState.step === 1 && ( - <Step1 uiState={uiState} uiDispatch={uiDispatch} /> - )} - {uiState.step === 2 && ( - <Step2 uiState={uiState} uiDispatch={uiDispatch} /> - )} - {uiState.step === 3 && ( - <Step3 uiState={uiState} uiDispatch={uiDispatch} /> - )} - </View> - <View style={[s.flexRow, s.pl20, s.pr20]}> + <View style={styles.stepContainer}> + {uiState.step === 1 && ( + <Step1 uiState={uiState} uiDispatch={uiDispatch} /> + )} + {uiState.step === 2 && ( + <Step2 uiState={uiState} uiDispatch={uiDispatch} /> + )} + {uiState.step === 3 && ( + <Step3 uiState={uiState} uiDispatch={uiDispatch} /> + )} + </View> + <View style={[s.flexRow, s.pl20, s.pr20]}> + <TouchableOpacity + onPress={onPressBackInner} + testID="backBtn" + accessibilityRole="button"> + <Text type="xl" style={pal.link}> + <Trans>Back</Trans> + </Text> + </TouchableOpacity> + <View style={s.flex1} /> + {uiState.canNext ? ( <TouchableOpacity - onPress={onPressBackInner} - testID="backBtn" + testID="nextBtn" + onPress={onPressNext} accessibilityRole="button"> - <Text type="xl" style={pal.link}> - <Trans>Back</Trans> - </Text> - </TouchableOpacity> - <View style={s.flex1} /> - {uiState.canNext ? ( - <TouchableOpacity - testID="nextBtn" - onPress={onPressNext} - accessibilityRole="button"> - {uiState.isProcessing ? ( - <ActivityIndicator /> - ) : ( - <Text type="xl-bold" style={[pal.link, s.pr5]}> - <Trans>Next</Trans> - </Text> - )} - </TouchableOpacity> - ) : serviceInfoError ? ( - <TouchableOpacity - testID="retryConnectBtn" - onPress={() => refetchServiceInfo()} - accessibilityRole="button" - accessibilityLabel={_(msg`Retry`)} - accessibilityHint="" - accessibilityLiveRegion="polite"> + {uiState.isProcessing ? ( + <ActivityIndicator /> + ) : ( <Text type="xl-bold" style={[pal.link, s.pr5]}> - <Trans>Retry</Trans> + <Trans>Next</Trans> </Text> - </TouchableOpacity> - ) : serviceInfoIsFetching ? ( - <> - <ActivityIndicator color="#fff" /> - <Text type="xl" style={[pal.text, s.pr5]}> - <Trans>Connecting...</Trans> - </Text> - </> - ) : undefined} - </View> - <View style={s.footerSpacer} /> - </KeyboardAvoidingView> + )} + </TouchableOpacity> + ) : serviceInfoError ? ( + <TouchableOpacity + testID="retryConnectBtn" + onPress={() => refetchServiceInfo()} + accessibilityRole="button" + accessibilityLabel={_(msg`Retry`)} + accessibilityHint="" + accessibilityLiveRegion="polite"> + <Text type="xl-bold" style={[pal.link, s.pr5]}> + <Trans>Retry</Trans> + </Text> + </TouchableOpacity> + ) : serviceInfoIsFetching ? ( + <> + <ActivityIndicator color="#fff" /> + <Text type="xl" style={[pal.text, s.pr5]}> + <Trans>Connecting...</Trans> + </Text> + </> + ) : undefined} + </View> + <View style={{height: isTabletOrDesktop ? 50 : 400}} /> </ScrollView> </LoggedOutLayout> ) |