From 1808aca00fb0879c021a73cd89d63c7ba61f7dce Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Mon, 28 Aug 2023 16:06:29 +0300
Subject: [PATCH 1/2]  fix: remove display:flex from ul globally

---
 src/components/General/BreadcrumbBar/BreadcrumbBar.css | 3 +++
 src/components/General/QuickStartBar/QuickStartBar.css | 3 +++
 src/index.css                                          | 1 -
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/General/BreadcrumbBar/BreadcrumbBar.css b/src/components/General/BreadcrumbBar/BreadcrumbBar.css
index 5730f82e..0df51597 100644
--- a/src/components/General/BreadcrumbBar/BreadcrumbBar.css
+++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.css
@@ -4,6 +4,9 @@
     padding: 1rem 2rem;
     margin: 0.5rem;
 }
+.breadcrumb-bar-ul {
+    display: flex;
+}
 .breadcrumb-bar-li {
     color: #647084;
     font-weight: 500;
diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.css
index be0a2f7d..3eb4100d 100644
--- a/src/components/General/QuickStartBar/QuickStartBar.css
+++ b/src/components/General/QuickStartBar/QuickStartBar.css
@@ -19,6 +19,9 @@
     margin-left: 1rem;
     padding: 1rem 0.5rem;
 }
+.quick-start-bar ul  {
+    display: flex;
+}
 .quick-start-bar ul li {
     color: #0D1625;
     font-size: 13px;
diff --git a/src/index.css b/src/index.css
index 54b88a93..b0c8145c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,7 +48,6 @@ ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
-  display: flex;
 }
 ul li {
   padding: 0 1rem;

From 57e3f34c3bfa357b399d7155889adbbae115aca4 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Mon, 28 Aug 2023 16:28:05 +0300
Subject: [PATCH 2/2] feat: add emoji picker functionality

---
 .../General/CreateAvatar/CreateAvatar.tsx     | 11 ++++++--
 src/components/General/EmojiPickerDialog.tsx  | 25 ++++++-------------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index 29adff6e..0d5fba4c 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -6,10 +6,15 @@ import './CreateAvatar.css'
 import LabelInputField from '../LabelInputField'
 import ColorPicker from '../ColorPicker/ColorPicker'
 import EmojiPickerDialog from '../EmojiPickerDialog'
+import { Emoji, EmojiClickData } from 'emoji-picker-react'
 
 const CreateAvatar = () => {
   const [chosenColor, setChosenColor] = useState('#2A4AF5')
   const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
+  const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
+  function changeEmoji(emojiData: EmojiClickData) {
+    setSelectedEmoji(emojiData.unified)
+  }
   return (
     <YStack my={16}>
       <XStack space>
@@ -22,7 +27,7 @@ const CreateAvatar = () => {
           </Text>
           <XStack my={10} alignItems={'end'}>
             <div className="device-avatar" style={{ background: chosenColor }}>
-              <img src="./icons/nodes-app-icon.png" alt="" />
+              {selectedEmoji ? <Emoji unified={selectedEmoji} size={30} /> : null}
             </div>
             <Avatar
               type="icon"
@@ -35,7 +40,9 @@ const CreateAvatar = () => {
                 />
               }
             />
-            {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
+            {isEmojiDialogOpen && (
+              <EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
+            )}
           </XStack>
         </YStack>
         <YStack flexWrap="wrap" width="80%">
diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx
index f16f7895..e1f39649 100644
--- a/src/components/General/EmojiPickerDialog.tsx
+++ b/src/components/General/EmojiPickerDialog.tsx
@@ -5,33 +5,24 @@ import EmojiPicker, {
   SuggestionMode,
   Categories,
 } from 'emoji-picker-react'
-import { useState } from 'react'
 import { Stack } from 'tamagui'
 
 type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
 
-function EmojiPickerDialog({ emojiStyle }: { emojiStyle: EmojiStyleType }) {
-  const [selectedEmoji, setSelectedEmoji] = useState<string>('')
-  console.log(selectedEmoji)
-  function onClick(emojiData: EmojiClickData) {
-    setSelectedEmoji(emojiData.unified)
-  }
+type EmojiPickerProps = {
+  emojiStyle: EmojiStyleType
+  changeEmoji: (emojiData: EmojiClickData) => void
+}
 
+function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
   return (
-    <Stack position="absolute" zIndex={1} left={120}>
-      {/* <XStack>
-        Your selected Emoji is:
-        {selectedEmoji ? (
-          <Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
-        ) : null}
-      </XStack> */}
-
+    <Stack position="absolute" zIndex={1} left={100}>
       <EmojiPicker
-        onEmojiClick={onClick}
+        onEmojiClick={changeEmoji}
         autoFocusSearch={false}
         theme={Theme.AUTO}
         height={350}
-        width="100%"
+        width={350}
         emojiVersion="1"
         lazyLoadEmojis={false}
         previewConfig={{ showPreview: false }}