Adapt components with new css & NextJs rules

components/teks/denye-teks.js

@@ -2,7 +2,7 @@
 
 import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 
 import {styled} from '@mui/material/styles'
@@ -17,7 +17,7 @@ const classes = {
 
 const Root = styled('div')(() => ({
   [`&.${classes.container}`]: {
-    marginTop: '4em',
+    marginTop: '6em',
     marginBottom: '2em',
   },
 

components/teks/lekte.js

@@ -70,7 +70,7 @@ export default function Lekte({audio, url, parole}) {
     const minute = Math.floor(value / 60)
     const secondLeft = value - (minute * 60)
     if (Number.isNaN(minute) || Number.isNaN(secondLeft)) {
-      return 'Information indisponible'
+      return '...'
     }
 
     return `${minute}:${secondLeft <= 9 ? `0${secondLeft}` : secondLeft}`
@@ -243,7 +243,7 @@ export default function Lekte({audio, url, parole}) {
             )}
           </IconButton>
         </Box>
-        <Stack spacing={2} direction='row' sx={{mb: 1, px: 1}} alignItems='center'>
+        <Stack spacing={2} direction='row' sx={{mb: 1, px: 1}} alignitems='center'>
           <VolumeDownRounded htmlColor={lightIconColor} />
           <Slider
             aria-label='Volume'

components/teks/pataje.js

@@ -114,8 +114,8 @@ export default function Pataje({parole, setError, setSuccess}) {
           <SpeedDialAction
             key={action.name}
             icon={action.icon}
-            tooltipPlacement='right'
-            tooltipTitle={action.name}
+            placement='right'
+            title={action.name}
             onClick={() => handleClick(action.code)}
           />
         ))}

components/teks/teks-kat.js

@@ -12,7 +12,7 @@ import CardContent from '@mui/material/CardContent'
 import CardMedia from '@mui/material/CardMedia'
 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 ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 

components/teks/teks.js

@@ -3,7 +3,7 @@
 import {useEffect} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -138,8 +138,8 @@ export default function Teks({parole}) {
 
   return (
     <Root className={classes.container}>
-      <Box sx={{textAlign: 'center', marginTop: 1}}>
-        <Typography variant='h4' component='div' display='block' marginBottom={2}>
+      <Box sx={{textAlign: 'center', marginTop: 12}}>
+        <Typography variant='h4' component='div' display='block' marginbottom={2}>
           <Typography gutterBottom color='primary' variant='h6' component='div'>
             {enhancedAliases.map(({type, value}) => {
               if (type === 'element') {
@@ -151,7 +151,7 @@ export default function Teks({parole}) {
               return <span key={value} className={classes.separation}>{value}</span>
             })}
           </Typography>
-          <Box display='flex' justifyContent='center' alignItems='center'>
+          <Box display='flex' justifycontent='center' alignitems='center'>
             <Typography variant='h5' component='div'>
               {parole.titre} <small>({parole?.annee})</small>
             </Typography>
@@ -199,13 +199,13 @@ export default function Teks({parole}) {
           <DiferansDialog difference={parole.difference} />
         )}
       </Box>
-      <Grid container justifyContent='center' spacing={1}>
+      <Grid container justifycontent='center' spacing={1}>
         <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
             </Typography>
-            <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
+            <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
           </Box>
@@ -240,7 +240,7 @@ export default function Teks({parole}) {
                   </span>
                 )} {title}
               </Typography>
-              <Typography paragraph align='justify' component='span'>
+              <Typography paragraph='true' align='justify' component='span'>
                 {formatJsonString(lang)}
               </Typography>
             </Box>

components/teks/vwe-koute-achte.js

@@ -96,7 +96,7 @@ export default function VweKouteAchte({parole, niVideyo, niOdyo}) {
           <SpeedDialAction
             key={action.name}
             icon={action.icon}
-            tooltipTitle={action.name}
+            title={action.name}
             onClick={() => handleClick(action.link)}
           />
         ))}
@@ -104,7 +104,7 @@ export default function VweKouteAchte({parole, niVideyo, niOdyo}) {
           <SpeedDialAction
             key={action.name}
             icon={action.icon}
-            tooltipTitle={action.name}
+            title={action.name}
             onClick={() => handleClick(action.link)}
           />
         ))}