From 9e59a2eef2f82511a9a9a056dbdb0c62fe2f61c6 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 28 Feb 2025 14:50:44 -0800
Subject: Fix starter pack layout (#7869)

---
 src/screens/StarterPack/StarterPackScreen.tsx | 209 ++++++++++++--------------
 1 file changed, 99 insertions(+), 110 deletions(-)

(limited to 'src/screens/StarterPack/StarterPackScreen.tsx')

diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx
index ac61c153b..cf153db44 100644
--- a/src/screens/StarterPack/StarterPackScreen.tsx
+++ b/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,55 +220,53 @@ 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}
-          renderHeader={() => (
-            <Header
-              starterPack={starterPack}
-              routeParams={routeParams}
-              onOpenShareDialog={onOpenShareDialog}
-            />
-          )}>
-          {showPeopleTab
-            ? ({headerHeight, scrollElRef}) => (
-                <ProfilesList
-                  // Validated above
-                  listUri={starterPack!.list!.uri}
-                  headerHeight={headerHeight}
-                  // @ts-expect-error
-                  scrollElRef={scrollElRef}
-                  moderationOpts={moderationOpts}
-                />
-              )
-            : null}
-          {showFeedsTab
-            ? ({headerHeight, scrollElRef}) => (
-                <FeedsList
-                  // @ts-expect-error ?
-                  feeds={starterPack?.feeds}
-                  headerHeight={headerHeight}
-                  // @ts-expect-error
-                  scrollElRef={scrollElRef}
-                />
-              )
-            : null}
-          {showPostsTab
-            ? ({headerHeight, scrollElRef}) => (
-                <PostsList
-                  // Validated above
-                  listUri={starterPack!.list!.uri}
-                  headerHeight={headerHeight}
-                  // @ts-expect-error
-                  scrollElRef={scrollElRef}
-                  moderationOpts={moderationOpts}
-                />
-              )
-            : null}
-        </PagerWithHeader>
-      </View>
+    <>
+      <PagerWithHeader
+        items={tabs}
+        isHeaderReady={true}
+        renderHeader={() => (
+          <Header
+            starterPack={starterPack}
+            routeParams={routeParams}
+            onOpenShareDialog={onOpenShareDialog}
+          />
+        )}>
+        {showPeopleTab
+          ? ({headerHeight, scrollElRef}) => (
+              <ProfilesList
+                // Validated above
+                listUri={starterPack!.list!.uri}
+                headerHeight={headerHeight}
+                // @ts-expect-error
+                scrollElRef={scrollElRef}
+                moderationOpts={moderationOpts}
+              />
+            )
+          : null}
+        {showFeedsTab
+          ? ({headerHeight, scrollElRef}) => (
+              <FeedsList
+                // @ts-expect-error ?
+                feeds={starterPack?.feeds}
+                headerHeight={headerHeight}
+                // @ts-expect-error
+                scrollElRef={scrollElRef}
+              />
+            )
+          : null}
+        {showPostsTab
+          ? ({headerHeight, scrollElRef}) => (
+              <PostsList
+                // Validated above
+                listUri={starterPack!.list!.uri}
+                headerHeight={headerHeight}
+                // @ts-expect-error
+                scrollElRef={scrollElRef}
+                moderationOpts={moderationOpts}
+              />
+            )
+          : null}
+      </PagerWithHeader>
 
       <QrCodeDialog
         control={qrCodeDialogControl}
@@ -284,7 +280,7 @@ function StarterPackScreenLoaded({
         link={link}
         imageLoaded={imageLoaded}
       />
-    </CenteredView>
+    </>
   )
 }
 
@@ -707,64 +703,57 @@ 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}>
-      <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>
-        </Text>
-        <Text
-          style={[
-            a.text_md,
-            a.text_center,
-            t.atoms.text_contrast_high,
-            {lineHeight: 1.4},
-            gtMobile ? {width: 450} : [a.w_full, a.px_lg],
-          ]}>
-          <Trans>
-            The starter pack that you are trying to view is invalid. You may
-            delete this starter pack instead.
-          </Trans>
-        </Text>
-      </View>
-      <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
-        <Button
-          variant="solid"
-          color="primary"
-          label={_(msg`Delete starter pack`)}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
-          disabled={isProcessing}
-          onPress={() => {
-            setIsProcessing(true)
-            deleteStarterPack({rkey})
-          }}>
-          <ButtonText>
-            <Trans>Delete</Trans>
-          </ButtonText>
-          {isProcessing && <Loader size="xs" color="white" />}
-        </Button>
-        <Button
-          variant="solid"
-          color="secondary"
-          label={_(msg`Return to previous page`)}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
-          disabled={isProcessing}
-          onPress={goBack}>
-          <ButtonText>
-            <Trans>Go Back</Trans>
-          </ButtonText>
-        </Button>
+    <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>
+          </Text>
+          <Text
+            style={[
+              a.text_md,
+              a.text_center,
+              t.atoms.text_contrast_high,
+              {lineHeight: 1.4},
+              gtMobile ? {width: 450} : [a.w_full, a.px_lg],
+            ]}>
+            <Trans>
+              The starter pack that you are trying to view is invalid. You may
+              delete this starter pack instead.
+            </Trans>
+          </Text>
+        </View>
+        <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
+          <Button
+            variant="solid"
+            color="primary"
+            label={_(msg`Delete starter pack`)}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
+            disabled={isProcessing}
+            onPress={() => {
+              setIsProcessing(true)
+              deleteStarterPack({rkey})
+            }}>
+            <ButtonText>
+              <Trans>Delete</Trans>
+            </ButtonText>
+            {isProcessing && <Loader size="xs" color="white" />}
+          </Button>
+          <Button
+            variant="solid"
+            color="secondary"
+            label={_(msg`Return to previous page`)}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
+            disabled={isProcessing}
+            onPress={goBack}>
+            <ButtonText>
+              <Trans>Go Back</Trans>
+            </ButtonText>
+          </Button>
+        </View>
       </View>
-    </CenteredView>
+    </Layout.Content>
   )
 }
-- 
cgit 1.4.1