feat:add color picker focus and hover styles

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;
+    content: "\2713";
-    height: 0.65em;
+    font-size: 25px;
-    box-shadow: inset 1em 1em white;
+    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;
 }

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}

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>