diff options
Diffstat (limited to 'src/screens/StarterPack/Wizard/index.tsx')
| -rw-r--r-- | src/screens/StarterPack/Wizard/index.tsx | 81 |
1 files changed, 29 insertions, 52 deletions
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index b0d71b929..b42b753e3 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Keyboard, TouchableOpacity, View} from 'react-native' +import {Keyboard, View} from 'react-native' import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {Image} from 'expo-image' @@ -10,13 +10,12 @@ import { ModerationOpts, } from '@atproto/api' import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from '#/lib/constants' +import {STARTER_PACK_MAX_SIZE} from '#/lib/constants' import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController' import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' @@ -29,7 +28,7 @@ import { parseStarterPackUri, } from '#/lib/strings/starter-pack' import {logger} from '#/logger' -import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {isNative} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useAllListMembersQuery} from '#/state/queries/list-members' import {useProfileQuery} from '#/state/queries/profile' @@ -147,7 +146,6 @@ function WizardInner({ }) { const navigation = useNavigation<NavigationProp>() const {_} = useLingui() - const t = useTheme() const setMinimalShellMode = useSetMinimalShellMode() const [state, dispatch] = useWizardState() const {currentAccount} = useSession() @@ -283,45 +281,24 @@ function WizardInner({ return ( <CenteredView style={[a.flex_1]} sideBorders> - <View - style={[ - a.flex_row, - a.pb_sm, - a.px_md, - a.border_b, - t.atoms.border_contrast_medium, - a.gap_sm, - a.justify_between, - a.align_center, - isAndroid && a.pt_sm, - isWeb && [a.py_md], - ]}> - <View style={[{width: 65}]}> - <TouchableOpacity - testID="viewHeaderDrawerBtn" - hitSlop={HITSLOP_10} - accessibilityRole="button" - accessibilityLabel={_(msg`Back`)} - accessibilityHint={_(msg`Go back to the previous step`)} - onPress={() => { - if (state.currentStep === 'Details') { - navigation.pop() - } else { - dispatch({type: 'Back'}) - } - }}> - <FontAwesomeIcon - size={18} - icon="angle-left" - color={t.atoms.text.color} - /> - </TouchableOpacity> - </View> - <Text style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}> - {currUiStrings.header} - </Text> - <View style={[{width: 65}]} /> - </View> + <Layout.Header.Outer> + <Layout.Header.BackButton + label={_(msg`Back`)} + accessibilityHint={_(msg`Go back to the previous step`)} + onPress={evt => { + if (state.currentStep !== 'Details') { + evt.preventDefault() + dispatch({type: 'Back'}) + } + }} + /> + <Layout.Header.Content> + <Layout.Header.TitleText> + {currUiStrings.header} + </Layout.Header.TitleText> + </Layout.Header.Content> + <Layout.Header.Slot /> + </Layout.Header.Outer> <Container> {state.currentStep === 'Details' ? ( @@ -463,17 +440,17 @@ function Footer({ <Trans> <Text style={[a.font_bold, textStyles]}>You</Text> and <Text> </Text> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[1] /* [0] is self, skip it */)}{' '} </Text> are included in your starter pack </Trans> ) : items.length > 2 ? ( <Trans context="profiles"> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[1] /* [0] is self, skip it */)},{' '} </Text> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[2])},{' '} </Text> and{' '} @@ -504,29 +481,29 @@ function Footer({ { items.length === 1 ? ( <Trans> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[0])} </Text>{' '} is included in your starter pack </Trans> ) : items.length === 2 ? ( <Trans> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[0])} </Text>{' '} and <Text> </Text> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[1])}{' '} </Text> are included in your starter pack </Trans> ) : items.length > 2 ? ( <Trans context="feeds"> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[0])},{' '} </Text> - <Text style={[a.font_bold, textStyles]}> + <Text style={[a.font_bold, textStyles]} emoji> {getName(items[1])},{' '} </Text> and{' '} |