refactor(web/context): context menu mantine rewrite

web/src/features/menu/context/components/HeaderButton.tsx

@@ -0,0 +1,44 @@
+import { Button, createStyles } from '@mantine/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+interface Props {
+  icon: IconProp;
+  canClose?: boolean;
+  iconSize: number;
+  handleClick: () => void;
+}
+
+const useStyles = createStyles((theme, params: { canClose?: boolean }) => ({
+  button: {
+    borderRadius: 4,
+    flex: '1 15%',
+    alignSelf: 'stretch',
+    height: 'auto',
+    textAlign: 'center',
+    justifyContent: 'center',
+    padding: 2,
+  },
+
+  label: {
+    color: params.canClose ? theme.colors.dark[0] : theme.colors.dark[2],
+  },
+}));
+
+const HeaderButton: React.FC<Props> = ({ icon, canClose, iconSize, handleClick }) => {
+  const { classes } = useStyles({ canClose });
+
+  return (
+    <Button
+      variant="default"
+      className={classes.button}
+      classNames={{ label: classes.label }}
+      disabled={canClose === false}
+      onClick={handleClick}
+    >
+      <FontAwesomeIcon icon={icon} fontSize={iconSize} fixedWidth />
+    </Button>
+  );
+};
+
+export default HeaderButton;