Adapt components with new css & NextJs rules

components/akey/index.js

@@ -2,14 +2,14 @@ import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Button from '@mui/material/Button'
 import Image from 'next/image'
 import Link from 'next/link'
 
 export default function Akey({logo}) {
   return (
-    <Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 3}}>
+    <Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 7}}>
       <Container align='center'>
         <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
 
@@ -22,6 +22,7 @@ export default function Akey({logo}) {
             height={32}
             alt='OKI logo'
             src={logo}
+            loading='eager'
           />
         </Box>
         <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
@@ -32,8 +33,8 @@ export default function Akey({logo}) {
         </Typography>
       </Container>
       <Container sx={{marginTop: 2}}>
-        <Grid container justifyContent='center' spacing={2}>
-          <Grid>
+        <Grid container sx={{justifyContent: 'center'}} spacing={2}>
+          <Grid textalign='center'>
             <Link passHref href='/pwopose'>
               <Button color='primary' variant='outlined'>
                 <strong>Proposer des paroles</strong>