Refactor NotAllowed component to use Box component from Material-UI

master
Tudor Stanciu 2024-03-25 02:36:11 +02:00
parent 8174e63a6e
commit 33d61de6d3
1 changed files with 10 additions and 14 deletions

View File

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