forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove the KeyboardAvoidingView in account creation (close #2333) (#2366)
* Remove the keyboardavoidingview in account creation (close #2333)
* Smaller pad on desktop/tablet
authored by
Paul Frazee
and committed by
GitHub
b9fc1527
7634b581
+54
-55
+54
-55
src/view/com/auth/create/CreateAccount.tsx
+54
-55
src/view/com/auth/create/CreateAccount.tsx
···
1
1
import React from 'react'
2
2
import {
3
3
ActivityIndicator,
4
-
KeyboardAvoidingView,
5
4
ScrollView,
6
5
StyleSheet,
7
6
TouchableOpacity,
···
28
27
import {Step1} from './Step1'
29
28
import {Step2} from './Step2'
30
29
import {Step3} from './Step3'
30
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
31
31
32
32
export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
33
33
const {screen} = useAnalytics()
···
38
38
const {createAccount} = useSessionApi()
39
39
const {mutate: setBirthDate} = usePreferencesSetBirthDateMutation()
40
40
const {mutate: setSavedFeeds} = useSetSaveFeedsMutation()
41
+
const {isTabletOrDesktop} = useWebMediaQueries()
41
42
42
43
React.useEffect(() => {
43
44
screen('CreateAccount')
···
120
121
title={_(msg`Create Account`)}
121
122
description={_(msg`We're so excited to have you join us!`)}>
122
123
<ScrollView testID="createAccount" style={pal.view}>
123
-
<KeyboardAvoidingView behavior="padding">
124
-
<View style={styles.stepContainer}>
125
-
{uiState.step === 1 && (
126
-
<Step1 uiState={uiState} uiDispatch={uiDispatch} />
127
-
)}
128
-
{uiState.step === 2 && (
129
-
<Step2 uiState={uiState} uiDispatch={uiDispatch} />
130
-
)}
131
-
{uiState.step === 3 && (
132
-
<Step3 uiState={uiState} uiDispatch={uiDispatch} />
133
-
)}
134
-
</View>
135
-
<View style={[s.flexRow, s.pl20, s.pr20]}>
124
+
<View style={styles.stepContainer}>
125
+
{uiState.step === 1 && (
126
+
<Step1 uiState={uiState} uiDispatch={uiDispatch} />
127
+
)}
128
+
{uiState.step === 2 && (
129
+
<Step2 uiState={uiState} uiDispatch={uiDispatch} />
130
+
)}
131
+
{uiState.step === 3 && (
132
+
<Step3 uiState={uiState} uiDispatch={uiDispatch} />
133
+
)}
134
+
</View>
135
+
<View style={[s.flexRow, s.pl20, s.pr20]}>
136
+
<TouchableOpacity
137
+
onPress={onPressBackInner}
138
+
testID="backBtn"
139
+
accessibilityRole="button">
140
+
<Text type="xl" style={pal.link}>
141
+
<Trans>Back</Trans>
142
+
</Text>
143
+
</TouchableOpacity>
144
+
<View style={s.flex1} />
145
+
{uiState.canNext ? (
136
146
<TouchableOpacity
137
-
onPress={onPressBackInner}
138
-
testID="backBtn"
147
+
testID="nextBtn"
148
+
onPress={onPressNext}
139
149
accessibilityRole="button">
140
-
<Text type="xl" style={pal.link}>
141
-
<Trans>Back</Trans>
150
+
{uiState.isProcessing ? (
151
+
<ActivityIndicator />
152
+
) : (
153
+
<Text type="xl-bold" style={[pal.link, s.pr5]}>
154
+
<Trans>Next</Trans>
155
+
</Text>
156
+
)}
157
+
</TouchableOpacity>
158
+
) : serviceInfoError ? (
159
+
<TouchableOpacity
160
+
testID="retryConnectBtn"
161
+
onPress={() => refetchServiceInfo()}
162
+
accessibilityRole="button"
163
+
accessibilityLabel={_(msg`Retry`)}
164
+
accessibilityHint=""
165
+
accessibilityLiveRegion="polite">
166
+
<Text type="xl-bold" style={[pal.link, s.pr5]}>
167
+
<Trans>Retry</Trans>
142
168
</Text>
143
169
</TouchableOpacity>
144
-
<View style={s.flex1} />
145
-
{uiState.canNext ? (
146
-
<TouchableOpacity
147
-
testID="nextBtn"
148
-
onPress={onPressNext}
149
-
accessibilityRole="button">
150
-
{uiState.isProcessing ? (
151
-
<ActivityIndicator />
152
-
) : (
153
-
<Text type="xl-bold" style={[pal.link, s.pr5]}>
154
-
<Trans>Next</Trans>
155
-
</Text>
156
-
)}
157
-
</TouchableOpacity>
158
-
) : serviceInfoError ? (
159
-
<TouchableOpacity
160
-
testID="retryConnectBtn"
161
-
onPress={() => refetchServiceInfo()}
162
-
accessibilityRole="button"
163
-
accessibilityLabel={_(msg`Retry`)}
164
-
accessibilityHint=""
165
-
accessibilityLiveRegion="polite">
166
-
<Text type="xl-bold" style={[pal.link, s.pr5]}>
167
-
<Trans>Retry</Trans>
168
-
</Text>
169
-
</TouchableOpacity>
170
-
) : serviceInfoIsFetching ? (
171
-
<>
172
-
<ActivityIndicator color="#fff" />
173
-
<Text type="xl" style={[pal.text, s.pr5]}>
174
-
<Trans>Connecting...</Trans>
175
-
</Text>
176
-
</>
177
-
) : undefined}
178
-
</View>
179
-
<View style={s.footerSpacer} />
180
-
</KeyboardAvoidingView>
170
+
) : serviceInfoIsFetching ? (
171
+
<>
172
+
<ActivityIndicator color="#fff" />
173
+
<Text type="xl" style={[pal.text, s.pr5]}>
174
+
<Trans>Connecting...</Trans>
175
+
</Text>
176
+
</>
177
+
) : undefined}
178
+
</View>
179
+
<View style={{height: isTabletOrDesktop ? 50 : 400}} />
181
180
</ScrollView>
182
181
</LoggedOutLayout>
183
182
)