acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

move breakpoints to individual steps

Browse Source
This commit is contained in:
Hailey
2024-02-13 17:34:04 -08:00
parent 88a276457a
commit 70bb2038e8
9 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Onboarding/Layout.tsx
+1 -2
View File
@@ -116,8 +116,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
contentContainerStyle={{borderWidth: 0}}
// @ts-ignore web only --prf
dataSet={{'stable-gutters': 1}}>
<View
style={[a.flex_row, a.justify_center, gtMobile ? a.px_5xl : a.px_xl]}>
<View style={[a.flex_row, a.justify_center]}>
<View style={[a.flex_1, {maxWidth: COL_WIDTH}]}>
<View style={[a.w_full, a.align_center, paddingTop]}>
<View
src/screens/Onboarding/StepAlgoFeeds/index.tsx
+3 -2
View File
@@ -4,7 +4,7 @@ import {useLingui} from '@lingui/react'
import {msg, Trans} from '@lingui/macro'
import {IS_PROD} from '#/env'
import {atoms as a, tokens, useTheme} from '#/alf'
import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Toggle from '#/components/forms/Toggle'
@@ -68,6 +68,7 @@ export function StepAlgoFeeds() {
const {_} = useLingui()
const {track} = useAnalytics()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const {state, dispatch} = React.useContext(Context)
const [primaryFeedUris, setPrimaryFeedUris] = React.useState<string[]>(
PRIMARY_FEEDS.map(f => (f.default ? f.uri : '')).filter(Boolean),
@@ -96,7 +97,7 @@ export function StepAlgoFeeds() {
}, [track])
return (
<View style={[a.align_start]}>
<View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
<IconCircle icon={ListSparkle} style={[a.mb_2xl]} />
<Title>
src/screens/Onboarding/StepFinished.tsx
+3 -2
View File
@@ -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>
src/screens/Onboarding/StepFollowingFeed.tsx
+3 -2
View File
@@ -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>
src/screens/Onboarding/StepInterests/index.tsx
+4 -2
View File
@@ -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={[
src/screens/Onboarding/StepModeration/index.tsx
+3 -2
View File
@@ -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>
src/screens/Onboarding/StepProfile/index.tsx
+2 -3
View File
@@ -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}
src/screens/Onboarding/StepSuggestedAccounts/index.tsx
+2 -2
View File
@@ -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>
src/screens/Onboarding/StepTopicalFeeds.tsx
+3 -2
View File
@@ -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>