From 70bb2038e822cd71595844c9f54a2a2a7363a7d7 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 13 Feb 2024 17:34:04 -0800 Subject: [PATCH] move breakpoints to individual steps --- src/screens/Onboarding/Layout.tsx | 3 +-- src/screens/Onboarding/StepAlgoFeeds/index.tsx | 5 +++-- src/screens/Onboarding/StepFinished.tsx | 5 +++-- src/screens/Onboarding/StepFollowingFeed.tsx | 5 +++-- src/screens/Onboarding/StepInterests/index.tsx | 6 ++++-- src/screens/Onboarding/StepModeration/index.tsx | 5 +++-- src/screens/Onboarding/StepProfile/index.tsx | 5 ++--- src/screens/Onboarding/StepSuggestedAccounts/index.tsx | 4 ++-- src/screens/Onboarding/StepTopicalFeeds.tsx | 5 +++-- 9 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index 6337cee09d..0cb74bfbf2 100644 --- a/src/screens/Onboarding/Layout.tsx +++ b/src/screens/Onboarding/Layout.tsx @@ -116,8 +116,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) { contentContainerStyle={{borderWidth: 0}} // @ts-ignore web only --prf dataSet={{'stable-gutters': 1}}> - + ( PRIMARY_FEEDS.map(f => (f.default ? f.uri : '')).filter(Boolean), @@ -96,7 +97,7 @@ export function StepAlgoFeeds() { }, [track]) return ( - + diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx index 944dcb96d2..8eead6fea6 100644 --- a/src/screens/Onboarding/StepFinished.tsx +++ b/src/screens/Onboarding/StepFinished.tsx @@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' import {logger} from '#/logger' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonText, ButtonIcon} from '#/components/Button' import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' @@ -32,6 +32,7 @@ import { export function StepFinished() { const {_} = useLingui() const t = useTheme() + const {gtMobile} = useBreakpoints() const {track} = useAnalytics() const {state, dispatch} = React.useContext(Context) const onboardDispatch = useOnboardingDispatch() @@ -83,7 +84,7 @@ export function StepFinished() { }, [track]) return ( - <View style={[a.align_start]}> + <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}> <IconCircle icon={Check} style={[a.mb_2xl]} /> <Title> diff --git a/src/screens/Onboarding/StepFollowingFeed.tsx b/src/screens/Onboarding/StepFollowingFeed.tsx index 898afad134..385c30a0b3 100644 --- a/src/screens/Onboarding/StepFollowingFeed.tsx +++ b/src/screens/Onboarding/StepFollowingFeed.tsx @@ -3,7 +3,7 @@ import {View} from 'react-native' import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' -import {atoms as a} from '#/alf' +import {atoms as a, useBreakpoints} from '#/alf' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' import {Button, ButtonIcon, ButtonText} from '#/components/Button' @@ -26,6 +26,7 @@ import {IconCircle} from '#/components/IconCircle' export function StepFollowingFeed() { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {track} = useAnalytics() const {dispatch} = React.useContext(Context) @@ -54,7 +55,7 @@ export function StepFollowingFeed() { return ( // Hack for now to move the image container up - <View style={[a.align_start]}> + <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}> <IconCircle icon={FilterTimeline} style={[a.mb_2xl]} /> <Title> diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx index ea23b74f09..1da8af5252 100644 --- a/src/screens/Onboarding/StepInterests/index.tsx +++ b/src/screens/Onboarding/StepInterests/index.tsx @@ -31,8 +31,8 @@ import {IconCircle} from '#/components/IconCircle' export function StepInterests() { const {_} = useLingui() const t = useTheme() - const {track} = useAnalytics() const {gtMobile} = useBreakpoints() + const {track} = useAnalytics() const {state, dispatch, interestsDisplayNames} = React.useContext(Context) const [saving, setSaving] = React.useState(false) const [interests, setInterests] = React.useState<string[]>( @@ -139,7 +139,9 @@ export function StepInterests() { ) return ( - <View style={[a.align_start]} testID="onboardingInterests"> + <View + style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]} + testID="onboardingInterests"> <IconCircle icon={isError ? EmojiSad : Hashtag} style={[ diff --git a/src/screens/Onboarding/StepModeration/index.tsx b/src/screens/Onboarding/StepModeration/index.tsx index 543a5b1598..2e1215a417 100644 --- a/src/screens/Onboarding/StepModeration/index.tsx +++ b/src/screens/Onboarding/StepModeration/index.tsx @@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' import Animated, {Easing, Layout} from 'react-native-reanimated' -import {atoms as a} from '#/alf' +import {atoms as a, useBreakpoints} from '#/alf' import { configurableAdultLabelGroups, configurableOtherLabelGroups, @@ -38,6 +38,7 @@ function AnimatedDivider() { export function StepModeration() { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {track} = useAnalytics() const {state, dispatch} = React.useContext(Context) const {data: preferences} = usePreferencesQuery() @@ -65,7 +66,7 @@ export function StepModeration() { }, [track]) return ( - <View style={[a.align_start]}> + <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}> <IconCircle icon={EyeSlash} style={[a.mb_2xl]} /> <Title> diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx index 963c62d5f6..e943c3e81b 100644 --- a/src/screens/Onboarding/StepProfile/index.tsx +++ b/src/screens/Onboarding/StepProfile/index.tsx @@ -85,8 +85,8 @@ export function StepProfile() { </Trans> </Description> - <View style={[a.pt_5xl, a.gap_3xl]}> - <View style={[a.align_center, a.pb_lg]}> + <View style={[a.w_full, a.pt_5xl]}> + <View style={[a.align_center, a.pb_5xl]}> <AvatarCircle /> </View> <Items type="emojis" /> @@ -223,7 +223,6 @@ function Items({type}: {type: 'emojis' | 'colors'}) { return ( <View style={styles.flatListOuter}> <FlatList<Color> - style={{height: 100}} data={colors} renderItem={colorRenderItem} {...commonFlatListProps} diff --git a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx index 14faddc10f..16451ea39f 100644 --- a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx +++ b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx @@ -69,9 +69,9 @@ export function Inner({ export function StepSuggestedAccounts() { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {track} = useAnalytics() const {state, dispatch, interestsDisplayNames} = React.useContext(Context) - const {gtMobile} = useBreakpoints() const suggestedDids = React.useMemo(() => { return aggregateInterestItems( state.interestsStepResults.selectedInterests, @@ -125,7 +125,7 @@ export function StepSuggestedAccounts() { }, [track]) return ( - <View style={[a.align_start]}> + <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}> <IconCircle icon={At} style={[a.mb_2xl]} /> <Title> diff --git a/src/screens/Onboarding/StepTopicalFeeds.tsx b/src/screens/Onboarding/StepTopicalFeeds.tsx index 4a2210853f..d6b6ab0453 100644 --- a/src/screens/Onboarding/StepTopicalFeeds.tsx +++ b/src/screens/Onboarding/StepTopicalFeeds.tsx @@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' import {IS_PROD} from '#/env' -import {atoms as a} from '#/alf' +import {atoms as a, useBreakpoints} from '#/alf' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded as ListMagnifyingGlass} from '#/components/icons/ListMagnifyingGlass' import {Button, ButtonIcon, ButtonText} from '#/components/Button' @@ -25,6 +25,7 @@ import {IconCircle} from '#/components/IconCircle' export function StepTopicalFeeds() { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {track} = useAnalytics() const {state, dispatch, interestsDisplayNames} = React.useContext(Context) const [selectedFeedUris, setSelectedFeedUris] = React.useState<string[]>([]) @@ -63,7 +64,7 @@ export function StepTopicalFeeds() { }, [track]) return ( - <View style={[a.align_start]}> + <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}> <IconCircle icon={ListMagnifyingGlass} style={[a.mb_2xl]} /> <Title>