Fix starter pack layout (#7869)

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, ScrollView, View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {
   AppBskyGraphDefs,
@@ -25,13 +25,13 @@ import {
 } from '#/state/shell/starter-pack'
 import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut'
 import {formatCount} from '#/view/com/util/numeric/format'
-import {CenteredView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import * as FeedCard from '#/components/FeedCard'
 import {useRichText} from '#/components/hooks/useRichText'
+import * as Layout from '#/components/Layout'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
@@ -165,10 +165,8 @@ function LandingScreenLoaded({
   }
 
   return (
-    <CenteredView style={a.flex_1}>
-      <ScrollView
-        style={[a.flex_1, t.atoms.bg]}
-        contentContainerStyle={{paddingBottom: 100}}>
+    <View style={[a.flex_1]}>
+      <Layout.Content ignoreTabletLayoutOffset>
         <LinearGradientBackground
           style={[
             a.align_center,
@@ -313,7 +311,7 @@ function LandingScreenLoaded({
             </ButtonText>
           </Button>
         </View>
-      </ScrollView>
+      </Layout.Content>
       <AppClipOverlay
         visible={appClipOverlayVisible}
         setIsVisible={setAppClipOverlayVisible}
@@ -358,7 +356,7 @@ function LandingScreenLoaded({
           content="app-id=xyz.blueskyweb.app, app-clip-bundle-id=xyz.blueskyweb.app.AppClip, app-clip-display=card"
         />
       )}
-    </CenteredView>
+    </View>
   )
 }
 
@@ -376,11 +374,8 @@ export function AppClipOverlay({
       accessibilityRole="button"
       style={[
         a.absolute,
+        a.inset_0,
         {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
           backgroundColor: 'rgba(0, 0, 0, 0.95)',
           zIndex: 1,
         },

src/screens/StarterPack/StarterPackScreen.tsx

@@ -24,7 +24,6 @@ import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {updateProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {getAllListMembers} from '#/state/queries/list-members'
@@ -43,7 +42,6 @@ import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
 import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
 import * as Toast from '#/view/com/util/Toast'
-import {CenteredView} from '#/view/com/util/Views'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -222,8 +220,7 @@ function StarterPackScreenLoaded({
   }, [onOpenShareDialog, routeParams.new, shareDialogControl])
 
   return (
-    <CenteredView style={[a.h_full_vh]}>
-      <View style={isWeb ? {minHeight: '100%'} : {height: '100%'}}>
+    <>
       <PagerWithHeader
         items={tabs}
         isHeaderReady={true}
@@ -270,7 +267,6 @@ function StarterPackScreenLoaded({
             )
           : null}
       </PagerWithHeader>
-      </View>
 
       <QrCodeDialog
         control={qrCodeDialogControl}
@@ -284,7 +280,7 @@ function StarterPackScreenLoaded({
         link={link}
         imageLoaded={imageLoaded}
       />
-    </CenteredView>
+    </>
   )
 }
 
@@ -707,16 +703,8 @@ function InvalidStarterPack({rkey}: {rkey: string}) {
   })
 
   return (
-    <CenteredView
-      style={[
-        a.flex_1,
-        a.align_center,
-        a.gap_5xl,
-        !gtMobile && a.justify_between,
-        t.atoms.border_contrast_low,
-        {paddingTop: 175, paddingBottom: 110},
-      ]}
-      sideBorders={true}>
+    <Layout.Content centerContent>
+      <View style={[a.py_4xl, a.px_xl, a.align_center, a.gap_5xl]}>
         <View style={[a.w_full, a.align_center, a.gap_lg]}>
           <Text style={[a.font_bold, a.text_3xl]}>
             <Trans>Starter pack is invalid</Trans>
@@ -765,6 +753,7 @@ function InvalidStarterPack({rkey}: {rkey: string}) {
             </ButtonText>
           </Button>
         </View>
-    </CenteredView>
+      </View>
+    </Layout.Content>
   )
 }

src/screens/StarterPack/Wizard/index.tsx

@@ -41,7 +41,6 @@ import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {CenteredView} from '#/view/com/util/Views'
 import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State'
 import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails'
 import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds'
@@ -281,7 +280,7 @@ function WizardInner({
   }
 
   return (
-    <CenteredView style={[a.flex_1]} sideBorders>
+    <Layout.Center style={[a.flex_1]}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton
           label={_(msg`Back`)}
@@ -319,7 +318,7 @@ function WizardInner({
           profile={profile}
         />
       )}
-    </CenteredView>
+    </Layout.Center>
   )
 }