From 0d8f60163a810c52e60a54903423c53f246becbf Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 23 Jan 2024 19:02:47 +0200
Subject: [PATCH 1/4] fix: make functions expressions and imports order

---
 .../General/CreateAvatar/CreateAvatar.tsx      | 18 ++++++++++--------
 src/components/General/EmojiPickerDialog.tsx   |  3 ++-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index 0abf524e..f8070241 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -2,11 +2,12 @@ import { useEffect, useRef, 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 { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
+
 import LabelInputField from '../LabelInputField'
 import ColorPicker from '../ColorPicker/ColorPicker'
 import EmojiPickerDialog from '../EmojiPickerDialog'
-import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react'
+import './CreateAvatar.css'
 
 const CreateAvatar = () => {
   const [chosenColor, setChosenColor] = useState('#2A4AF5')
@@ -14,16 +15,17 @@ const CreateAvatar = () => {
   const [selectedEmoji, setSelectedEmoji] = useState<string>('1f600')
   const emojiRef = useRef<HTMLDivElement | null>(null)
 
-  function changeEmoji(emojiData: EmojiClickData) {
+  const changeEmoji = (emojiData: EmojiClickData) => {
     setSelectedEmoji(emojiData.unified)
   }
 
-  useEffect(() => {
-    function handleClickOutside(event: any) {
-      if (emojiRef.current && !emojiRef.current.contains(event.target)) {
-        setIsEmojiDialogOpen(false)
-      }
+  const handleClickOutside = (event: any) => {
+    if (emojiRef.current && !emojiRef.current.contains(event.target)) {
+      setIsEmojiDialogOpen(false)
     }
+  }
+
+  useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside)
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx
index 4babda00..846b3bd2 100644
--- a/src/components/General/EmojiPickerDialog.tsx
+++ b/src/components/General/EmojiPickerDialog.tsx
@@ -14,7 +14,7 @@ type EmojiPickerProps = {
   changeEmoji: (emojiData: EmojiClickData) => void
 }
 
-function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
+const EmojiPickerDialog = ({ emojiStyle, changeEmoji }: EmojiPickerProps) => {
   return (
     <Stack position="absolute" zIndex={1} left={100} top={-150}>
       <EmojiPicker
@@ -54,4 +54,5 @@ function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) {
     </Stack>
   )
 }
+
 export default EmojiPickerDialog

From 4fe6719a39fee80c683aee73fd489a21ab00bba5 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 23 Jan 2024 19:22:52 +0200
Subject: [PATCH 2/4] fix: container and width of device name input

---
 src/components/General/CreateAvatar/CreateAvatar.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index f8070241..802546da 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -34,9 +34,7 @@ const CreateAvatar = () => {
 
   return (
     <YStack>
-      <XStack>
-        <LabelInputField labelText="Device Name" placeholderText="Stake and chips" width="95%" />
-      </XStack>
+      <LabelInputField labelText="Device Name" placeholderText="Stake and chips" width="100%" />
       <XStack space={'$3'} justifyContent={'space-between'}>
         <YStack>
           <Text size={13} weight="semibold" color={'#647084'}>

From c79e291a6611ef1d7c37cc375ef4fba00295242a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 23 Jan 2024 20:46:30 +0200
Subject: [PATCH 3/4] feat: func getting emoji picker width for window size

---
 src/components/General/EmojiPickerDialog.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx
index 846b3bd2..5073f59a 100644
--- a/src/components/General/EmojiPickerDialog.tsx
+++ b/src/components/General/EmojiPickerDialog.tsx
@@ -6,6 +6,7 @@ import EmojiPicker, {
   Categories,
 } from 'emoji-picker-react'
 import { Stack } from 'tamagui'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 type EmojiStyleType = 'FACEBOOK' | 'APPLE' | 'GOOGLE' | 'TWITTER' | 'NATIVE'
 
@@ -15,6 +16,22 @@ type EmojiPickerProps = {
 }
 
 const EmojiPickerDialog = ({ emojiStyle, changeEmoji }: EmojiPickerProps) => {
+  const windowSize = useWindowSize()
+
+  const getEmojiPickerWidth = () => {
+    if (windowSize.width < 505) {
+      return '67vw'
+    } else if (windowSize.width < 640) {
+      return '73vw'
+    } else if (windowSize.width < 780) {
+      return '78vw'
+    } else if (windowSize.width < 1000) {
+      return '82vw'
+    } else {
+      return '40vw'
+    }
+  }
+
   return (
     <Stack position="absolute" zIndex={1} left={100} top={-150}>
       <EmojiPicker
@@ -22,7 +39,7 @@ const EmojiPickerDialog = ({ emojiStyle, changeEmoji }: EmojiPickerProps) => {
         autoFocusSearch={false}
         theme={Theme.AUTO}
         height={'50vh'}
-        width={'50vw'}
+        width={getEmojiPickerWidth()}
         emojiVersion="1"
         lazyLoadEmojis={false}
         previewConfig={{ showPreview: false }}

From 9d859c205a20770343582ef31b4ec1c52f670549 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 23 Jan 2024 20:46:49 +0200
Subject: [PATCH 4/4] fix: remove first rendering with 0 width

---
 src/components/General/EmojiPickerDialog.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx
index 5073f59a..96d68d73 100644
--- a/src/components/General/EmojiPickerDialog.tsx
+++ b/src/components/General/EmojiPickerDialog.tsx
@@ -32,6 +32,10 @@ const EmojiPickerDialog = ({ emojiStyle, changeEmoji }: EmojiPickerProps) => {
     }
   }
 
+  if (windowSize.width === 0) {
+    return null
+  }
+
   return (
     <Stack position="absolute" zIndex={1} left={100} top={-150}>
       <EmojiPicker