Fix starter pack layout (#7869) · bwc9876.dev/witchsky.app@9e59a2e

+7 -12

src/screens/StarterPack/StarterPackLandingScreen.tsx

··· 1 1 import React from 'react' 2 - import {Pressable, ScrollView, View} from 'react-native' 2 + import {Pressable, View} from 'react-native' 3 3 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' 4 4 import { 5 5 AppBskyGraphDefs, ··· 25 25 } from '#/state/shell/starter-pack' 26 26 import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut' 27 27 import {formatCount} from '#/view/com/util/numeric/format' 28 - import {CenteredView} from '#/view/com/util/Views' 29 28 import {Logo} from '#/view/icons/Logo' 30 29 import {atoms as a, useTheme} from '#/alf' 31 30 import {Button, ButtonText} from '#/components/Button' 32 31 import {useDialogControl} from '#/components/Dialog' 33 32 import * as FeedCard from '#/components/FeedCard' 34 33 import {useRichText} from '#/components/hooks/useRichText' 34 + import * as Layout from '#/components/Layout' 35 35 import {LinearGradientBackground} from '#/components/LinearGradientBackground' 36 36 import {ListMaybePlaceholder} from '#/components/Lists' 37 37 import {Default as ProfileCard} from '#/components/ProfileCard' ··· 165 165 } 166 166 167 167 return ( 168 - <CenteredView style={a.flex_1}> 169 - <ScrollView 170 - style={[a.flex_1, t.atoms.bg]} 171 - contentContainerStyle={{paddingBottom: 100}}> 168 + <View style={[a.flex_1]}> 169 + <Layout.Content ignoreTabletLayoutOffset> 172 170 <LinearGradientBackground 173 171 style={[ 174 172 a.align_center, ··· 313 311 </ButtonText> 314 312 </Button> 315 313 </View> 316 - </ScrollView> 314 + </Layout.Content> 317 315 <AppClipOverlay 318 316 visible={appClipOverlayVisible} 319 317 setIsVisible={setAppClipOverlayVisible} ··· 358 356 content="app-id=xyz.blueskyweb.app, app-clip-bundle-id=xyz.blueskyweb.app.AppClip, app-clip-display=card" 359 357 /> 360 358 )} 361 - </CenteredView> 359 + </View> 362 360 ) 363 361 } 364 362 ··· 376 374 accessibilityRole="button" 377 375 style={[ 378 376 a.absolute, 377 + a.inset_0, 379 378 { 380 - top: 0, 381 - left: 0, 382 - right: 0, 383 - bottom: 0, 384 379 backgroundColor: 'rgba(0, 0, 0, 0.95)', 385 380 zIndex: 1, 386 381 },

+99 -110

src/screens/StarterPack/StarterPackScreen.tsx

··· 24 24 import {cleanError} from '#/lib/strings/errors' 25 25 import {getStarterPackOgCard} from '#/lib/strings/starter-pack' 26 26 import {logger} from '#/logger' 27 - import {isWeb} from '#/platform/detection' 28 27 import {updateProfileShadow} from '#/state/cache/profile-shadow' 29 28 import {useModerationOpts} from '#/state/preferences/moderation-opts' 30 29 import {getAllListMembers} from '#/state/queries/list-members' ··· 43 42 import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader' 44 43 import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader' 45 44 import * as Toast from '#/view/com/util/Toast' 46 - import {CenteredView} from '#/view/com/util/Views' 47 45 import {bulkWriteFollows} from '#/screens/Onboarding/util' 48 46 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 49 47 import {Button, ButtonIcon, ButtonText} from '#/components/Button' ··· 222 220 }, [onOpenShareDialog, routeParams.new, shareDialogControl]) 223 221 224 222 return ( 225 - <CenteredView style={[a.h_full_vh]}> 226 - <View style={isWeb ? {minHeight: '100%'} : {height: '100%'}}> 227 - <PagerWithHeader 228 - items={tabs} 229 - isHeaderReady={true} 230 - renderHeader={() => ( 231 - <Header 232 - starterPack={starterPack} 233 - routeParams={routeParams} 234 - onOpenShareDialog={onOpenShareDialog} 235 - /> 236 - )}> 237 - {showPeopleTab 238 - ? ({headerHeight, scrollElRef}) => ( 239 - <ProfilesList 240 - // Validated above 241 - listUri={starterPack!.list!.uri} 242 - headerHeight={headerHeight} 243 - // @ts-expect-error 244 - scrollElRef={scrollElRef} 245 - moderationOpts={moderationOpts} 246 - /> 247 - ) 248 - : null} 249 - {showFeedsTab 250 - ? ({headerHeight, scrollElRef}) => ( 251 - <FeedsList 252 - // @ts-expect-error ? 253 - feeds={starterPack?.feeds} 254 - headerHeight={headerHeight} 255 - // @ts-expect-error 256 - scrollElRef={scrollElRef} 257 - /> 258 - ) 259 - : null} 260 - {showPostsTab 261 - ? ({headerHeight, scrollElRef}) => ( 262 - <PostsList 263 - // Validated above 264 - listUri={starterPack!.list!.uri} 265 - headerHeight={headerHeight} 266 - // @ts-expect-error 267 - scrollElRef={scrollElRef} 268 - moderationOpts={moderationOpts} 269 - /> 270 - ) 271 - : null} 272 - </PagerWithHeader> 273 - </View> 223 + <> 224 + <PagerWithHeader 225 + items={tabs} 226 + isHeaderReady={true} 227 + renderHeader={() => ( 228 + <Header 229 + starterPack={starterPack} 230 + routeParams={routeParams} 231 + onOpenShareDialog={onOpenShareDialog} 232 + /> 233 + )}> 234 + {showPeopleTab 235 + ? ({headerHeight, scrollElRef}) => ( 236 + <ProfilesList 237 + // Validated above 238 + listUri={starterPack!.list!.uri} 239 + headerHeight={headerHeight} 240 + // @ts-expect-error 241 + scrollElRef={scrollElRef} 242 + moderationOpts={moderationOpts} 243 + /> 244 + ) 245 + : null} 246 + {showFeedsTab 247 + ? ({headerHeight, scrollElRef}) => ( 248 + <FeedsList 249 + // @ts-expect-error ? 250 + feeds={starterPack?.feeds} 251 + headerHeight={headerHeight} 252 + // @ts-expect-error 253 + scrollElRef={scrollElRef} 254 + /> 255 + ) 256 + : null} 257 + {showPostsTab 258 + ? ({headerHeight, scrollElRef}) => ( 259 + <PostsList 260 + // Validated above 261 + listUri={starterPack!.list!.uri} 262 + headerHeight={headerHeight} 263 + // @ts-expect-error 264 + scrollElRef={scrollElRef} 265 + moderationOpts={moderationOpts} 266 + /> 267 + ) 268 + : null} 269 + </PagerWithHeader> 274 270 275 271 <QrCodeDialog 276 272 control={qrCodeDialogControl} ··· 284 280 link={link} 285 281 imageLoaded={imageLoaded} 286 282 /> 287 - </CenteredView> 283 + </> 288 284 ) 289 285 } 290 286 ··· 707 703 }) 708 704 709 705 return ( 710 - <CenteredView 711 - style={[ 712 - a.flex_1, 713 - a.align_center, 714 - a.gap_5xl, 715 - !gtMobile && a.justify_between, 716 - t.atoms.border_contrast_low, 717 - {paddingTop: 175, paddingBottom: 110}, 718 - ]} 719 - sideBorders={true}> 720 - <View style={[a.w_full, a.align_center, a.gap_lg]}> 721 - <Text style={[a.font_bold, a.text_3xl]}> 722 - <Trans>Starter pack is invalid</Trans> 723 - </Text> 724 - <Text 725 - style={[ 726 - a.text_md, 727 - a.text_center, 728 - t.atoms.text_contrast_high, 729 - {lineHeight: 1.4}, 730 - gtMobile ? {width: 450} : [a.w_full, a.px_lg], 731 - ]}> 732 - <Trans> 733 - The starter pack that you are trying to view is invalid. You may 734 - delete this starter pack instead. 735 - </Trans> 736 - </Text> 706 + <Layout.Content centerContent> 707 + <View style={[a.py_4xl, a.px_xl, a.align_center, a.gap_5xl]}> 708 + <View style={[a.w_full, a.align_center, a.gap_lg]}> 709 + <Text style={[a.font_bold, a.text_3xl]}> 710 + <Trans>Starter pack is invalid</Trans> 711 + </Text> 712 + <Text 713 + style={[ 714 + a.text_md, 715 + a.text_center, 716 + t.atoms.text_contrast_high, 717 + {lineHeight: 1.4}, 718 + gtMobile ? {width: 450} : [a.w_full, a.px_lg], 719 + ]}> 720 + <Trans> 721 + The starter pack that you are trying to view is invalid. You may 722 + delete this starter pack instead. 723 + </Trans> 724 + </Text> 725 + </View> 726 + <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}> 727 + <Button 728 + variant="solid" 729 + color="primary" 730 + label={_(msg`Delete starter pack`)} 731 + size="large" 732 + style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]} 733 + disabled={isProcessing} 734 + onPress={() => { 735 + setIsProcessing(true) 736 + deleteStarterPack({rkey}) 737 + }}> 738 + <ButtonText> 739 + <Trans>Delete</Trans> 740 + </ButtonText> 741 + {isProcessing && <Loader size="xs" color="white" />} 742 + </Button> 743 + <Button 744 + variant="solid" 745 + color="secondary" 746 + label={_(msg`Return to previous page`)} 747 + size="large" 748 + style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]} 749 + disabled={isProcessing} 750 + onPress={goBack}> 751 + <ButtonText> 752 + <Trans>Go Back</Trans> 753 + </ButtonText> 754 + </Button> 755 + </View> 737 756 </View> 738 - <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}> 739 - <Button 740 - variant="solid" 741 - color="primary" 742 - label={_(msg`Delete starter pack`)} 743 - size="large" 744 - style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]} 745 - disabled={isProcessing} 746 - onPress={() => { 747 - setIsProcessing(true) 748 - deleteStarterPack({rkey}) 749 - }}> 750 - <ButtonText> 751 - <Trans>Delete</Trans> 752 - </ButtonText> 753 - {isProcessing && <Loader size="xs" color="white" />} 754 - </Button> 755 - <Button 756 - variant="solid" 757 - color="secondary" 758 - label={_(msg`Return to previous page`)} 759 - size="large" 760 - style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]} 761 - disabled={isProcessing} 762 - onPress={goBack}> 763 - <ButtonText> 764 - <Trans>Go Back</Trans> 765 - </ButtonText> 766 - </Button> 767 - </View> 768 - </CenteredView> 757 + </Layout.Content> 769 758 ) 770 759 }

+2 -3

src/screens/StarterPack/Wizard/index.tsx

··· 41 41 import {useSetMinimalShellMode} from '#/state/shell' 42 42 import * as Toast from '#/view/com/util/Toast' 43 43 import {UserAvatar} from '#/view/com/util/UserAvatar' 44 - import {CenteredView} from '#/view/com/util/Views' 45 44 import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State' 46 45 import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails' 47 46 import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds' ··· 281 280 } 282 281 283 282 return ( 284 - <CenteredView style={[a.flex_1]} sideBorders> 283 + <Layout.Center style={[a.flex_1]}> 285 284 <Layout.Header.Outer> 286 285 <Layout.Header.BackButton 287 286 label={_(msg`Back`)} ··· 319 318 profile={profile} 320 319 /> 321 320 )} 322 - </CenteredView> 321 + </Layout.Center> 323 322 ) 324 323 } 325 324

Configure Feed

Configure Feed