refactor compact mode to theme provider

src/app/components/Account/AccountCard.tsx

@@ -1,9 +1,7 @@
 import { AccessToken } from "@/types";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
 import { CharacterRow } from "../Characters/CharacterRow";
 import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
-import { useContext } from "react";
-import { SessionContext } from "@/app/context/Context";
 
 export const AccountCard = ({
   characters,
@@ -12,12 +10,12 @@ export const AccountCard = ({
   characters: AccessToken[];
   sessionReady: boolean;
 }) => {
-  const { compactMode } = useContext(SessionContext);
+  const theme = useTheme();
   return (
     <Box
       sx={{
         padding: 1,
-        borderBottom: compactMode ? "" : "solid 1px gray",
+        borderBottom: theme.custom.compactMode ? "" : "solid 1px gray",
       }}
     >
       <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>

src/app/components/Characters/CharacterRow.tsx

@@ -3,17 +3,17 @@
 import { useContext, useState } from "react";
 import Image from "next/image";
 import Stack from "@mui/material/Stack";
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
 import React from "react";
 import { CharacterDialog } from "./CharacterDialog";
 import { AccessToken } from "@/types";
 import { Box, Button } from "@mui/material";
 import { EVE_IMAGE_URL } from "@/const";
-import { CharacterContext, SessionContext } from "@/app/context/Context";
+import { CharacterContext } from "@/app/context/Context";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
-  padding: theme.spacing(2),
+  padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
   textAlign: "left",
   justifyContent: "center",
   alignItems: "center",
@@ -25,7 +25,7 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
   >(undefined);
 
   const { deleteCharacter, updateCharacter } = useContext(CharacterContext);
-  const { compactMode } = useContext(SessionContext);
+  const theme = useTheme();
   return (
     <StackItem
       key={character.character.characterId}
@@ -47,11 +47,18 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
         <Image
           src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=128`}
           alt=""
-          width={compactMode ? 80 : 120}
+          width={theme.custom.cardImageSize}
-          height={compactMode ? 80 : 120}
+          height={theme.custom.cardImageSize}
           style={{ marginBottom: "0.2rem", borderRadius: 8 }}
         />
-        <Button style={{ padding: 3, fontSize: "0.6rem" }} variant="outlined">
+        <Button
+          style={{
+            padding: 6,
+            fontSize: theme.custom.smallText,
+            lineHeight: 1,
+          }}
+          variant="outlined"
+        >
           {character.character.name}
         </Button>
       </Box>

src/app/components/MainGrid.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   Box,
   CssBaseline,
@@ -15,11 +15,24 @@ interface Grouped {
   [key: string]: AccessToken[];
 }
 
-const darkTheme = createTheme({
+declare module "@mui/material/styles" {
-  palette: {
+  interface Theme {
-    mode: "dark",
+    custom: {
-  },
+      compactMode: boolean;
-});
+      smallText: string;
+      cardImageSize: number;
+      cardMinHeight: number;
+    };
+  }
+  interface ThemeOptions {
+    custom?: {
+      compactMode?: boolean;
+      smallText?: string;
+      cardImageSize?: number;
+      cardMinHeight?: number;
+    };
+  }
+}
 
 export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   const { characters } = useContext(CharacterContext);
@@ -31,6 +44,35 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   }, {});
 
   const { compactMode } = useContext(SessionContext);
+  const [darkTheme, setDarkTheme] = useState(
+    createTheme({
+      palette: {
+        mode: "dark",
+      },
+      custom: {
+        compactMode,
+        smallText: compactMode ? "0.6rem" : "0.8rem",
+        cardImageSize: compactMode ? 80 : 120,
+        cardMinHeight: compactMode ? 100 : 170,
+      },
+    })
+  );
+
+  useEffect(() => {
+    setDarkTheme(
+      createTheme({
+        palette: {
+          mode: "dark",
+        },
+        custom: {
+          compactMode,
+          smallText: compactMode ? "0.6rem" : "0.8rem",
+          cardImageSize: compactMode ? 80 : 120,
+          cardMinHeight: compactMode ? 100 : 170,
+        },
+      })
+    );
+  }, [compactMode]);
 
   return (
     <ThemeProvider theme={darkTheme}>
@@ -41,7 +83,8 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
           {Object.values(groupByAccount).map((g, id) => (
             <Grid
               item
-              xs={compactMode ? 6 : 12}
+              xs={12}
+              sm={compactMode ? 6 : 12}
               key={`account-${id}-${g[0].account}`}
             >
               <AccountCard characters={g} sessionReady={sessionReady} />

src/app/components/PlanetaryInteraction/NoPlanetCard.tsx

@@ -1,6 +1,4 @@
-import { SessionContext } from "@/app/context/Context";
+import { Box, Stack, Typography, styled, useTheme } from "@mui/material";
-import { Box, Stack, Typography, styled } from "@mui/material";
-import { useContext } from "react";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
@@ -12,20 +10,19 @@ const StackItem = styled(Stack)(({ theme }) => ({
 }));
 
 export const NoPlanetCard = ({}: {}) => {
-  const { compactMode } = useContext(SessionContext);
+  const theme = useTheme();
   return (
     <StackItem
       alignItems="flex-start"
       height="100%"
-      minHeight={compactMode ? "100px" : "170px"}
+      minHeight={theme.custom.cardMinHeight}
     >
       <Box
-        width={compactMode ? 80 : 120}
+        width={theme.custom.cardImageSize}
-        height={compactMode ? 80 : 120}
+        height={theme.custom.cardImageSize}
-        border="solid 1px black"
+        style={{ borderRadius: 8, marginRight: 4, backgroundColor: "#101010" }}
-        style={{ borderRadius: 8, marginRight: 4 }}
       />
-      <Typography fontSize="0.8rem">No planet</Typography>
+      <Typography fontSize={theme.custom.smallText}>No planet</Typography>
     </StackItem>
   );
 };

src/app/components/PlanetaryInteraction/PlanetCard.tsx

@@ -1,4 +1,4 @@
-import { Stack, Typography, styled } from "@mui/material";
+import { Stack, Typography, styled, useTheme } from "@mui/material";
 import Image from "next/image";
 import { AccessToken, Planet } from "@/types";
 import { Api } from "@/esi-api";
@@ -15,7 +15,6 @@ import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import Button from "@mui/material/Button";
-import { SessionContext } from "@/app/context/Context";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
@@ -110,7 +109,7 @@ export const PlanetCard = ({
 
   const [planetRenderOpen, setPlanetRenderOpen] = useState(false);
 
-  const { compactMode } = useContext(SessionContext);
+  const theme = useTheme();
 
   const handle3DrenderOpen = () => {
     setPlanetRenderOpen(true);
@@ -171,13 +170,13 @@ export const PlanetCard = ({
       alignItems="flex-start"
       height="100%"
       position="relative"
-      minHeight={compactMode ? "100px" : "170px"}
+      minHeight={theme.custom.cardMinHeight}
     >
       <Image
         src={`/${planet.planet_type}.png`}
         alt=""
-        width={compactMode ? 80 : 120}
+        width={theme.custom.cardImageSize}
-        height={compactMode ? 80 : 120}
+        height={theme.custom.cardImageSize}
         style={{ borderRadius: 8, marginRight: 4 }}
         onClick={handle3DrenderOpen}
       />
@@ -196,8 +195,12 @@ export const PlanetCard = ({
         />
       )}
       <div style={{ position: "absolute", top: 5, left: 10 }}>
-        <Typography fontSize="0.8rem">{planetInfoUniverse?.name}</Typography>
+        <Typography fontSize={theme.custom.smallText}>
-        <Typography fontSize="0.8rem">L{planet.upgrade_level}</Typography>
+          {planetInfoUniverse?.name}
+        </Typography>
+        <Typography fontSize={theme.custom.smallText}>
+          L{planet.upgrade_level}
+        </Typography>
       </div>
 
       {extractors.map((e, idx) => {
@@ -205,7 +208,7 @@ export const PlanetCard = ({
           <Typography
             key={`${e}-${idx}-${character.character.characterId}`}
             color={timeColor(e)}
-            fontSize="0.8rem"
+            fontSize={theme.custom.smallText}
           >
             {e ? (
               <Countdown

src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx

@@ -7,7 +7,7 @@ import { NoPlanetCard } from "./NoPlanetCard";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
-  padding: theme.spacing(2),
+  padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
   textAlign: "left",
   justifyContent: "center",
   alignItems: "center",