Use our button

src/screens/Onboarding/StepProfile/AvatarCircle.tsx

@@ -1,30 +1,15 @@
 import React from 'react'
-import {TouchableOpacity, TouchableOpacityProps, View} from 'react-native'
+import {View} from 'react-native'
 import {Image as ExpoImage} from 'expo-image'
-import {atoms as a, native, useTheme, web} from '#/alf'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle'
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
 import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
 import {StreamingLive_Stroke2_Corner0_Rounded as StreamingLive} from '#/components/icons/StreamingLive'
-import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle'
-
-function AvatarBottomButton({...props}: TouchableOpacityProps) {
-  const t = useTheme()
-
-  return (
-    <TouchableOpacity
-      {...props}
-      style={[
-        a.absolute,
-        a.rounded_full,
-        a.align_center,
-        a.justify_center,
-        {backgroundColor: t.palette.primary_500},
-        {height: 48, width: 48, bottom: 2, right: 2},
-      ]}>
-      {props.children}
-    </TouchableOpacity>
-  )
-}
 
 export function AvatarCircle({
   openLibrary,
@@ -33,6 +18,7 @@ export function AvatarCircle({
   openLibrary: () => unknown
   openCreator: () => unknown
 }) {
+  const {_} = useLingui()
   const t = useTheme()
   const {avatar} = useAvatar()
 
@@ -43,14 +29,13 @@ export function AvatarCircle({
         a.overflow_hidden,
         a.align_center,
         a.justify_center,
+        a.border,
         t.atoms.border_contrast_low,
         t.atoms.bg_contrast_25,
         {
           height: 200,
           width: 200,
         },
-        web({borderWidth: 2}),
-        native({borderWidth: 1}),
       ],
     }),
     [t.atoms.bg_contrast_25, t.atoms.border_contrast_low],
@@ -76,10 +61,17 @@ export function AvatarCircle({
           />
         </View>
       )}
-      <AvatarBottomButton
+      <View style={[a.absolute, {bottom: 2, right: 2}]}>
-        onPress={avatar.useCreatedAvatar ? openCreator : openLibrary}>
+        <Button
-        <Pencil size="md" style={{color: t.palette.white}} />
+          label={_(msg`Select an avatar`)}
-      </AvatarBottomButton>
+          size="large"
+          shape="round"
+          variant="solid"
+          color="primary"
+          onPress={avatar.useCreatedAvatar ? openCreator : openLibrary}>
+          <ButtonIcon icon={Pencil} />
+        </Button>
+      </View>
     </View>
   )
 }

src/screens/Onboarding/StepProfile/types.ts

@@ -1,25 +1,25 @@
+import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
+import {Apple_Stroke2_Corner0_Rounded as Apple} from '#/components/icons/Apple'
+import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
+import {Atom_Stroke2_Corner0_Rounded as Atom} from '#/components/icons/Atom'
+import {Celebrate_Stroke2_Corner0_Rounded as Celebrate} from '#/components/icons/Celebrate'
+import {Coffee_Stroke2_Corner0_Rounded as Coffee} from '#/components/icons/Coffee'
 import {
   EmojiArc_Stroke2_Corner0_Rounded as EmojiArc,
   EmojiHeartEyes_Stroke2_Corner0_Rounded as EmojiHeartEyes,
 } from '#/components/icons/Emoji'
-import {Alien_Stroke2_Corner0_Rounded as Alien} from '#/components/icons/Alien'
 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'
-import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop'
-import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
-import {Apple_Stroke2_Corner0_Rounded as Apple} from '#/components/icons/Apple'
-import {Atom_Stroke2_Corner0_Rounded as Atom} from '#/components/icons/Atom'
-import {Coffee_Stroke2_Corner0_Rounded as Coffee} from '#/components/icons/Coffee'
 import {GameController_Stroke2_Corner0_Rounded as GameController} from '#/components/icons/GameController'
+import {Lab_Stroke2_Corner0_Rounded as Lab} from '#/components/icons/Lab'
 import {Leaf_Stroke2_Corner0_Rounded as Leaf} from '#/components/icons/Leaf'
 import {MusicNote_Stroke2_Corner0_Rounded as MusicNote} from '#/components/icons/MusicNote'
+import {PiggyBank_Stroke2_Corner0_Rounded as PiggyBank} from '#/components/icons/PiggyBank'
 import {Pizza_Stroke2_Corner0_Rounded as Pizza} from '#/components/icons/Pizza'
+import {Poop_Stroke2_Corner0_Rounded as Poop} from '#/components/icons/Poop'
 import {Rose_Stroke2_Corner0_Rounded as Rose} from '#/components/icons/Rose'
 import {Shaka_Stroke2_Corner0_Rounded as Shaka} from '#/components/icons/Shaka'
 import {UFO_Stroke2_Corner0_Rounded as UFO} from '#/components/icons/UFO'
 import {Zap_Stroke2_Corner0_Rounded as Zap} from '#/components/icons/Zap'
-import {Celebrate_Stroke2_Corner0_Rounded as Celebrate} from '#/components/icons/Celebrate'
 
 /**
  * If you want to add or remove icons from the selection, just add the name to the `emojiNames` array and
@@ -138,12 +138,11 @@ export const emojiItems: Record<EmojiName, Emoji> = {
 }
 
 export const avatarColors = [
-  'hsl(204,70%,53%)',
+  '#FE8311',
-  'hsl(168,76%,42%)',
+  '#FED811',
-  'hsl(282,38%,53%)',
+  '#73DF84',
-  'hsl(28,80%,52%)',
+  '#1185FE',
-  'hsl(5,79%,57%)',
+  '#EF75EA',
-  'hsl(314,79%,57%)',
+  '#F55454',
-  'hsl(41,79%,57%)',
 ] as const
 export type AvatarColor = (typeof avatarColors)[number]