Make toggle buttons more inline with rest of buttons

src/app/components/CompactModeButton/CompactModeButton.tsx

@@ -1,18 +1,21 @@
 import { SessionContext } from "@/app/context/Context";
-import { ToggleButton, Tooltip } from "@mui/material";
+import { Button, Tooltip } from "@mui/material";
 import { useContext } from "react";
 
 export const CompactModeButton = () => {
   const { compactMode, toggleCompactMode } = useContext(SessionContext);
   return (
     <Tooltip title="Toggle compact layout for widescreen">
-      <ToggleButton
+      <Button
-        value="check"
+        style={{
-        selected={compactMode}
+          backgroundColor: compactMode
-        onChange={toggleCompactMode}
+            ? "rgba(144, 202, 249, 0.08)"
+            : "inherit",
+        }}
+        onClick={toggleCompactMode}
       >
         Compact mode
-      </ToggleButton>
+      </Button>
     </Tooltip>
   );
 };

src/app/components/PlanModeButton/PlanModeButton.tsx

@@ -1,18 +1,15 @@
 import { SessionContext } from "@/app/context/Context";
-import { ToggleButton, Tooltip } from "@mui/material";
+import { Button, Tooltip } from "@mui/material";
 import { useContext } from "react";
 
 export const PlanModeButton = () => {
   const { planMode, togglePlanMode } = useContext(SessionContext);
   return (
     <Tooltip title="Toggle plan mode that show layout for widescreen">
-      <ToggleButton
+      <Button onClick={togglePlanMode} style={{backgroundColor: planMode ? 'rgba(144, 202, 249, 0.08)' : 'inherit'}}>
-        value="check"
-        selected={planMode}
-        onChange={togglePlanMode}
-      >
         Plan mode
-      </ToggleButton>
+
+      </Button>
     </Tooltip>
   );
 };