From a06cb8b31779d16b7e371a542a344c9d0fbea0c7 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 24 Aug 2023 13:00:23 +0300
Subject: [PATCH 01/14] move color pickr component into its own folder

---
 src/components/General/{ => ColorPicker}/ColorPicker.stories.tsx | 0
 src/components/General/{ => ColorPicker}/ColorPicker.tsx         | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/General/{ => ColorPicker}/ColorPicker.stories.tsx (100%)
 rename src/components/General/{ => ColorPicker}/ColorPicker.tsx (100%)

diff --git a/src/components/General/ColorPicker.stories.tsx b/src/components/General/ColorPicker/ColorPicker.stories.tsx
similarity index 100%
rename from src/components/General/ColorPicker.stories.tsx
rename to src/components/General/ColorPicker/ColorPicker.stories.tsx
diff --git a/src/components/General/ColorPicker.tsx b/src/components/General/ColorPicker/ColorPicker.tsx
similarity index 100%
rename from src/components/General/ColorPicker.tsx
rename to src/components/General/ColorPicker/ColorPicker.tsx

From 6048f5617d001d5d8c8032e4c7e31497cc5219be Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 24 Aug 2023 13:01:44 +0300
Subject: [PATCH 02/14] fix: update color picker component links

---
 src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 2 +-
 src/pages/PairDevice/CreateAvatar.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index 74322ad7..d007e3e5 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -6,7 +6,7 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
 import LabelInputField from '../../components/General/LabelInputField'
-import ColorPicker from '../../components/General/ColorPicker'
+import ColorPicker from '../../components/General/ColorPicker/ColorPicker'
 import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
 
 const CreateLocalNodePage = () => {
diff --git a/src/pages/PairDevice/CreateAvatar.tsx b/src/pages/PairDevice/CreateAvatar.tsx
index d23c9127..d041a6c6 100644
--- a/src/pages/PairDevice/CreateAvatar.tsx
+++ b/src/pages/PairDevice/CreateAvatar.tsx
@@ -1,7 +1,7 @@
 import { XStack, YStack } from 'tamagui'
 import LabelInputField from '../../components/General/LabelInputField'
 import { Avatar, Text } from '@status-im/components'
-import ColorPicker from '../../components/General/ColorPicker'
+import ColorPicker from '../../components/General/ColorPicker/ColorPicker'
 import { ReactionIcon } from '@status-im/icons'
 
 const CreateAvatar = () => {

From edb5e3a64b125b1c3e5fdc59ac060b6148e78df9 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 24 Aug 2023 13:04:38 +0300
Subject: [PATCH 03/14] feat: create custom color picker component

---
 .../General/ColorPicker/ColorPicker.css       | 37 ++++++++++++
 .../General/ColorPicker/ColorPicker.tsx       | 56 ++++++++++---------
 2 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 src/components/General/ColorPicker/ColorPicker.css

diff --git a/src/components/General/ColorPicker/ColorPicker.css b/src/components/General/ColorPicker/ColorPicker.css
new file mode 100644
index 00000000..edfabd34
--- /dev/null
+++ b/src/components/General/ColorPicker/ColorPicker.css
@@ -0,0 +1,37 @@
+.color-picker-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    position: relative;
+}
+
+.color-picker-button::before ,
+.color-picker-button::after { 
+    display: block;
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    transform-origin: center;
+    opacity: 0;
+    transition: 120ms opacity ease-in-out;
+}
+.color-picker-button::before {
+    width: 0.65em;
+    height: 0.65em;
+    box-shadow: inset 1em 1em white;
+}
+.color-picker-button::after {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid white;
+}
+
+.color-picker-button:focus::before,   
+.color-picker-button:hover::after {
+    opacity: 1;
+}
diff --git a/src/components/General/ColorPicker/ColorPicker.tsx b/src/components/General/ColorPicker/ColorPicker.tsx
index 80d5afed..b0a8b676 100644
--- a/src/components/General/ColorPicker/ColorPicker.tsx
+++ b/src/components/General/ColorPicker/ColorPicker.tsx
@@ -1,33 +1,39 @@
 import { useState } from 'react'
-import { CirclePicker } from 'react-color'
 import { XStack } from 'tamagui'
+import { CustomPicker } from 'react-color'
+import './ColorPicker.css'
 
 const ColorPicker = () => {
-  const [chosenColor, setChosenColor] = useState('#FFFFFF')
+  const [chosenColor, setChosenColor] = useState('#2A4AF5')
+  const colors = [
+    '#2A4AF5',
+    '#F6B03C',
+    '#7140FD',
+    '#2A799B',
+    '#EC266C',
+    '#1992D7',
+    '#FF7D46',
+    '#216266',
+    '#F66F8F',
+    '#C78F67',
+    '#CB6256',
+  ]
+
   return (
-    <XStack my={10}>
-      <CirclePicker
-        width="80%"
-        circleSize={40}
-        circleSpacing={12}
-        colors={[
-          '#2A4AF5',
-          '#F6B03C',
-          '#7140FD',
-          '#2A799B',
-          '#EC266C',
-          '#1992D7',
-          '#FF7D46',
-          '#216266',
-          '#F66F8F',
-          '#C78F67',
-          '#CB6256',
-        ]}
-        color={chosenColor}
-        onChange={color => setChosenColor(color.hex)}
-      />
-    </XStack>
+    <>
+      <XStack my={10} width="80%" flexWrap="wrap">
+        {colors.map((color, i) => (
+          <button
+            key={i}
+            type="button"
+            className="color-picker-button"
+            onClick={_e => setChosenColor(color)}
+            style={{ background: color, color: color }}
+          ></button>
+        ))}
+      </XStack>
+    </>
   )
 }
 
-export default ColorPicker
+export default CustomPicker(ColorPicker)

From d2fd6c015ed4642d2c785dc7fe77742f636e2b08 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:02:19 +0300
Subject: [PATCH 04/14] move create avatar component into its own folder

---
 .../General/CreateAvatar}/CreateAvatar.tsx                    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/{pages/PairDevice => components/General/CreateAvatar}/CreateAvatar.tsx (86%)

