From 33d61de6d38a2d3bd419ced5b2640365e7d02139 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Mon, 25 Mar 2024 02:36:11 +0200
Subject: [PATCH] Refactor NotAllowed component to use Box component from
 Material-UI

---
 frontend/src/components/common/NotAllowed.js | 24 ++++++++------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/common/NotAllowed.js b/frontend/src/components/common/NotAllowed.js
index 53d23e2..d6d665a 100644
--- a/frontend/src/components/common/NotAllowed.js
+++ b/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>
   );
 };