Moved status color helper to general color helper

src/components/TokenMenu.js

@@ -3,7 +3,7 @@ import Modal from "react-modal";
 import interact from "interactjs";
 import { Box, Input } from "theme-ui";
 
-import { statusOptions, statusToColor } from "../helpers/status";
+import colors, { colorOptions } from "../helpers/colors";
 
 function TokenMenu({ tokenClassName, onTokenChange }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -172,20 +172,20 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
             justifyContent: "space-between",
           }}
         >
-          {statusOptions.map((status) => (
+          {colorOptions.map((color) => (
             <Box
-              key={status}
+              key={color}
               sx={{
                 width: "33%",
                 paddingTop: "33%",
                 borderRadius: "50%",
                 transform: "scale(0.75)",
-                backgroundColor: statusToColor(status),
+                backgroundColor: colors[color],
                 cursor: "pointer",
               }}
-              onClick={() => handleStatusChange(status)}
+              onClick={() => handleStatusChange(color)}
             >
-              {currentToken.status && currentToken.status.includes(status) && (
+              {currentToken.status && currentToken.status.includes(color) && (
                 <Box
                   sx={{
                     width: "100%",

src/components/TokenStatus.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box } from "theme-ui";
 
-import { statusToColor } from "../helpers/status";
+import colors from "../helpers/colors";
 
 function TokenStatus({ statuses }) {
   return (
@@ -34,7 +34,7 @@ function TokenStatus({ statuses }) {
               cx={50}
               cy={50}
               fill="none"
-              stroke={statusToColor(status)}
+              stroke={colors[status]}
               strokeWidth={4}
             />
           </svg>

src/helpers/colors.js

@@ -0,0 +1,13 @@
+// Colors used for the game for theme general UI colors look at theme.js
+const colors = {
+  blue: "rgb(26, 106, 255)",
+  orange: "rgb(255, 116, 51)",
+  red: "rgb(255, 77, 77)",
+  purple: "rgb(136, 77, 255)",
+  green: "rgb(133, 255, 102)",
+  pink: "rgb(235, 138, 255)",
+};
+
+export const colorOptions = Object.keys(colors);
+
+export default colors;

src/helpers/status.js

@@ -1,27 +0,0 @@
-export function statusToColor(status) {
-  switch (status) {
-    case "blue":
-      return "rgb(26, 106, 255)";
-    case "orange":
-      return "rgb(255, 116, 51)";
-    case "red":
-      return "rgb(255, 77, 77)";
-    case "purple":
-      return "rgb(136, 77, 255)";
-    case "green":
-      return "rgb(133, 255, 102)";
-    case "pink":
-      return "rgb(235, 138, 255)";
-    default:
-      throw Error("Color not implemented");
-  }
-}
-
-export const statusOptions = [
-  "blue",
-  "orange",
-  "red",
-  "purple",
-  "green",
-  "pink",
-];