diff --git a/src/pages/PairDevice/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
similarity index 86%
rename from src/pages/PairDevice/CreateAvatar.tsx
rename to src/components/General/CreateAvatar/CreateAvatar.tsx
index d041a6c6..ca0608f9 100644
--- a/src/pages/PairDevice/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -1,7 +1,7 @@
 import { XStack, YStack } from 'tamagui'
-import LabelInputField from '../../components/General/LabelInputField'
+import LabelInputField from '../LabelInputField'
 import { Avatar, Text } from '@status-im/components'
-import ColorPicker from '../../components/General/ColorPicker/ColorPicker'
+import ColorPicker from '../ColorPicker/ColorPicker'
 import { ReactionIcon } from '@status-im/icons'
 
 const CreateAvatar = () => {

From 29f6260eabb82e5418151cfd8a40b6607a5d53e6 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:02:37 +0300
Subject: [PATCH 05/14] fix: update path to create avatar component

---
 src/pages/PairDevice/PairDevice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index a77a8ffb..d7915b0f 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -6,7 +6,7 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
 import Titles from '../../components/General/Titles'
 import PairedSuccessfully from './PairedSuccessfully'
-import CreateAvatar from './CreateAvatar'
+import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 import GenerateId from './GenerateId'
 import { NodeIcon } from '@status-im/icons'
 import Header from '../../components/General/Header'

From b63279a931b396bb0a27e26b1e804f3344ffb272 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:08:04 +0300
Subject: [PATCH 06/14] feat: add create avatar component to create local node
 page

---
 .../CreateLocalNodePage.tsx                   | 44 +++----------------
 1 file changed, 5 insertions(+), 39 deletions(-)

diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index d007e3e5..79055cd8 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -1,17 +1,15 @@
 import { useState } from 'react'
-import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
-import { NodeIcon, ReactionIcon } from '@status-im/icons'
+import { Button as StatusButton, Text, Checkbox } from '@status-im/components'
+import { NodeIcon } from '@status-im/icons'
 import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
-import LabelInputField from '../../components/General/LabelInputField'
-import ColorPicker from '../../components/General/ColorPicker/ColorPicker'
-import EmojiPickerDialog from '../../components/General/EmojiPickerDialog'
+// import LabelInputField from '../../components/General/LabelInputField'
+import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
-  const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
 
   return (
     <PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
@@ -22,39 +20,7 @@ const CreateLocalNodePage = () => {
             title="Create Local Node"
             subtitle="Configure your device to start Staking on Nimbus"
           />
-          <YStack my={16}>
-            <XStack space>
-              <LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
-            </XStack>
-            <XStack my={10} justifyContent={'space-between'}>
-              <YStack mr={30}>
-                <Text size={13} weight="regular" color={'#647084'}>
-                  Device Avatar
-                </Text>
-                <XStack my={10}>
-                  <Avatar type="account" size={80} name="Device Avatar" />
-                  <Avatar
-                    type="icon"
-                    size={32}
-                    icon={
-                      <ReactionIcon
-                        size={20}
-                        onClick={() => setIsEmojiDialogOpen(prev => !prev)}
-                        style={{ cursor: 'pointer' }}
-                      />
-                    }
-                  />
-                  {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
-                </XStack>
-              </YStack>
-              <YStack>
-                <Text size={13} weight="regular" color={'#647084'}>
-                  Highlight Color
-                </Text>
-                <ColorPicker />
-              </YStack>
-            </XStack>
-          </YStack>
+          <CreateAvatar />
           <YStack my={16}>
             <Text size={19} weight="semibold">
               Settings

From 6108b69ca923a30da335d8c7119fe0e16b32088e Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:32:01 +0300
Subject: [PATCH 07/14] feat: add the emoji picker to the create avatar
 component

---
 .../General/CreateAvatar/CreateAvatar.tsx     | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index ca0608f9..099cb610 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -1,10 +1,13 @@
+import { useState } from 'react'
 import { XStack, YStack } from 'tamagui'
-import LabelInputField from '../LabelInputField'
 import { Avatar, Text } from '@status-im/components'
-import ColorPicker from '../ColorPicker/ColorPicker'
 import { ReactionIcon } from '@status-im/icons'
+import LabelInputField from '../LabelInputField'
+import ColorPicker from '../ColorPicker/ColorPicker'
+import EmojiPickerDialog from '../EmojiPickerDialog'
 
 const CreateAvatar = () => {
+  const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false)
   return (
     <YStack my={16}>
       <XStack space>
@@ -15,9 +18,20 @@ const CreateAvatar = () => {
           <Text size={13} weight="regular" color={'#647084'}>
             Device Avatar
           </Text>
-          <XStack my={10}>
-            <Avatar type="account" size={80} name="Device Avatar" />
-            <ReactionIcon size={20} />
+          <XStack my={10} alignItems={'end'}>
+            <Avatar type="user" size={80} name="Device Avatar" />
+            <Avatar
+              type="icon"
+              size={32}
+              icon={
+                <ReactionIcon
+                  size={20}
+                  onClick={() => setIsEmojiDialogOpen(prev => !prev)}
+                  style={{ cursor: 'pointer' }}
+                />
+              }
+            />
+            {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
           </XStack>
         </YStack>
         <YStack>

From 14df1b1d90492ff539995c7bfb4e1a05d962ba1e Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:56:24 +0300
Subject: [PATCH 08/14] aff create avatar styles

---
 src/components/General/CreateAvatar/CreateAvatar.css | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/General/CreateAvatar/CreateAvatar.css

diff --git a/src/components/General/CreateAvatar/CreateAvatar.css b/src/components/General/CreateAvatar/CreateAvatar.css
new file mode 100644
index 00000000..765ed56f
--- /dev/null
+++ b/src/components/General/CreateAvatar/CreateAvatar.css
@@ -0,0 +1,10 @@
+.device-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: -30px;
+}
\ No newline at end of file

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 09/14] 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>

From 4e4f43ac7f4e05ad25e6a60d942e715a861f4b2a Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 11:57:10 +0300
Subject: [PATCH 10/14] fix: remove comented out imports

---
 src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index 79055cd8..0204222e 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -5,7 +5,6 @@ import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import Header from '../../components/General/Header'
 import Titles from '../../components/General/Titles'
-// import LabelInputField from '../../components/General/LabelInputField'
 import CreateAvatar from '../../components/General/CreateAvatar/CreateAvatar'
 
 const CreateLocalNodePage = () => {
@@ -20,7 +19,9 @@ const CreateLocalNodePage = () => {
             title="Create Local Node"
             subtitle="Configure your device to start Staking on Nimbus"
           />
+
           <CreateAvatar />
+
           <YStack my={16}>
             <Text size={19} weight="semibold">
               Settings

From 670bb8dc0388c10762b4c91178dab4eaa80147dd Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 25 Aug 2023 12:15:05 +0300
Subject: [PATCH 11/14] feat:add color picker focus and hover styles

---
 src/components/General/ColorPicker/ColorPicker.css   | 11 +++++++----
 src/components/General/ColorPicker/ColorPicker.tsx   |  2 +-
 src/components/General/CreateAvatar/CreateAvatar.tsx |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/General/ColorPicker/ColorPicker.css b/src/components/General/ColorPicker/ColorPicker.css
index edfabd34..95d023e2 100644
--- a/src/components/General/ColorPicker/ColorPicker.css
+++ b/src/components/General/ColorPicker/ColorPicker.css
@@ -5,6 +5,8 @@
     margin-bottom: 10px;
     margin-right: 10px;
     position: relative;
+    outline: none;
+    border: none;
 }
 
 .color-picker-button::before ,
@@ -20,18 +22,19 @@
     transition: 120ms opacity ease-in-out;
 }
 .color-picker-button::before {
-    width: 0.65em;
-    height: 0.65em;
-    box-shadow: inset 1em 1em white;
+    content: "\2713";
+    font-size: 25px;
+    color: white;
 }
 .color-picker-button::after {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    border: 2px solid white;
+    border: 3px solid currentColor;
 }
 
 .color-picker-button:focus::before,   
+.color-picker-button:focus::after,   
 .color-picker-button:hover::after {
     opacity: 1;
 }
diff --git a/src/components/General/ColorPicker/ColorPicker.tsx b/src/components/General/ColorPicker/ColorPicker.tsx
index a2c90e90..a17a8465 100644
--- a/src/components/General/ColorPicker/ColorPicker.tsx
+++ b/src/components/General/ColorPicker/ColorPicker.tsx
@@ -23,7 +23,7 @@ const ColorPicker = ({ setChosenColor }: ColorPickerProps) => {
 
   return (
     <>
-      <XStack my={10} width="80%" flexWrap="wrap">
+      <XStack my={10} flexWrap="wrap">
         {colors.map((color, i) => (
           <button
             key={i}
diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx
index 2441820e..29adff6e 100644
--- a/src/components/General/CreateAvatar/CreateAvatar.tsx
+++ b/src/components/General/CreateAvatar/CreateAvatar.tsx
@@ -38,7 +38,7 @@ const CreateAvatar = () => {
             {isEmojiDialogOpen && <EmojiPickerDialog emojiStyle="TWITTER" />}
           </XStack>
         </YStack>
-        <YStack>
+        <YStack flexWrap="wrap" width="80%">
           <Text size={13} weight="regular" color={'#647084'}>
             Highlight Color
           </Text>

From 8d94c1b0f20c51e20324b5ae92c2d53eb81749a3 Mon Sep 17 00:00:00 2001
From: Rickard Andersson <gonz@severnatazvezda.com>
Date: Fri, 25 Aug 2023 12:27:50 +0300
Subject: [PATCH 12/14] debug(ci): console log deployment ID in deploy script

---
 .github/workflows/deploy.yaml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index eecde1d1..53e77a70 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -105,10 +105,12 @@ jobs:
           script: |
             const fs = require('fs');
             const deploymentUrl = fs.readFileSync('_vercel-deployment-url', 'utf8');
+            const deploymentId = ${{ steps.vercel-deployment.outputs.deployment_id }};
+            console.log('deploymentId', deploymentId);
             await github.rest.repos.createDeploymentStatus({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              deployment_id: ${{ steps.vercel-deployment.outputs.deployment_id }},
+              deployment_id: deploymentId,
               state: 'success',
               environment_url: deploymentUrl,
               log_url: deploymentUrl,

From f160bd3816fd8c62c8489473e7f810d3c60ee80d Mon Sep 17 00:00:00 2001
From: Rickard Andersson <gonz@severnatazvezda.com>
Date: Fri, 25 Aug 2023 12:39:42 +0300
Subject: [PATCH 13/14] debug(ci): remove unnecessary debug lines in deploy
 script

---
 .github/workflows/deploy.yaml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index 53e77a70..eecde1d1 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -105,12 +105,10 @@ jobs:
           script: |
             const fs = require('fs');
             const deploymentUrl = fs.readFileSync('_vercel-deployment-url', 'utf8');
-            const deploymentId = ${{ steps.vercel-deployment.outputs.deployment_id }};
-            console.log('deploymentId', deploymentId);
             await github.rest.repos.createDeploymentStatus({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              deployment_id: deploymentId,
+              deployment_id: ${{ steps.vercel-deployment.outputs.deployment_id }},
               state: 'success',
               environment_url: deploymentUrl,
               log_url: deploymentUrl,

From 3d0eea506af580d57bbbbdc2a43aab2981e3f109 Mon Sep 17 00:00:00 2001
From: Rickard Andersson <gonz@severnatazvezda.com>
Date: Fri, 25 Aug 2023 12:43:30 +0300
Subject: [PATCH 14/14] fix(ci): exit early if we have no PR number in CI

---
 .github/workflows/ui-tests.yaml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ui-tests.yaml b/.github/workflows/ui-tests.yaml
index 4a5817b6..464481f8 100644
--- a/.github/workflows/ui-tests.yaml
+++ b/.github/workflows/ui-tests.yaml
@@ -37,7 +37,7 @@ jobs:
       - uses: actions/checkout@v2
       - name: Get PR number
         id: pull_request
-        run: echo "::set-output name=number::$(gh pr view --json number -q .number || echo "")"
+        run: echo "::set-output name=number::$(gh pr view --json number -q .number || echo "null")"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - uses: actions/setup-node@v2
@@ -66,6 +66,10 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
+            const pullRequestNumber = ${{ steps.pull_request.outputs.number }};
+            if (pullRequestNumber === null) {
+              return;
+            }
             const fs = require('fs');
             const deploymentUrl = fs.readFileSync('_vercel-deployment-url', 'utf8');
             await github.rest.issues.createComment({