From 4983ddbc1759c1830129bf68218b015a8df30243 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 18 Jul 2021 09:42:07 +1000
Subject: [PATCH] Remove primary colour from colour options

---
 .../map/controls/DrawingToolSettings.tsx      |  1 +
 .../map/controls/PointerToolSettings.tsx      |  2 +-
 src/components/note/NoteMenu.tsx              | 58 ++++++++---------
 src/components/token/TokenMenu.tsx            | 62 ++++++++++---------
 4 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/src/components/map/controls/DrawingToolSettings.tsx b/src/components/map/controls/DrawingToolSettings.tsx
index b4e8d61..e66205e 100644
--- a/src/components/map/controls/DrawingToolSettings.tsx
+++ b/src/components/map/controls/DrawingToolSettings.tsx
@@ -123,6 +123,7 @@ function DrawingToolSettings({
       <ColorControl
         color={settings.color}
         onColorChange={(color) => onSettingChange({ color })}
+        exclude={["primary"]}
       />
       <Divider vertical />
       <ToolSection
diff --git a/src/components/map/controls/PointerToolSettings.tsx b/src/components/map/controls/PointerToolSettings.tsx
index 579702d..90b570b 100644
--- a/src/components/map/controls/PointerToolSettings.tsx
+++ b/src/components/map/controls/PointerToolSettings.tsx
@@ -18,7 +18,7 @@ function PointerToolSettings({
       <ColorControl
         color={settings.color}
         onColorChange={(color) => onSettingChange({ color })}
-        exclude={["black", "darkGray", "lightGray", "white"]}
+        exclude={["black", "darkGray", "lightGray", "white", "primary"]}
       />
     </Flex>
   );
diff --git a/src/components/note/NoteMenu.tsx b/src/components/note/NoteMenu.tsx
index 4096ec7..04933ad 100644
--- a/src/components/note/NoteMenu.tsx
+++ b/src/components/note/NoteMenu.tsx
@@ -167,34 +167,36 @@ function NoteMenu({
             justifyContent: "space-between",
           }}
         >
-          {colorOptions.map((color) => (
-            <Box
-              key={color}
-              sx={{
-                width: "16.66%",
-                paddingTop: "16.66%",
-                borderRadius: "50%",
-                transform: "scale(0.75)",
-                backgroundColor: colors[color],
-                cursor: "pointer",
-              }}
-              onClick={() => handleColorChange(color)}
-              aria-label={`Note label Color ${color}`}
-            >
-              {note && note.color === color && (
-                <Box
-                  sx={{
-                    width: "100%",
-                    height: "100%",
-                    border: "2px solid white",
-                    position: "absolute",
-                    top: 0,
-                    borderRadius: "50%",
-                  }}
-                />
-              )}
-            </Box>
-          ))}
+          {colorOptions
+            .filter((color) => color !== "primary")
+            .map((color) => (
+              <Box
+                key={color}
+                sx={{
+                  width: "16.66%",
+                  paddingTop: "16.66%",
+                  borderRadius: "50%",
+                  transform: "scale(0.75)",
+                  backgroundColor: colors[color],
+                  cursor: "pointer",
+                }}
+                onClick={() => handleColorChange(color)}
+                aria-label={`Note label Color ${color}`}
+              >
+                {note && note.color === color && (
+                  <Box
+                    sx={{
+                      width: "100%",
+                      height: "100%",
+                      border: "2px solid white",
+                      position: "absolute",
+                      top: 0,
+                      borderRadius: "50%",
+                    }}
+                  />
+                )}
+              </Box>
+            ))}
         </Box>
         <Flex sx={{ alignItems: "center" }}>
           <Text
diff --git a/src/components/token/TokenMenu.tsx b/src/components/token/TokenMenu.tsx
index 438c7ce..b4e8031 100644
--- a/src/components/token/TokenMenu.tsx
+++ b/src/components/token/TokenMenu.tsx
@@ -190,36 +190,38 @@ function TokenMenu({
             justifyContent: "space-between",
           }}
         >
-          {colorOptions.map((color) => (
-            <Box
-              key={color}
-              sx={{
-                width: "16.66%",
-                paddingTop: "16.66%",
-                borderRadius: "50%",
-                transform: "scale(0.75)",
-                backgroundColor: colors[color],
-                cursor: "pointer",
-              }}
-              onClick={() => handleStatusChange(color)}
-              aria-label={`Token label Color ${color}`}
-            >
-              {tokenState &&
-                tokenState.statuses &&
-                tokenState.statuses.includes(color) && (
-                  <Box
-                    sx={{
-                      width: "100%",
-                      height: "100%",
-                      border: "2px solid white",
-                      position: "absolute",
-                      top: 0,
-                      borderRadius: "50%",
-                    }}
-                  />
-                )}
-            </Box>
-          ))}
+          {colorOptions
+            .filter((color) => color !== "primary")
+            .map((color) => (
+              <Box
+                key={color}
+                sx={{
+                  width: "16.66%",
+                  paddingTop: "16.66%",
+                  borderRadius: "50%",
+                  transform: "scale(0.75)",
+                  backgroundColor: colors[color],
+                  cursor: "pointer",
+                }}
+                onClick={() => handleStatusChange(color)}
+                aria-label={`Token label Color ${color}`}
+              >
+                {tokenState &&
+                  tokenState.statuses &&
+                  tokenState.statuses.includes(color) && (
+                    <Box
+                      sx={{
+                        width: "100%",
+                        height: "100%",
+                        border: "2px solid white",
+                        position: "absolute",
+                        top: 0,
+                        borderRadius: "50%",
+                      }}
+                    />
+                  )}
+              </Box>
+            ))}
         </Box>
         <Flex sx={{ alignItems: "center" }}>
           <Text