Add color selection and save it to localStorage

package-lock.json

@@ -24,6 +24,7 @@
         "luxon": "^3.3.0",
         "next": "13.4.5",
         "react": "18.2.0",
+        "react-color": "^2.19.3",
         "react-countdown": "^2.3.5",
         "react-dom": "18.2.0",
         "sharp": "^0.32.1",
@@ -33,6 +34,7 @@
       "devDependencies": {
         "@types/crypto-js": "^4.1.1",
         "@types/luxon": "^3.3.0",
+        "@types/react-color": "^3.0.7",
         "@types/three": "^0.152.1",
         "eslint-plugin-prettier": "^5.0.0",
         "prettier": "3.0.3"
@@ -397,6 +399,14 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "node_modules/@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.4",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz",
@@ -922,6 +932,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-color": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.7.tgz",
+      "integrity": "sha512-IGZA7e8Oia0+Sb3/1KP0qTThGelZ9DRspfeLrFWQWv5vXHiYlJJQMC2kgQr75CtP4uL8/kvT8qBgrOVlxVoNTw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "@types/reactcss": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz",
@@ -946,6 +966,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/reactcss": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.7.tgz",
+      "integrity": "sha512-MYPuVierMjIo0EDQnNauvBA94IOeB9lfjC619g+26u7ilsTtoFv6X7eQvaw79Fqqpi0yzoSMz0nUazeJlQUZnA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -3302,6 +3331,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3337,6 +3376,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -4001,6 +4045,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "dependencies": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-countdown": {
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
@@ -4045,6 +4106,14 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "dependencies": {
+        "lodash": "^4.0.1"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -4670,6 +4739,11 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
       "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
     "node_modules/titleize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@@ -5242,6 +5316,12 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+      "requires": {}
+    },
     "@mui/base": {
       "version": "5.0.0-beta.4",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.4.tgz",
@@ -5533,6 +5613,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-color": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.7.tgz",
+      "integrity": "sha512-IGZA7e8Oia0+Sb3/1KP0qTThGelZ9DRspfeLrFWQWv5vXHiYlJJQMC2kgQr75CtP4uL8/kvT8qBgrOVlxVoNTw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/reactcss": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "18.2.5",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.5.tgz",
@@ -5557,6 +5647,15 @@
         "@types/react": "*"
       }
     },
+    "@types/reactcss": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.7.tgz",
+      "integrity": "sha512-MYPuVierMjIo0EDQnNauvBA94IOeB9lfjC619g+26u7ilsTtoFv6X7eQvaw79Fqqpi0yzoSMz0nUazeJlQUZnA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -7185,6 +7284,16 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7211,6 +7320,11 @@
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
       "integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg=="
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -7637,6 +7751,20 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-color": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
+      "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.15",
+        "lodash-es": "^4.17.15",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-countdown": {
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.5.tgz",
@@ -7670,6 +7798,14 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -8071,6 +8207,11 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
       "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
     },
+    "tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
     "titleize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "luxon": "^3.3.0",
     "next": "13.4.5",
     "react": "18.2.0",
+    "react-color": "^2.19.3",
     "react-countdown": "^2.3.5",
     "react-dom": "18.2.0",
     "sharp": "^0.32.1",
@@ -35,6 +36,7 @@
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
     "@types/luxon": "^3.3.0",
+    "@types/react-color": "^3.0.7",
     "@types/three": "^0.152.1",
     "eslint-plugin-prettier": "^5.0.0",
     "prettier": "3.0.3"

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -31,7 +31,7 @@ const Transition = forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement;
   },
-  ref: React.Ref<unknown>
+  ref: React.Ref<unknown>,
 ) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
