Add color selection and save it to localStorage

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 {
-  SessionContext,
-  ColorContext,
-  ColorContextType,
-} from "@/app/context/Context";
+import { SessionContext, ColorContext } 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 { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField, Tooltip } from "@mui/material";
+import {
+  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'}}>
-            <TextField
-              label="Required"
-              defaultValue="Hello World"
-            />
+          <DialogContent style={{ paddingTop: "1rem" }}>
+            {Object.keys(colors).map((key) => {
+              return (
+                <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} autoFocus>
-              Agree
-            </Button>
+            <Button onClick={handleClose}>Close</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>
-  );
-}