[AccessDeniedMessage] Use the Alert component instead

services/frontend/src/components/Routes/AccessDeniedMessage.tsx

@@ -1,36 +1,36 @@
 import { DoNotDisturb } from '@mui/icons-material'
-import { Container, Box, Link, Paper, Typography } from '@mui/material'
+import { Alert, AlertTitle, Box, Container, Link } from '@mui/material'
 
 import { useTitle } from '@/common/hooks'
+import { PageTitle } from '../material/PageTitle'
 
 export const AccessDeniedMessage = () => {
   useTitle('Access denied')
 
   return (
-    <Container maxWidth="md" sx={{ paddingTop: 2 }}>
-      <Paper
-        sx={{
-          alignItems: 'center',
-          bgcolor: 'error.light',
-          color: 'common.white',
-          display: 'flex',
-          padding: 2,
-        }}
+    <Container maxWidth="md">
+      <PageTitle title="Access denied" />
+      <Alert
+        icon={
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <DoNotDisturb />
+          </Box>
+        }
+        severity="error"
+        variant="outlined"
       >
-        <DoNotDisturb fontSize="large" sx={{ marginRight: 2 }} />
-        <Box>
-          <Typography component="h2" variant="h6">
-            Access denied
-          </Typography>
-          <Typography variant="body1">
-            You don't currently have permission to view this page. If you believe this is a mistake, please contact{' '}
-            <Link color="inherit" href="mailto:[email protected]" underline="hover">
-              [email protected]
-            </Link>
-            .
-          </Typography>
-        </Box>
-      </Paper>
+        <AlertTitle>Access denied</AlertTitle>
+        You don't currently have permission to view this page. If you believe this is a mistake, please contact{' '}
+        <Link href="mailto:[email protected]" underline="hover">
+          [email protected]
+        </Link>
+        .
+      </Alert>
     </Container>
   )
 }