refactor: removes size prop from menu props

src/components/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Button, Box } from '@mui/material';
+import { Button, Box, useTheme } from '@mui/material';
 import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
 
 interface Props {
@@ -7,7 +7,6 @@ interface Props {
   Icon: React.ReactNode;
   isActive?: boolean;
   onClick: () => void;
-  size: number;
   tooltipPosition?: TooltipProps['placement'];
   disabled?: boolean;
 }
@@ -17,10 +16,10 @@ export const IconButton = ({
   Icon,
   onClick,
   isActive = false,
-  size,
   disabled = false,
   tooltipPosition = 'bottom'
 }: Props) => {
+  const theme = useTheme();
   const iconColor = useMemo(() => {
     if (isActive) {
       return 'grey.200';
@@ -47,8 +46,8 @@ export const IconButton = ({
         onClick={onClick}
         sx={{
           borderRadius: 0,
-          height: size,
-          width: size,
+          height: theme.customVars.toolMenu.height,
+          width: theme.customVars.toolMenu.height,
           maxWidth: '100%',
           minWidth: 'auto',
           bgcolor: isActive ? 'grey.800' : undefined,

src/components/Menu/Menu.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Card, useTheme, SxProps } from '@mui/material';
+
+interface Props {
+  children: React.ReactNode;
+  sx?: SxProps;
+}
+
+export const Menu = ({ children, sx }: Props) => {
+  const theme = useTheme();
+
+  return (
+    <Card
+      sx={{
+        position: 'absolute',
+        top: theme.customVars.appPadding.y,
+        right: theme.customVars.appPadding.x,
+        height: theme.customVars.toolMenu.height,
+        borderRadius: 2,
+        ...sx
+      }}
+    >
+      {children}
+    </Card>
+  );
+};

src/components/ToolMenu/ToolMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import {
   PanToolOutlined as PanToolIcon,
   ZoomInOutlined as ZoomInIcon,
@@ -11,7 +11,8 @@ import {
 } from '@mui/icons-material';
 import { useUiStateStore } from 'src/stores/uiStateStore';
 import { MAX_ZOOM, MIN_ZOOM } from 'src/config';
-import { IconButton } from '../IconButton/IconButton';
+import { IconButton } from 'src/components/IconButton/IconButton';
+import { Menu } from 'src/components/Menu/Menu';
 
 export const ToolMenu = () => {
   const theme = useTheme();
@@ -26,13 +27,9 @@ export const ToolMenu = () => {
   });
 
   return (
-    <Card
+    <Menu
       sx={{
-        position: 'absolute',
-        top: theme.customVars.appPadding.y,
-        right: theme.customVars.appPadding.x,
-        height: theme.customVars.toolMenu.height,
-        borderRadius: 2
+        right: theme.customVars.appPadding.x
       }}
     >
       <IconButton
@@ -48,7 +45,6 @@ export const ToolMenu = () => {
             icon: null
           });
         }}
-        size={theme.customVars.toolMenu.height}
       />
       <IconButton
         name="Area"
@@ -61,7 +57,6 @@ export const ToolMenu = () => {
           });
         }}
         isActive={mode.type === 'RECTANGLE.DRAW'}
-        size={theme.customVars.toolMenu.height}
       />
       <IconButton
         name="Connector"
@@ -74,7 +69,6 @@ export const ToolMenu = () => {
           });
         }}
         isActive={mode.type === 'CONNECTOR'}
-        size={theme.customVars.toolMenu.height}
       />
       <IconButton
         name="Select"
@@ -86,7 +80,6 @@ export const ToolMenu = () => {
             mousedownItem: null
           });
         }}
-        size={theme.customVars.toolMenu.height}
         isActive={mode.type === 'CURSOR'}
       />
       <IconButton
@@ -98,23 +91,20 @@ export const ToolMenu = () => {
             showCursor: false
           });
         }}
-        size={theme.customVars.toolMenu.height}
         isActive={mode.type === 'PAN'}
       />
       <IconButton
         name="Zoom in"
         Icon={<ZoomInIcon />}
         onClick={uiStateStoreActions.incrementZoom}
-        size={theme.customVars.toolMenu.height}
         disabled={zoom === MAX_ZOOM}
       />
       <IconButton
         name="Zoom out"
         Icon={<ZoomOutIcon />}
         onClick={uiStateStoreActions.decrementZoom}
-        size={theme.customVars.toolMenu.height}
         disabled={zoom === MIN_ZOOM}
       />
-    </Card>
+    </Menu>
   );
 };