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);