feat: add emoji picker closing functionality

src/components/General/CreateAvatar/CreateAvatar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { XStack, YStack } from 'tamagui'
 import { Avatar, Text } from '@status-im/components'
 import { ReactionIcon } from '@status-im/icons'
@@ -6,15 +6,30 @@ import './CreateAvatar.css'
 import LabelInputField from '../LabelInputField'
 import ColorPicker from '../ColorPicker/ColorPicker'
 import EmojiPickerDialog from '../EmojiPickerDialog'
-import { Emoji, EmojiClickData } from 'emoji-picker-react'
+import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
 
 const CreateAvatar = () => {
   const [chosenColor, setChosenColor] = useState('#2A4AF5')
   const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
   const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
+  const emojiRef = useRef<HTMLDivElement | null>(null)
+
   function changeEmoji(emojiData: EmojiClickData) {
     setSelectedEmoji(emojiData.unified)
   }
+
+  useEffect(() => {
+    function handleClickOutside(event: any) {
+      if (emojiRef.current && !emojiRef.current.contains(event.target)) {
+        setIsEmojiDialogOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [emojiRef])
+
   return (
     <YStack my={16}>
       <XStack space>
@@ -27,7 +42,9 @@ const CreateAvatar = () => {
           </Text>
           <XStack my={10} alignItems={'end'}>
             <div className="device-avatar" style={{ background: chosenColor }}>
-              {selectedEmoji ? <Emoji unified={selectedEmoji} size={30} /> : null}
+              {selectedEmoji ? (
+                <Emoji unified={selectedEmoji} emojiStyle={EmojiStyle.TWITTER} size={30} />
+              ) : null}
             </div>
             <Avatar
               type="icon"
@@ -40,9 +57,11 @@ const CreateAvatar = () => {
                 />
               }
             />
-            {isEmojiDialogOpen && (
-              <EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
-            )}
+            <div ref={emojiRef}>
+              {isEmojiDialogOpen && (
+                <EmojiPickerDialog changeEmoji={changeEmoji} emojiStyle="TWITTER" />
+              )}
+            </div>
           </XStack>
         </YStack>
         <YStack flexWrap="wrap" width="80%">

src/components/General/EmojiPickerDialog.tsx

@@ -16,13 +16,13 @@ type EmojiPickerProps = {
 
 function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
   return (
-    <Stack position="absolute" zIndex={1} left={100}>
+    <Stack position="absolute" zIndex={1} left={100} top={-150}>
       <EmojiPicker
         onEmojiClick={changeEmoji}
         autoFocusSearch={false}
         theme={Theme.AUTO}
-        height={350}
-        width={350}
+        height={'50vh'}
+        width={'50vw'}
         emojiVersion="1"
         lazyLoadEmojis={false}
         previewConfig={{ showPreview: false }}