1 files changed, 18 insertions, 12 deletions

diff --git a/subprojects/frontend/src/graph/ZoomButtons.tsx b/subprojects/frontend/src/graph/ZoomButtons.tsx
index 72f54774..83938cf4 100644
--- a/subprojects/frontend/src/graph/ZoomButtons.tsx
+++ b/subprojects/frontend/src/graph/ZoomButtons.tsx
@@ -9,13 +9,18 @@ import CropFreeIcon from '@mui/icons-material/CropFree';
 import RemoveIcon from '@mui/icons-material/Remove';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
+import ToggleButton from '@mui/material/ToggleButton';
+
+import type { ChangeZoomCallback, SetFitZoomCallback } from './ZoomCanvas';
 
 export default function ZoomButtons({
   changeZoom,
   fitZoom,
+  setFitZoom,
 }: {
-  changeZoom: (event: React.MouseEvent, factor: number) => void;
-  fitZoom: (event: React.MouseEvent) => void;
+  changeZoom: ChangeZoomCallback;
+  fitZoom: boolean;
+  setFitZoom: SetFitZoomCallback;
 }): JSX.Element {
   return (
     <Stack
@@ -23,21 +28,22 @@ export default function ZoomButtons({
       p={1}
       sx={{ position: 'absolute', bottom: 0, right: 0 }}
     >
-      <IconButton
-        aria-label="Zoom in"
-        onClick={(event) => changeZoom(event, 2)}
-      >
+      <IconButton aria-label="Zoom in" onClick={() => changeZoom(2)}>
         <AddIcon fontSize="small" />
       </IconButton>
-      <IconButton
-        aria-label="Zoom out"
-        onClick={(event) => changeZoom(event, 0.5)}
-      >
+      <IconButton aria-label="Zoom out" onClick={() => changeZoom(0.5)}>
         <RemoveIcon fontSize="small" />
       </IconButton>
-      <IconButton aria-label="Fit screen" onClick={fitZoom}>
+      <ToggleButton
+        value="show-replace"
+        selected={fitZoom}
+        onClick={() => setFitZoom(!fitZoom)}
+        aria-label="Fit screen"
+        size="small"
+        className="iconOnly"
+      >
         <CropFreeIcon fontSize="small" />
-      </IconButton>
+      </ToggleButton>
     </Stack>
   );
 }