tweak padding

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -9,10 +9,12 @@ import {
 import {AppBskyGraphDefs, AppBskyGraphGetActorStarterPacks} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
+import {NavigationProp} from 'lib/routes/types'
 import {List, ListRef} from 'view/com/util/List'
 import {Text} from 'view/com/util/text/Text'
 import {atoms as a, useTheme} from '#/alf'
@@ -130,6 +132,7 @@ export const ProfileStarterPacks = React.forwardRef<
 function EmptyComponent() {
   const {_} = useLingui()
   const t = useTheme()
+  const navigation = useNavigation<NavigationProp>()
 
   return (
     <View style={[a.mt_xl, a.px_2xl, a.gap_2xl]}>
@@ -150,7 +153,8 @@ function EmptyComponent() {
         label={_(msg`Create a starter pack`)}
         variant="solid"
         color="primary"
-        size="medium">
+        size="medium"
+        onPress={() => navigation.navigate('StarterPackWizard')}>
         <ButtonText>
           <Trans>Create a starter pack</Trans>
         </ButtonText>

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -34,7 +34,7 @@ export function StepDetails() {
           </Text>
           <Text style={[a.text_center, a.text_md, a.px_md]}>
             <Trans>
-              Invite friends directly to follow your favorite feeds and people{' '}
+              Invite your friends to follow your favorite feeds and people
             </Trans>
           </Text>
         </View>

src/screens/StarterPack/Wizard/index.tsx

@@ -56,8 +56,7 @@ import {Provider} from './State'
 export function Wizard({
   route,
 }: NativeStackScreenProps<CommonNavigatorParams, 'StarterPackWizard'>) {
-  const params = route.params
-  const {name, rkey} = params
+  const {name, rkey} = route.params ?? {}
   const {currentAccount} = useSession()
 
   const {_} = useLingui()
@@ -562,7 +561,7 @@ function Footer({
     (state.currentStep === 'Profiles' && items.length > 1) ||
     (state.currentStep === 'Feeds' && items.length > 0)
 
-  const textStyles = [isWeb && a.text_md]
+  const textStyles = [a.text_md]
 
   return (
     <View
@@ -575,8 +574,8 @@ function Footer({
         t.atoms.bg,
         t.atoms.border_contrast_medium,
         {
-          height: 220,
-          paddingBottom: 12 + bottomInset,
+          height: 224,
+          paddingBottom: 20 + bottomInset,
         },
         isNative && [
           a.border_l,
@@ -589,7 +588,7 @@ function Footer({
         ],
       ]}>
       {items.length > 0 && (
-        <View style={[a.absolute, {right: 14, top: 26}]}>
+        <View style={[a.absolute, {right: 14, top: 31}]}>
           <Text style={[a.font_bold]}>
             {items.length}/{state.currentStep === 'Profiles' ? 50 : 3}
           </Text>
@@ -601,7 +600,7 @@ function Footer({
           <UserAvatar
             key={index}
             avatar={p.avatar}
-            size={28}
+            size={32}
             type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
           />
         ))}
@@ -625,12 +624,14 @@ function Footer({
             </Trans>
           ) : items.length === 1 ? (
             <Trans>
-              <Text style={[a.font_bold]}>{getName(items[0])}</Text> is included
-              in your starter pack
+              <Text style={[a.font_bold, textStyles]}>{getName(items[0])}</Text>{' '}
+              is included in your starter pack
             </Trans>
           ) : items.length === 2 ? (
             <Trans>
-              <Text style={[a.font_bold]}>{getName(items[0])} </Text>
+              <Text style={[a.font_bold, textStyles]}>
+                {getName(items[0])}{' '}
+              </Text>
               and
               <Text> </Text>
               <Text style={[a.font_bold]}>{getName(items[1])} </Text>
@@ -638,8 +639,12 @@ function Footer({
             </Trans>
           ) : (
             <Trans>
-              <Text style={[a.font_bold]}>{getName(items[0])}, </Text>
-              <Text style={[a.font_bold]}>{getName(items[1])}, </Text>
+              <Text style={[a.font_bold, textStyles]}>
+                {getName(items[0])},{' '}
+              </Text>
+              <Text style={[a.font_bold, textStyles]}>
+                {getName(items[1])},{' '}
+              </Text>
               and {items.length - 2}{' '}
               <Plural value={items.length - 2} one="other" other="others" /> are
               included in your starter pack
@@ -652,7 +657,7 @@ function Footer({
         {isEditEnabled ? (
           <Button
             label={_(msg`Edit`)}
-            variant="ghost"
+            variant="outline"
             color="primary"
             size="small"
             onPress={editDialogControl.open}>