style tweaks

src/components/StarterPack/Wizard/WizardListEmpty.tsx

@@ -12,7 +12,7 @@ export function WizardListEmpty({type}: {type: 'profiles' | 'feeds'}) {
 
   return (
     <View
-      style={[a.flex_1, a.px_md, a.align_center, a.gap_md, {marginTop: 80}]}>
+      style={[a.flex_1, a.px_md, a.align_center, a.gap_md, {marginTop: 100}]}>
       {type === 'profiles' ? (
         <UserCircle
           width={100}
@@ -26,15 +26,12 @@ export function WizardListEmpty({type}: {type: 'profiles' | 'feeds'}) {
           style={t.atoms.text_contrast_medium}
         />
       )}
-      <Text
+      <Text style={[a.text_md, a.text_center, t.atoms.text_contrast_medium]}>
-        style={[
-          a.font_bold,
-          a.text_xl,
-          a.text_center,
-          t.atoms.text_contrast_medium,
-        ]}>
         {type === 'profiles' ? (
-          <Trans>Recommend people to follow!</Trans>
+          <Trans>
+            Add people to your starter pack that you think others will enjoy
+            following
+          </Trans>
         ) : (
           <Trans>Add some cool feeds!</Trans>
         )}

src/screens/StarterPack/Wizard/index.tsx

@@ -85,8 +85,20 @@ function WizardInner() {
     })
   }, [navigation])
 
-  const wizardUiStrings: Record<WizardStep, {header: string; nextBtn: string}> =
+  const continueIsCta = () => {
-    {
+    if (state.currentStep === 'Details') {
+      return true
+    } else if (state.currentStep === 'Profiles') {
+      return state.profiles.length > 0
+    } else if (state.currentStep === 'Feeds') {
+      return state.feeds.length > 0
+    }
+  }
+
+  const wizardUiStrings: Record<
+    WizardStep,
+    {header: string; nextBtn: string; subtitle?: string}
+  > = {
     Details: {
       header: _(msg`Starter Pack`),
       nextBtn: _(msg`Next`),
@@ -94,10 +106,14 @@ function WizardInner() {
     Profiles: {
       header: _(msg`Profiles`),
       nextBtn: _(msg`Next`),
+      subtitle: _(
+        msg`Add people to your starter pack that you think others will enjoy following`,
+      ),
     },
     Feeds: {
       header: _(msg`Feeds`),
       nextBtn: _(msg`Finish`),
+      subtitle: _(msg`Some subtitle`),
     },
   }
 
@@ -132,19 +148,18 @@ function WizardInner() {
       sideBorders>
       <View
         style={[
-          a.flex_row,
-          a.justify_between,
-          a.align_center,
-          a.px_md,
           a.pb_sm,
+          a.px_md,
           a.border_b,
           t.atoms.border_contrast_medium,
+          a.gap_sm,
         ]}>
+        <View style={[a.flex_row, a.justify_between, a.align_center]}>
           <View style={[{width: 65}]}>
             {state.currentStep !== 'Details' && (
               <Button
                 label={_(msg`Back`)}
-              variant="solid"
+                variant="ghost"
                 color="secondary"
                 size="xsmall"
                 onPress={() => dispatch({type: 'Back'})}>
@@ -154,22 +169,10 @@ function WizardInner() {
               </Button>
             )}
           </View>
-        <Text
+          <Text style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}>
-          type="title"
-          style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}>
             {uiStrings.header}
           </Text>
-        <View style={[{width: 65}]}>
+          <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>
 
@@ -177,11 +180,12 @@ function WizardInner() {
         <StepView />
       </Container>
 
+      <View style={[a.gap_sm]}>
         {state.currentStep !== 'Details' && (
           <Button
             label={_(msg`Cancel`)}
             onPress={addDialogControl.open}
-          variant="solid"
+            variant={!continueIsCta() ? 'solid' : 'ghost'}
             color="primary"
             size="medium"
             style={[a.mx_2xl]}>
@@ -195,6 +199,17 @@ function WizardInner() {
           </Button>
         )}
 
+        <Button
+          label={_(msg`Cancel`)}
+          onPress={onNext}
+          variant={continueIsCta() ? 'solid' : 'ghost'}
+          color="primary"
+          size="medium"
+          style={[a.mx_2xl]}>
+          <ButtonText>{uiStrings.nextBtn}</ButtonText>
+        </Button>
+      </View>
+
       {(state.currentStep === 'Profiles' || state.currentStep === 'Feeds') && (
         <WizardAddDialog
           control={addDialogControl}