From 53c57a0383dd042db79981f36430e4588a8a76d3 Mon Sep 17 00:00:00 2001
From: Calli <calli-eve@proton.me>
Date: Fri, 6 Oct 2023 17:47:49 +0300
Subject: [PATCH] Make toggle buttons more inline with rest of buttons

---
 .../CompactModeButton/CompactModeButton.tsx       | 15 +++++++++------
 .../components/PlanModeButton/PlanModeButton.tsx  | 11 ++++-------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/components/CompactModeButton/CompactModeButton.tsx b/src/app/components/CompactModeButton/CompactModeButton.tsx
index e661b79..5af6a36 100644
--- a/src/app/components/CompactModeButton/CompactModeButton.tsx
+++ b/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
-        value="check"
-        selected={compactMode}
-        onChange={toggleCompactMode}
+      <Button
+        style={{
+          backgroundColor: compactMode
+            ? "rgba(144, 202, 249, 0.08)"
+            : "inherit",
+        }}
+        onClick={toggleCompactMode}
       >
         Compact mode
-      </ToggleButton>
+      </Button>
     </Tooltip>
   );
 };
diff --git a/src/app/components/PlanModeButton/PlanModeButton.tsx b/src/app/components/PlanModeButton/PlanModeButton.tsx
index 6726b76..0ba7818 100644
--- a/src/app/components/PlanModeButton/PlanModeButton.tsx
+++ b/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
-        value="check"
-        selected={planMode}
-        onChange={togglePlanMode}
-      >
+      <Button onClick={togglePlanMode} style={{backgroundColor: planMode ? 'rgba(144, 202, 249, 0.08)' : 'inherit'}}>
         Plan mode
-      </ToggleButton>
+
+      </Button>
     </Tooltip>
   );
 };