feat: moves zoom controls to lower left

src/components/ToolMenu/ToolMenu.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { Stack } from '@mui/material';
 import {
   PanToolOutlined as PanToolIcon,
-  ZoomInOutlined as ZoomInIcon,
-  ZoomOutOutlined as ZoomOutIcon,
   NearMeOutlined as NearMeIcon,
   AddOutlined as AddIcon,
   EastOutlined as ConnectorIcon,
@@ -11,14 +9,10 @@ import {
   Title as TitleIcon
 } from '@mui/icons-material';
 import { useUiStateStore } from 'src/stores/uiStateStore';
-import { MAX_ZOOM, MIN_ZOOM } from 'src/config';
 import { IconButton } from 'src/components/IconButton/IconButton';
 import { UiElement } from 'src/components/UiElement/UiElement';
 
 export const ToolMenu = () => {
-  const zoom = useUiStateStore((state) => {
-    return state.zoom;
-  });
   const mode = useUiStateStore((state) => {
     return state.mode;
   });
@@ -102,18 +96,6 @@ export const ToolMenu = () => {
           }}
           isActive={mode.type === 'TEXTBOX'}
         />
-        <IconButton
-          name="Zoom in"
-          Icon={<ZoomInIcon />}
-          onClick={uiStateStoreActions.incrementZoom}
-          disabled={zoom === MAX_ZOOM}
-        />
-        <IconButton
-          name="Zoom out"
-          Icon={<ZoomOutIcon />}
-          onClick={uiStateStoreActions.decrementZoom}
-          disabled={zoom === MIN_ZOOM}
-        />
       </Stack>
     </UiElement>
   );

src/components/ZoomControls/ZoomControls.tsx

@@ -1,6 +1,53 @@
 import React from 'react';
-import { UiElement } from '../UiElement/UiElement';
+import {
+  ZoomInOutlined as ZoomInIcon,
+  ZoomOutOutlined as ZoomOutIcon
+} from '@mui/icons-material';
+import { Stack, Box, Typography, Divider } from '@mui/material';
+import { toPx } from 'src/utils';
+import { UiElement } from 'src/components/UiElement/UiElement';
+import { IconButton } from 'src/components/IconButton/IconButton';
+import { MAX_ZOOM, MIN_ZOOM } from 'src/config';
+import { useUiStateStore } from 'src/stores/uiStateStore';
 
 export const ZoomControls = () => {
-  return <UiElement>Hello</UiElement>;
+  const uiStateStoreActions = useUiStateStore((state) => {
+    return state.actions;
+  });
+  const zoom = useUiStateStore((state) => {
+    return state.zoom;
+  });
+
+  return (
+    <UiElement>
+      <Stack direction="row">
+        <IconButton
+          name="Zoom in"
+          Icon={<ZoomInIcon />}
+          onClick={uiStateStoreActions.incrementZoom}
+          disabled={zoom === MAX_ZOOM}
+        />
+        <Divider orientation="vertical" flexItem />
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            minWidth: toPx(60)
+          }}
+        >
+          <Typography variant="body2" color="text.secondary">
+            {zoom * 100}%
+          </Typography>
+        </Box>
+        <Divider orientation="vertical" flexItem />
+        <IconButton
+          name="Zoom out"
+          Icon={<ZoomOutIcon />}
+          onClick={uiStateStoreActions.decrementZoom}
+          disabled={zoom === MIN_ZOOM}
+        />
+      </Stack>
+    </UiElement>
+  );
 };