refactor: theme icon for icon size setting

src/app/deals/components/shared/BoardMenu/BoardMenu.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from "react";
 import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
 import { Box, Group, Menu, Text } from "@mantine/core";
+import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
 import { BoardSchema } from "@/lib/client";
-import { iconSizeSm } from "@/theme";
 
 type Props = {
     board: BoardSchema;
@@ -26,7 +26,9 @@ const BoardMenu: FC<Props> = ({
                         cursor: "pointer",
                     }}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={iconSizeSm} />
+                    <ThemeIcon size={"sm"}>
+                        <IconDotsVertical />
+                    </ThemeIcon>
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

src/app/deals/components/shared/StatusMenu/StatusMenu.tsx

@@ -9,7 +9,7 @@ import { Box, Group, Menu, Text } from "@mantine/core";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 import { BoardSchema, StatusSchema } from "@/lib/client";
-import { iconSizeSm } from "@/theme";
+import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
 
 type Props = {
     status: StatusSchema;
@@ -37,7 +37,9 @@ const StatusMenu: FC<Props> = ({
                 <Box
                     style={{ cursor: "pointer" }}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={iconSizeSm} />
+                    <ThemeIcon size={"sm"}>
+                        <IconDotsVertical />
+                    </ThemeIcon>
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

src/components/ui/ThemeIcon/ThemeIcon.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+import { Center, ThemeIconProps } from "@mantine/core";
+
+type Props = ThemeIconProps;
+
+const ThemeIcon: FC<Props> = props => {
+    return (
+        <Center>
+            <ThemeIcon
+                bg={"transparent"}
+                {...props}>
+                {props.children}
+            </ThemeIcon>
+        </Center>
+    );
+};
+
+export default ThemeIcon;

src/theme.ts

@@ -14,8 +14,6 @@ export const myColor: MantineColorsTuple = [
     "#00718c",
 ];
 
-export const iconSizeSm = 21;
-
 const radius = "md";
 
 const font = Roboto({