From db5ad33b0e2a2a356ad54caab39767ff4c4728fa Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:56:56 +0300
Subject: [PATCH] add color picker state and changing color of avatar

---
 src/components/General/ColorPicker/ColorPicker.tsx   | 10 ++++++----
 src/components/General/CreateAvatar/CreateAvatar.tsx | 10 +++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/General/ColorPicker/ColorPicker.tsx b/src/components/General/ColorPicker/ColorPicker.tsx
index b0a8b676..a2c90e90 100644
--- a/src/components/General/ColorPicker/ColorPicker.tsx
+++ b/src/components/General/ColorPicker/ColorPicker.tsx
@@ -1,10 +1,12 @@
-import { useState } from 'react'
 import { XStack } from 'tamagui'
 import { CustomPicker } from 'react-color'
 import './ColorPicker.css'
 
-const ColorPicker = () => {
-  const [chosenColor, setChosenColor] = useState('#2A4AF5')
+type ColorPickerProps = {
+  setChosenColor: (a: string) => void
+}
+
+const ColorPicker = ({ setChosenColor }: ColorPickerProps) => {
   const colors = [
     '#2A4AF5',
     '#F6B03C',
@@ -27,7 +29,7 @@ const ColorPicker = () => {
             key={i}
             type="button"
             className="color-picker-button"
-            onClick={_e => setChosenColor(color)}
+            onClick={() => setChosenColor(color)}
             style={{ background: color, color: color }}
           ></button>
         ))}
diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index 099cb610..2441820e 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -2,11 +2,13 @@ import { useState } from 'react'
 import { XStack, YStack } from 'tamagui'
 import { Avatar, Text } from '@status-im/components'
 import { ReactionIcon } from '@status-im/icons'
+import './CreateAvatar.css'
 import LabelInputField from '../LabelInputField'
 import ColorPicker from '../ColorPicker/ColorPicker'
 import EmojiPickerDialog from '../EmojiPickerDialog'
 
 const CreateAvatar = () => {
+  const [chosenColor, setChosenColor] = useState('#2A4AF5')
   const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
   return (
     <YStack my={16}>
@@ -14,12 +16,14 @@ const CreateAvatar = () => {
         <LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
       </XStack>
       <XStack my={10} justifyContent={'space-between'}>
-        <YStack mr={30}>
+        <YStack mr={60}>
           <Text size={13} weight="regular" color={'#647084'}>
             Device Avatar
           </Text>
           <XStack my={10} alignItems={'end'}>
-            <Avatar type="user" size={80} name="Device Avatar" />
+            <div className="device-avatar" style={{ background: chosenColor }}>
+              <img src="./icons/nodes-app-icon.png" alt="" />
+            </div>
             <Avatar
               type="icon"
               size={32}
@@ -38,7 +42,7 @@ const CreateAvatar = () => {
           <Text size={13} weight="regular" color={'#647084'}>
             Highlight Color
           </Text>
-          <ColorPicker />
+          <ColorPicker setChosenColor={setChosenColor} />
         </YStack>
       </XStack>
     </YStack>