styling: less spaghetti

src/components/layout/auth/Blocked.jsx

@@ -1,92 +1,73 @@
+// @ts-check
 /* eslint-disable react/no-array-index-key */
 import React from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import Grid from '@mui/material/Grid'
+import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import { useStatic } from '@hooks/useStore'
-import { useHideElement } from '@hooks/useHideElement'
 
 import DiscordLogin from './Discord'
 
 export default function Blocked() {
   const { t } = useTranslation()
   const { info } = useParams()
+  const navigate = useNavigate()
   const discordInvite = useStatic((s) => s.config?.links?.discordInvite)
-  useHideElement()
 
   const queryParams = new URLSearchParams(info)
+  const blockedGuilds = queryParams.get('blockedGuilds')
 
   return (
     <Grid
       container
-      direction="column"
       justifyContent="center"
       alignItems="center"
-      style={{ minHeight: '95vh' }}
+      height="100cqh"
+      py={10}
     >
-      <Grid item>
+      <Grid xs={11}>
         <Typography variant="h3" align="center">
           {t('access')} {t('denied')}!
         </Typography>
       </Grid>
-      <br />
-      <br />
 
-      {queryParams.get('blockedGuilds') && (
-        <Grid item>
+      {blockedGuilds && (
+        <Grid xs={11}>
           <Typography variant="h6" align="center">
-            {t('on_block_msg')} {queryParams.get('blockedGuilds')}.
+            {t('on_block_msg')} {blockedGuilds}
           </Typography>
         </Grid>
       )}
 
       {discordInvite && (
-        <Grid item>
-          <br />
+        <Grid xs={11}>
           <Typography variant="h6" align="center">
             {t('on_block_join_discord')}
           </Typography>
         </Grid>
       )}
-
       <Grid
-        container
-        item
-        justifyContent="center"
-        alignItems="center"
-        style={{ marginTop: 20, paddingTop: 20, marginBottom: 20 }}
+        xs={discordInvite ? 6 : 11}
+        sm={discordInvite ? 4 : 11}
+        md={discordInvite ? 3 : 11}
+        textAlign="center"
       >
-        <Grid
-          item
-          xs={discordInvite ? 3 : 10}
-          sm={discordInvite ? 3 : 10}
-          style={{
-            textAlign: 'center',
-            marginTop: discordInvite ? 20 : 0,
-          }}
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => navigate('/')}
+          size="large"
         >
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => (window.location = window.location.origin)}
-            size="large"
-          >
-            {t('go_back')}
-          </Button>
-        </Grid>
-        {discordInvite && (
-          <Grid
-            item
-            xs={3}
-            sm={3}
-            style={{ textAlign: 'center', marginTop: 20 }}
-          >
-            <DiscordLogin href={discordInvite}>join</DiscordLogin>
-          </Grid>
-        )}
+          {t('go_back')}
+        </Button>
       </Grid>
+      {discordInvite && (
+        <Grid xs={6} sm={4} md={3} textAlign="center">
+          <DiscordLogin href={discordInvite}>join</DiscordLogin>
+        </Grid>
+      )}
     </Grid>
   )
 }