move breakpoints to individual steps

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}}>
-        <View
+        <View style={[a.flex_row, a.justify_center]}>
-          style={[a.flex_row, a.justify_center, gtMobile ? a.px_5xl : a.px_xl]}>
           <View style={[a.flex_1, {maxWidth: COL_WIDTH}]}>
             <View style={[a.w_full, a.align_center, paddingTop]}>
               <View

src/screens/Onboarding/StepAlgoFeeds/index.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, 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

@@ -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,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

@@ -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

@@ -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

@@ -85,8 +85,8 @@ export function StepProfile() {
             </Trans>
           </Description>
 
-          <View style={[a.pt_5xl, a.gap_3xl]}>
+          <View style={[a.w_full, a.pt_5xl]}>
-            <View style={[a.align_center, a.pb_lg]}>
+            <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

@@ -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

@@ -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>