Added more color options to map colors

src/components/TokenMenu.js

@@ -143,7 +143,7 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
       }}
       contentRef={handleModalContent}
     >
-      <Box sx={{ width: "80px" }} p={1}>
+      <Box sx={{ width: "104px" }} p={1}>
         <Box
           as="form"
           onSubmit={(e) => {
@@ -176,8 +176,8 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
             <Box
               key={color}
               sx={{
-                width: "33%",
-                paddingTop: "33%",
+                width: "25%",
+                paddingTop: "25%",
                 borderRadius: "50%",
                 transform: "scale(0.75)",
                 backgroundColor: colors[color],

src/helpers/colors.js

@@ -3,9 +3,15 @@ const colors = {
   blue: "rgb(26, 106, 255)",
   orange: "rgb(255, 116, 51)",
   red: "rgb(255, 77, 77)",
+  yellow: "rgb(255, 212, 51)",
   purple: "rgb(136, 77, 255)",
   green: "rgb(133, 255, 102)",
   pink: "rgb(235, 138, 255)",
+  teal: "rgb(68, 224, 241)",
+  black: "rgb(0, 0, 0)",
+  darkGray: "rgb(90, 90, 90)",
+  lightGray: "rgb(179, 179, 179)",
+  white: "rgb(255, 255, 255)",
 };
 
 export const colorOptions = Object.keys(colors);