Refactor common components

frontend/src/components/common/NotAllowed.js

@@ -10,7 +10,7 @@ const NotAllowed = () => {
       sx={{
         width: "100%",
         "& > * + *": {
-          marginTop: 1 // theme.spacing(1)
+          marginTop: 1
         }
       }}
     >

frontend/src/components/common/PageTitle.js

@@ -1,14 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@mui/material/styles";
-import { Typography } from "@mui/material";
+import { Typography, Box } from "@mui/material";
 
-const useStyles = makeStyles(theme => ({
+const styles = {
   box: {
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: theme.spacing(1),
-    marginTop: theme.spacing(0)
+    marginBottom: 1,
+    marginTop: 0
   },
   title: {
     display: "flex",
@@ -16,22 +15,22 @@ const useStyles = makeStyles(theme => ({
     flexDirection: "column",
     minHeight: "40px"
   },
-  titleText: { textTransform: "uppercase" }
-}));
+  titleText: {
+    textTransform: "uppercase"
+  }
+};
 
 const PageTitle = ({ text, toolBar, navigation }) => {
-  const classes = useStyles();
-
   return (
-    <div className={classes.box}>
+    <Box sx={styles.box}>
       {navigation && navigation}
-      <div className={classes.title}>
-        <Typography className={classes.titleText} variant="h3" size="sm">
+      <Box sx={styles.title}>
+        <Typography sx={styles.titleText} variant="h3" size="sm">
           {text}
         </Typography>
-      </div>
+      </Box>
       {toolBar && toolBar}
-    </div>
+    </Box>
   );
 };