Merge pull request #13 from nimbus-gui/ia.emoji-picker-functionality

Emoji picker functionality

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;

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%">

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 }) {
+type EmojiPickerProps = {
-  const [selectedEmoji, setSelectedEmoji] = useState<string>('')
+  emojiStyle: EmojiStyleType
-  console.log(selectedEmoji)
+  changeEmoji: (emojiData: EmojiClickData) => void
-  function onClick(emojiData: EmojiClickData) {
-    setSelectedEmoji(emojiData.unified)
 }
 
+function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
   return (
-    <Stack position="absolute" zIndex={1} left={120}>
+    <Stack position="absolute" zIndex={1} left={100}>
-      {/* <XStack>
-        Your selected Emoji is:
-        {selectedEmoji ? (
-          <Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.APPLE} size={22} />
-        ) : null}
-      </XStack> */}
-
       <EmojiPicker
-        onEmojiClick={onClick}
+        onEmojiClick={changeEmoji}
         autoFocusSearch={false}
         theme={Theme.AUTO}
         height={350}
-        width="100%"
+        width={350}
         emojiVersion="1"
         lazyLoadEmojis={false}
         previewConfig={{ showPreview: false }}

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;

src/index.css

@@ -48,7 +48,6 @@ ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
-  display: flex;
 }
 ul li {
   padding: 0 1rem;