adjust web layout

assets/icons/bubbles_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm16.5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM15 9.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm-.5 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM10 17.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z" clip-rule="evenodd"/></svg>

src/components/icons/Bubbles.tsx

@@ -1,5 +0,0 @@
-import {createSinglePathSVG} from './TEMPLATE'
-
-export const Bubbles_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm16.5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM15 9.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm-.5 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM10 17.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z',
-})

src/screens/Onboarding/StepProfile/index.tsx

@@ -34,7 +34,6 @@ import {
   AvatarColor,
   avatarColors,
 } from './types'
-import {SelectImageButton} from '#/screens/Onboarding/StepProfile/SelectImageButton'
 import {
   PlaceholderCanvas,
   PlaceholderCanvasRef,
@@ -76,7 +75,7 @@ export function StepProfile() {
   const {state, dispatch} = React.useContext(Context)
   const [avatar, setAvatar] = React.useState<Avatar>({
     placeholder: emojiItems.at,
-    backgroundColor: avatarColors[1],
+    backgroundColor: avatarColors[0],
   })
 
   const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
@@ -300,10 +299,6 @@ function EmojiItem({emojiName}: {emojiName: EmojiName}) {
     }))
   }, [emojiName, setAvatar])
 
-  if (emojiName === 'camera') {
-    return <SelectImageButton />
-  }
-
   return (
     <AnimatedCircle selected={avatar.placeholder.name === emojiName}>
       <Pressable
@@ -336,9 +331,10 @@ function Items({type}: {type: 'emojis' | 'colors'}) {
           a.align_center,
           {height: 100},
           !isTabletOrDesktop && styles.flatListContainer,
+          isTabletOrDesktop && type === 'colors' && a.pr_xs,
         ]}
         numColumns={isTabletOrDesktop && type === 'emojis' ? 4 : undefined}
-        showsHorizontalScrollIndicator={isTabletOrDesktop && type === 'emojis'}
+        showsHorizontalScrollIndicator={isTabletOrDesktop && type === 'colors'}
         horizontal={!isTabletOrDesktop}
         {...commonFlatListProps}
       />
@@ -366,7 +362,7 @@ const useStyles = () => {
     },
     flatListOuter: isTabletOrDesktop
       ? {
-          height: 450,
+          height: 435,
         }
       : {
           flexDirection: 'row',

src/screens/Onboarding/StepProfile/types.ts

@@ -3,7 +3,6 @@ import {
   EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes,
 } from '#/components/icons/Emoji'
 import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
-import {Bubbles_Stroke2_Corner0_Rounded as Bubbles} from '#/components/icons/Bubbles'
 import {Explosion_Stroke2_Corner0_Rounded as Explosion} from '#/components/icons/Explosion'
 import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab'
 import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank'
@@ -28,7 +27,6 @@ import {Celebrate_Stroke2_Corner0_Rounded as Celebrate} from '#/components/icons
  */
 
 export const emojiNames = [
-  'camera',
   'at',
   'arc',
   'heartEyes',
@@ -45,7 +43,6 @@ export const emojiNames = [
   'shaka',
   'ufo',
   'zap',
-  'bubbles',
   'explosion',
   'lab',
   'piggyBank',
@@ -58,10 +55,6 @@ export interface Emoji {
   component: typeof EmojiArc
 }
 export const emojiItems: Record<EmojiName, Emoji> = {
-  camera: {
-    name: 'camera',
-    component: EmojiArc,
-  },
   at: {
     name: 'at',
     component: At,
@@ -126,10 +119,6 @@ export const emojiItems: Record<EmojiName, Emoji> = {
     name: 'zap',
     component: Zap,
   },
-  bubbles: {
-    name: 'bubbles',
-    component: Bubbles,
-  },
   explosion: {
     name: 'explosion',
     component: Explosion,
@@ -149,8 +138,8 @@ export const emojiItems: Record<EmojiName, Emoji> = {
 }
 
 export const avatarColors = [
-  'hsl(168,76%,42%)',
   'hsl(204,70%,53%)',
+  'hsl(168,76%,42%)',
   'hsl(282,38%,53%)',
   'hsl(28,80%,52%)',
   'hsl(5,79%,57%)',