Adjust layout

src/screens/Onboarding/Layout.tsx

@@ -23,7 +23,7 @@ import {createPortalGroup} from '#/components/Portal'
 import {leading, P, Text} from '#/components/Typography'
 import {IS_DEV} from '#/env'
 
-const COL_WIDTH = 500
+const COL_WIDTH = 420
 
 export const OnboardingControls = createPortalGroup()
 
@@ -114,7 +114,8 @@ 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]}>
+        <View
+          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

@@ -13,7 +13,7 @@ import {
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
 import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
-import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {IconCircle} from '#/components/IconCircle'
@@ -64,7 +64,6 @@ 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),
@@ -99,7 +98,7 @@ export function StepAlgoFeeds() {
   }, [track])
 
   return (
-    <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
+    <View style={[a.align_start]}>
       <IconCircle icon={ListSparkle} style={[a.mb_2xl]} />
 
       <TitleText>

src/screens/Onboarding/StepFinished.tsx

@@ -23,7 +23,7 @@ import {
   bulkWriteFollows,
   sortPrimaryAlgorithmFeeds,
 } from '#/screens/Onboarding/util'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {IconCircle} from '#/components/IconCircle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -36,7 +36,6 @@ import {Text} from '#/components/Typography'
 export function StepFinished() {
   const {_} = useLingui()
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
   const {track} = useAnalytics()
   const {state, dispatch} = React.useContext(Context)
   const onboardDispatch = useOnboardingDispatch()
@@ -127,7 +126,7 @@ export function StepFinished() {
   }, [track])
 
   return (
-    <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
+    <View style={[a.align_start]}>
       <IconCircle icon={Check} style={[a.mb_2xl]} />
 
       <TitleText>

src/screens/Onboarding/StepFollowingFeed.tsx

@@ -15,7 +15,7 @@ import {
   TitleText,
 } from '#/screens/Onboarding/Layout'
 import {Context} from '#/screens/Onboarding/state'
-import {atoms as a, useBreakpoints} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
@@ -26,7 +26,6 @@ import {Text} from '#/components/Typography'
 
 export function StepFollowingFeed() {
   const {_} = useLingui()
-  const {gtMobile} = useBreakpoints()
   const {track} = useAnalytics()
   const {dispatch} = React.useContext(Context)
 
@@ -56,7 +55,7 @@ export function StepFollowingFeed() {
 
   return (
     // Hack for now to move the image container up
-    <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
+    <View style={[a.align_start]}>
       <IconCircle icon={FilterTimeline} style={[a.mb_2xl]} />
 
       <TitleText>

src/screens/Onboarding/StepInterests/index.tsx

@@ -143,9 +143,7 @@ export function StepInterests() {
   )
 
   return (
-    <View
+    <View style={[a.align_start]} testID="onboardingInterests">
-      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,6 @@ import {LABELS} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useBreakpoints} from '#/alf'
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {logEvent} from '#/lib/statsig/statsig'
 import {usePreferencesQuery} from '#/state/queries/preferences'
@@ -17,6 +16,7 @@ import {
 import {Context} from '#/screens/Onboarding/state'
 import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref'
 import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption'
+import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {IconCircle} from '#/components/IconCircle'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
@@ -25,7 +25,6 @@ import {Loader} from '#/components/Loader'
 
 export function StepModeration() {
   const {_} = useLingui()
-  const {gtMobile} = useBreakpoints()
   const {track} = useAnalytics()
   const {state, dispatch} = React.useContext(Context)
   const {data: preferences} = usePreferencesQuery()
@@ -54,7 +53,7 @@ export function StepModeration() {
   }, [track])
 
   return (
-    <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
+    <View style={[a.align_start]}>
       <IconCircle icon={EyeSlash} style={[a.mb_2xl]} />
 
       <TitleText>

src/screens/Onboarding/StepProfile/index.tsx

@@ -1,35 +1,35 @@
 import React from 'react'
 import {View} from 'react-native'
-import {useLingui} from '@lingui/react'
-import {msg, Trans} from '@lingui/macro'
 import {Image as ExpoImage} from 'expo-image'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {useAnalytics} from '#/lib/analytics/analytics'
-import {StreamingLive_Stroke2_Corner0_Rounded as StreamingLive} from '#/components/icons/StreamingLive'
+import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
-import {Context} from '#/screens/Onboarding/state'
+import {compressIfNeeded} from 'lib/media/manip'
+import {openCropper} from 'lib/media/picker'
+import {openPicker} from 'lib/media/picker.shared'
+import {isNative, isWeb} from 'platform/detection'
 import {
-  TitleText,
   DescriptionText,
   OnboardingControls,
+  TitleText,
 } from '#/screens/Onboarding/Layout'
-import {Emoji, emojiItems, AvatarColor, avatarColors} from './types'
+import {Context} from '#/screens/Onboarding/state'
+import {AvatarCircle} from '#/screens/Onboarding/StepProfile/AvatarCircle'
+import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle'
+import {AvatarCreatorItems} from '#/screens/Onboarding/StepProfile/AvatarCreatorItems'
 import {
   PlaceholderCanvas,
   PlaceholderCanvasRef,
 } from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
-import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {IconCircle} from '#/components/IconCircle'
-import {useAnalytics} from '#/lib/analytics/analytics'
-import {AvatarCircle} from '#/screens/Onboarding/StepProfile/AvatarCircle'
 import * as Dialog from '#/components/Dialog'
-import {AvatarCreatorItems} from '#/screens/Onboarding/StepProfile/AvatarCreatorItems'
+import {IconCircle} from '#/components/IconCircle'
-import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
-import {openPicker} from 'lib/media/picker.shared'
+import {StreamingLive_Stroke2_Corner0_Rounded as StreamingLive} from '#/components/icons/StreamingLive'
-import {isNative, isWeb} from 'platform/detection'
+import {AvatarColor, avatarColors, Emoji, emojiItems} from './types'
-import {openCropper} from 'lib/media/picker'
-import {compressIfNeeded} from 'lib/media/manip'
-import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
 
 export interface Avatar {
   image?: {
@@ -163,18 +163,16 @@ export function StepProfile() {
   return (
     <AvatarContext.Provider value={value}>
       <View style={[a.align_start, t.atoms.bg, a.justify_between]}>
-        <View style={[gtMobile ? a.px_5xl : a.px_xl]}>
+        <IconCircle icon={StreamingLive} style={[a.mb_2xl]} />
-          <IconCircle icon={StreamingLive} style={[a.mb_2xl]} />
+        <TitleText>
-          <TitleText>
+          <Trans>Give your profile a face</Trans>
-            <Trans>Give your profile a face</Trans>
+        </TitleText>
-          </TitleText>
+        <DescriptionText>
-          <DescriptionText>
+          <Trans>
-            <Trans>
+            Help people know you're not a bot by uploading a picture or creating
-              Help people know you're not a bot by uploading a picture or
+            an avatar.
-              creating an avatar.
+          </Trans>
-            </Trans>
+        </DescriptionText>
-          </DescriptionText>
-        </View>
         <View style={[a.w_full, a.align_center, {paddingTop: 80}]}>
           <AvatarCircle
             openLibrary={openLibrary}

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -133,7 +133,7 @@ export function StepSuggestedAccounts() {
   }, [track])
 
   return (
-    <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
+    <View style={[a.align_start]}>
       <IconCircle icon={At} style={[a.mb_2xl]} />
 
       <TitleText>

src/screens/Onboarding/StepTopicalFeeds.tsx

@@ -16,7 +16,7 @@ import {
 import {Context} from '#/screens/Onboarding/state'
 import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
 import {aggregateInterestItems} from '#/screens/Onboarding/util'
-import {atoms as a, useBreakpoints} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {IconCircle} from '#/components/IconCircle'
@@ -26,7 +26,6 @@ import {Loader} from '#/components/Loader'
 
 export function StepTopicalFeeds() {
   const {_} = useLingui()
-  const {gtMobile} = useBreakpoints()
   const {track} = useAnalytics()
   const {currentAccount} = useSession()
   const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
@@ -74,7 +73,7 @@ export function StepTopicalFeeds() {
   }, [track])
 
   return (
-    <View style={[a.align_start, gtMobile ? a.px_5xl : a.px_xl]}>
+    <View style={[a.align_start]}>
       <IconCircle icon={ListMagnifyingGlass} style={[a.mb_2xl]} />
 
       <TitleText>