Refactor NotAllowed component to use Box component from Material-UI
parent
8174e63a6e
commit
33d61de6d3
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue