refactor compact mode to theme provider

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}
-          height={compactMode ? 80 : 120}
+          width={theme.custom.cardImageSize}
+          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>