Adapt components with new css & NextJs rules

components/sesyon/koneksyon.js

@@ -15,7 +15,7 @@ import Snackbar from '@mui/material/Snackbar'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 import Typography from '@mui/material/Typography'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import Visibility from '@mui/icons-material/Visibility'
 import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import MuiAlert from '@mui/material/Alert'
@@ -241,7 +241,7 @@ function Koneksyon({chimen}) {
   }
 
   return (
-    <Container sx={{marginTop: 2}} maxWidth='sm'>
+    <Container sx={{marginTop: 6}} maxWidth='sm'>
 
       <Box sx={{width: '100%'}}>
         <Tabs centered value={value} aria-label='basic tabs example' onChange={handleChange}>
@@ -251,10 +251,10 @@ function Koneksyon({chimen}) {
         <TabPanel value={value} index={0}>
 
           <Box sx={{textAlign: 'center', marginBottom: 3}}>
-            <Typography gutterBottom textAlign='center'>Connectez-vous avec</Typography>
-            <Grid container alignItems='center' justifyContent='center' columnSpacing={{xs: 1, sm: 2, md: 3}}>
+            <Typography gutterBottom textalign='center'>Connectez-vous avec</Typography>
+            <Grid sx={{justifyContent: 'center'}} container columnSpacing={{xs: 1, sm: 2, md: 3}}>
               {PROVIDERS.map(({id, title, width, height}) => (
-                <Grid key={id} marginTop={1}>
+                <Grid sx={{marginTop: 1}} key={id}>
                   <LoginProvider id={id} title={title} width={width} height={height} callbackUrl={`${siteUrl}${chimen}`} />
                 </Grid>
               ))}