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,21 +85,37 @@ function WizardInner() {
     })
   }, [navigation])
 
-  const wizardUiStrings: Record<WizardStep, {header: string; nextBtn: string}> =
+  const continueIsCta = () => {
-    {
+    if (state.currentStep === 'Details') {
-      Details: {
+      return true
-        header: _(msg`Starter Pack`),
+    } else if (state.currentStep === 'Profiles') {
-        nextBtn: _(msg`Next`),
+      return state.profiles.length > 0
-      },
+    } else if (state.currentStep === 'Feeds') {
-      Profiles: {
+      return state.feeds.length > 0
-        header: _(msg`Profiles`),
-        nextBtn: _(msg`Next`),
-      },
-      Feeds: {
-        header: _(msg`Feeds`),
-        nextBtn: _(msg`Finish`),
-      },
     }
+  }
+
+  const wizardUiStrings: Record<
+    WizardStep,
+    {header: string; nextBtn: string; subtitle?: string}
+  > = {
+    Details: {
+      header: _(msg`Starter Pack`),
+      nextBtn: _(msg`Next`),
+    },
+    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`),
+    },
+  }
 
   const uiStrings = wizardUiStrings[state.currentStep]
 
@@ -132,44 +148,31 @@ 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={[{width: 65}]}>
+        <View style={[a.flex_row, a.justify_between, a.align_center]}>
-          {state.currentStep !== 'Details' && (
+          <View style={[{width: 65}]}>
-            <Button
+            {state.currentStep !== 'Details' && (
-              label={_(msg`Back`)}
+              <Button
-              variant="solid"
+                label={_(msg`Back`)}
-              color="secondary"
+                variant="ghost"
-              size="xsmall"
+                color="secondary"
-              onPress={() => dispatch({type: 'Back'})}>
+                size="xsmall"
-              <ButtonText>
+                onPress={() => dispatch({type: 'Back'})}>
-                <Trans>Back</Trans>
+                <ButtonText>
-              </ButtonText>
+                  <Trans>Back</Trans>
-            </Button>
+                </ButtonText>
-          )}
+              </Button>
-        </View>
+            )}
-        <Text
+          </View>
-          type="title"
+          <Text style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}>
-          style={[a.flex_1, a.font_bold, a.text_lg, a.text_center]}>
+            {uiStrings.header}
-          {uiStrings.header}
+          </Text>
-        </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,23 +180,35 @@ function WizardInner() {
         <StepView />
       </Container>
 
-      {state.currentStep !== 'Details' && (
+      <View style={[a.gap_sm]}>
+        {state.currentStep !== 'Details' && (
+          <Button
+            label={_(msg`Cancel`)}
+            onPress={addDialogControl.open}
+            variant={!continueIsCta() ? 'solid' : 'ghost'}
+            color="primary"
+            size="medium"
+            style={[a.mx_2xl]}>
+            <ButtonText>
+              {state.currentStep === 'Profiles' ? (
+                <Trans>Find People</Trans>
+              ) : (
+                <Trans>Find Feeds</Trans>
+              )}
+            </ButtonText>
+          </Button>
+        )}
+
         <Button
           label={_(msg`Cancel`)}
-          onPress={addDialogControl.open}
+          onPress={onNext}
-          variant="solid"
+          variant={continueIsCta() ? 'solid' : 'ghost'}
           color="primary"
           size="medium"
           style={[a.mx_2xl]}>
-          <ButtonText>
+          <ButtonText>{uiStrings.nextBtn}</ButtonText>
-            {state.currentStep === 'Profiles' ? (
-              <Trans>Find People</Trans>
-            ) : (
-              <Trans>Find Feeds</Trans>
-            )}
-          </ButtonText>
         </Button>
-      )}
+      </View>
 
       {(state.currentStep === 'Profiles' || state.currentStep === 'Feeds') && (
         <WizardAddDialog