Refactor NotAllowed component to use Box component from Material-UI

frontend/src/components/common/NotAllowed.js

@@ -1,28 +1,24 @@
 import React from "react";
-import { makeStyles } from "@mui/material/styles";
-import { Alert, AlertTitle } from "@mui/material";
+import { Alert, AlertTitle, Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-const useStyles = makeStyles(theme => ({
-  alert: {
-    width: "100%",
-    "& > * + *": {
-      marginTop: theme.spacing(1)
-    }
-  }
-}));
-
 const NotAllowed = () => {
-  const classes = useStyles();
   const { t } = useTranslation();
 
   return (
-    <div className={classes.alert}>
+    <Box
+      sx={{
+        width: "100%",
+        "& > * + *": {
+          marginTop: 1 // theme.spacing(1)
+        }
+      }}
+    >
       <Alert variant="outlined" severity="error">
         <AlertTitle>{t("Announcements.NotAllowed.Title")}</AlertTitle>
         {t("Announcements.NotAllowed.Message")}
       </Alert>
-    </div>
+    </Box>
   );
 };