@@ -44,7 +44,7 @@ export const PlanetCard = ({
   character: AccessToken;
 }) => {
   const [planetInfo, setPlanetInfo] = useState<PlanetInfo | undefined>(
-    undefined
+    undefined,
   );
 
   const [planetInfoUniverse, setPlanetInfoUniverse] = useState<
@@ -71,7 +71,7 @@ export const PlanetCard = ({
     [];
   const getPlanet = async (
     character: AccessToken,
-    planet: Planet
+    planet: Planet,
   ): Promise<PlanetInfo> => {
     const api = new Api();
     const planetInfo = (
@@ -80,14 +80,14 @@ export const PlanetCard = ({
         planet.planet_id,
         {
           token: character.access_token,
-        }
+        },
       )
     ).data;
     return planetInfo;
   };
 
   const getPlanetUniverse = async (
-    planet: Planet
+    planet: Planet,
   ): Promise<PlanetInfoUniverse> => {
     const api = new Api();
     const planetInfo = (
@@ -96,7 +96,7 @@ export const PlanetCard = ({
     return planetInfo;
   };
 
-  const colorContext = useContext(ColorContext)
+  const { colors } = useContext(ColorContext);
 
   useEffect(() => {
     getPlanet(character, planet).then(setPlanetInfo);
@@ -144,7 +144,7 @@ export const PlanetCard = ({
         return (
           <Typography
             key={`${e}-${idx}-${character.character.characterId}`}
-            color={timeColor(e, colorContext)}
+            color={timeColor(e, colors)}
             fontSize={theme.custom.smallText}
           >
             {e ? (

src/app/components/PlanetaryInteraction/PlanetTableRow.tsx

@@ -1,8 +1,4 @@
-import {
+import { SessionContext, ColorContext } from "@/app/context/Context";
-  SessionContext,
-  ColorContext,
-  ColorContextType,
-} from "@/app/context/Context";
 import {
   EXTRACTOR_TYPE_IDS,
   FACTORY_IDS,
@@ -178,7 +174,7 @@ export const PlanetTableRow = ({
     getPlanetUniverse(planet).then(setPlanetInfoUniverse);
   }, [planet, character]);
 
-  const colorContext = useContext(ColorContext);
+  const { colors } = useContext(ColorContext);
   return (
     <TableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
       <TableCell component="th" scope="row">
@@ -210,7 +206,7 @@ export const PlanetTableRow = ({
                 style={{ display: "flex" }}
               >
                 <Typography
-                  color={timeColor(e.expiry_time, colorContext)}
+                  color={timeColor(e.expiry_time, colors)}
                   fontSize={theme.custom.smallText}
                   paddingRight={1}
                 >

src/app/components/PlanetaryInteraction/timeColors.ts

@@ -1,9 +1,9 @@
-import { ColorContextType } from "@/app/context/Context";
+import { ColorSelectionType } from "@/app/context/Context";
 import { DateTime } from "luxon";
 
 export const timeColor = (
   extractorDate: string | undefined,
-  colors: ColorContextType,
+  colors: ColorSelectionType,
 ): string => {
   if (!extractorDate) return colors.expiredColor;
   const dateExtractor = DateTime.fromISO(extractorDate);

src/app/components/Settings/SettingsButtons.tsx

@@ -1,10 +1,22 @@
-import { SessionContext } from "@/app/context/Context";
+import {
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField, Tooltip } from "@mui/material";
+  ColorContext,
+  ColorSelectionType,
+} from "@/app/context/Context";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color";
 import React from "react";
 import { useContext } from "react";
 
 export const SettingsButton = () => {
-  const { compactMode, toggleCompactMode } = useContext(SessionContext);
+  const { colors, setColors } = useContext(ColorContext);
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -14,6 +26,14 @@ export const SettingsButton = () => {
   const handleClose = () => {
     setOpen(false);
   };
+  const handleColorSelection = (key: string, currentColors: ColorSelectionType) => (selection: ColorResult) => {
+    console.log(key, selection.hex)
+    setColors({
+      ...currentColors,
+      [key]: selection.hex
+    })
+  };
+
   return (
     <Tooltip title="Toggle settings dialog">
       <>
@@ -27,17 +47,21 @@ export const SettingsButton = () => {
           <DialogTitle id="alert-dialog-title">
             {"Override default timer colors"}
           </DialogTitle>
-          <DialogContent style={{ paddingTop: '1rem'}}>
+          <DialogContent style={{ paddingTop: "1rem" }}>
-            <TextField
+            {Object.keys(colors).map((key) => {
-              label="Required"
+              return (
-              defaultValue="Hello World"
+                <div key={`color-row-${key}`}>
-            />
+                  <Typography>{key}</Typography>
+                  <CompactPicker
+                    color={colors[key as keyof ColorSelectionType]}
+                    onChangeComplete={handleColorSelection(key, colors)}
+                  />
+                </div>
+              );
+            })}
           </DialogContent>
           <DialogActions>
-            <Button onClick={handleClose}>Disagree</Button>
+            <Button onClick={handleClose}>Close</Button>
-            <Button onClick={handleClose} autoFocus>
-              Agree
-            </Button>
           </DialogActions>
         </Dialog>
       </>

src/app/components/Settings/SettingsDialog.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Button } from '@mui/material';
-
-export default function AlertDialog({handleClickOpen}: ) {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id="alert-dialog-title">
-          {"Use Google's location service?"}
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            Let Google help apps determine location. This means sending anonymous
-            location data to Google, even when no apps are running.
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose}>Disagree</Button>
-          <Button onClick={handleClose} autoFocus>
-            Agree
-          </Button>
-        </DialogActions>
-      </Dialog>
-  );
-}

src/app/context/Context.tsx

@@ -36,8 +36,8 @@ export const SessionContext = createContext<{
   planMode: false,
   togglePlanMode: () => {},
   piPrices: undefined,
-})
+});
-export type ColorContextType = {
+export type ColorSelectionType = {
   defaultColor: string;
   expiredColor: string;
   twoHoursColor: string;
@@ -46,16 +46,22 @@ export type ColorContextType = {
   twelveHoursColor: string;
   dayColor: string;
   twoDaysColor: string;
+};
 
-}
+export const defaultColors = {
-export const ColorContext = createContext<ColorContextType>({
+  defaultColor: "#006596",
-  defaultColor: '#006596',
+  expiredColor: "#AB324A",
-  expiredColor: '#AB324A',
+  twoHoursColor: "#9C4438",
-  twoHoursColor: '#9C4438',
+  fourHoursColor: "#765B21",
-  fourHoursColor: '#765B21',
+  eightHoursColor: "#63620D",
-  eightHoursColor: '#63620D',
+  twelveHoursColor: "#2C6C2F",
-  twelveHoursColor: '#2C6C2F',
+  dayColor: "#2F695A",
-  dayColor: '#2F695A',
+  twoDaysColor: "#2F695A",
-  twoDaysColor: '#2F695A',
+};
+export const ColorContext = createContext<{
+  colors: ColorSelectionType;
+  setColors: (colors: ColorSelectionType) => void;
+}>({
+  colors: defaultColors,
+  setColors: () => {}
 });
-

src/app/page.tsx

@@ -7,7 +7,13 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { AccessToken, CharacterUpdate, Env } from "../types";
 import { MainGrid } from "./components/MainGrid";
 import { refreshToken } from "@/esi-sso";
-import { CharacterContext, SessionContext } from "./context/Context";
+import {
+  CharacterContext,
+  ColorContext,
+  ColorSelectionType,
+  SessionContext,
+  defaultColors,
+} from "./context/Context";
 import { useSearchParams } from "next/navigation";
 import { EvePraisalResult, fetchAllPrices } from "@/eve-praisal";
 
@@ -18,9 +24,9 @@ const Home = () => {
   const [compactMode, setCompactMode] = useState(false);
   const [planMode, setPlanMode] = useState(false);
   const [piPrices, setPiPrices] = useState<EvePraisalResult | undefined>(
-    undefined
+    undefined,
   );
-
+  const [colors, setColors] = useState<ColorSelectionType>(defaultColors);
   const searchParams = useSearchParams();
   const code = searchParams && searchParams.get("code");
 
@@ -28,7 +34,7 @@ const Home = () => {
 
   const deleteCharacter = (character: AccessToken) => {
     const charactersToSave = characters.filter(
-      (c) => character.character.characterId !== c.character.characterId
+      (c) => character.character.characterId !== c.character.characterId,
     );
     setCharacters(charactersToSave);
     saveCharacters(charactersToSave);
@@ -36,7 +42,7 @@ const Home = () => {
 
   const updateCharacter = (
     character: AccessToken,
-    updates: CharacterUpdate
+    updates: CharacterUpdate,
   ) => {
     const charactersToSave = characters.map((c) => {
       if (c.character.characterId === character.character.characterId)
@@ -56,7 +62,7 @@ const Home = () => {
   };
 
   const handleCallback = async (
-    characters: AccessToken[]
+    characters: AccessToken[],
   ): Promise<AccessToken[]> => {
     if (code) {
       window.history.replaceState(null, "", "/");
@@ -89,19 +95,28 @@ const Home = () => {
   };
 
   const togglePlanMode = () => {
-    setPlanMode(!planMode)
+    setPlanMode(!planMode);
-  }
+  };
 
   useEffect(() => {
     const storedCompactMode = localStorage.getItem("compactMode");
     if (!storedCompactMode) return;
     storedCompactMode === "true" ? setCompactMode(true) : false;
   }, []);
+  useEffect(() => {
+    const storedColors = localStorage.getItem("colors");
+    if (!storedColors) return;
+    setColors(JSON.parse(storedColors))
+  }, []);
 
   useEffect(() => {
     localStorage.setItem("compactMode", compactMode ? "true" : "false");
   }, [compactMode]);
 
+  useEffect(() => {
+    localStorage.setItem("colors", JSON.stringify(colors))
+  }, [colors]);
+
   // Initialize EVE PI
   useEffect(() => {
     fetch("api/env")
@@ -157,7 +172,9 @@ const Home = () => {
           restoreCharacters,
         }}
       >
-        <MainGrid />
+        <ColorContext.Provider value={{ colors: colors, setColors: setColors }}>
+          <MainGrid />
+        </ColorContext.Provider>
       </CharacterContext.Provider>
     </SessionContext.Provider>
   );