move next/back to the header

src/screens/StarterPack/Wizard/index.tsx

@@ -1,9 +1,6 @@
 import React from 'react'
 import {Keyboard, View} from 'react-native'
-import {
+import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
-  KeyboardAwareScrollView,
-  KeyboardStickyView,
-} from 'react-native-keyboard-controller'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -13,7 +10,7 @@ import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
 import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
 import {useProfileQuery} from 'state/queries/profile'
 import {useSession} from 'state/session'
-import {ViewHeader} from 'view/com/util/ViewHeader'
+import {Text} from 'view/com/util/text/Text'
 import {CenteredView} from 'view/com/util/Views'
 import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State'
 import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails'
@@ -22,7 +19,6 @@ import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
-import {Loader} from '#/components/Loader'
 import {WizardAddDialog} from '#/components/StarterPack/Wizard/WizardAddDialog'
 import {Provider} from './State'
 
@@ -81,7 +77,6 @@ function WizardInner() {
     did: currentAccount?.did,
     staleTime: 0,
   })
-  const bottomBarOffset = useBottomBarOffset()
   const searchDialogControl = useDialogControl()
 
   React.useEffect(() => {
@@ -90,19 +85,19 @@ function WizardInner() {
     })
   }, [navigation])
 
-  const wizardUiStrings: Record<WizardStep, {header: string; button: string}> =
+  const wizardUiStrings: Record<WizardStep, {header: string; nextBtn: string}> =
     {
       Details: {
         header: _(msg`Starter Pack`),
-        button: _(msg`Continue`),
+        nextBtn: _(msg`Next`),
       },
       Profiles: {
         header: _(msg`Profiles`),
-        button: _(msg`Continue`),
+        nextBtn: _(msg`Next`),
       },
       Feeds: {
         header: _(msg`Feeds`),
-        button: _(msg`Finish`),
+        nextBtn: _(msg`Finish`),
       },
     }
 
@@ -135,52 +130,52 @@ function WizardInner() {
     <CenteredView
       style={[a.flex_1, {marginBottom: bottomOffset + 20}]}
       sideBorders>
-      <ViewHeader
+      <View
-        title={uiStrings.header}
+        style={[
-        onBackPress={
+          a.flex_row,
-          state.currentStep !== 'Details'
+          a.justify_between,
-            ? () => dispatch({type: 'Back'})
+          a.align_center,
-            : undefined
+          a.px_md,
-        }
+          a.pb_sm,
-        showBorder={true}
+          a.border_b,
-        showOnDesktop={true}
+          t.atoms.border_contrast_medium,
-        renderButton={
+        ]}>
-          state.currentStep === 'Profiles' || state.currentStep === 'Feeds'
+        <View style={[{width: 65}]}>
-            ? () => (
+          {state.currentStep !== 'Details' && (
-                <Button
+            <Button
-                  label={_(msg`Cancel`)}
+              label={_(msg`Back`)}
-                  variant="solid"
+              variant="solid"
-                  color="primary"
+              color="secondary"
-                  size="xsmall"
+              size="xsmall"
-                  onPress={searchDialogControl.open}
+              onPress={() => dispatch({type: 'Back'})}>
-                  style={{marginLeft: -15}}>
+              <ButtonText>
-                  <ButtonText>
+                <Trans>Back</Trans>
-                    <Trans>Add</Trans>
+              </ButtonText>
-                  </ButtonText>
+            </Button>
-                </Button>
+          )}
-              )
+        </View>
-            : undefined
+        <Text
-        }
+          type="title"
-      />
+          style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}>
+          {uiStrings.header}
+        </Text>
+        <View style={[{width: 65}]}>
+          <Button
+            label={uiStrings.nextBtn}
+            variant="solid"
+            color="primary"
+            size="xsmall"
+            onPress={onNext}>
+            <ButtonText>
+              <Trans>{uiStrings.nextBtn}</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </View>
+
       <Container>
         <StepView />
       </Container>
-      <KeyboardStickyView offset={{opened: bottomBarOffset}}>
-        <View style={a.px_md}>
-          <Button
-            label={uiStrings.button}
-            variant="solid"
-            color="primary"
-            size="large"
-            onPress={onNext}
-            disabled={!state.canNext || state.processing}>
-            <ButtonText>{uiStrings.button}</ButtonText>
-            {state.processing && (
-              <Loader size="md" style={t.atoms.text_contrast_low} />
-            )}
-          </Button>
-        </View>
-      </KeyboardStickyView>
 
       {(state.currentStep === 'Profiles' || state.currentStep === 'Feeds') && (
         <WizardAddDialog