Change LoginProvider component & props

components/sesyon/koneksyon.js

@@ -15,12 +15,12 @@ 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/Grid'
 import Visibility from '@mui/icons-material/Visibility'
 import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import MuiAlert from '@mui/material/Alert'
 import LoginIcon from '@mui/icons-material/Login'
 import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRounded'
-import TwitterIcon from '@mui/icons-material/Twitter'
 import axios from 'axios'
 
 import {validateEmail} from '../../lib/utils/emails'
@@ -28,14 +28,21 @@ import ResetPassword from '../password/reset-password'
 import ResetDialog from '../password/reset-dialog'
 import LoginProvider from './login-provider'
 
-const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
 const PROVIDERS = [
+  {
+    id: 'google',
+    title: 'Google',
+    width: 46,
+    height: 46
+  },
   {
     id: 'twitter',
     title: 'Twitter',
-    icon: <TwitterIcon />
+    width: 56,
+    height: 46
   }
 ]
 
@@ -244,12 +251,14 @@ function Koneksyon({chimen}) {
         <TabPanel value={value} index={0}>
 
           <Box sx={{textAlign: 'center', marginBottom: 3}}>
-            <Typography>Se connecter avec</Typography>
-            {PROVIDERS.map(({id, title, icon}) => (
-              <Box key={id} marginTop={1}>
-                <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
-              </Box>
-            ))}
+            <Typography gutterBottom textAlign='center'>Connectez-vous avec</Typography>
+            <Grid container alignItems='center' justifyContent='center' spacing={5}>
+              {PROVIDERS.map(({id, title, width, height}) => (
+                <Grid key={id} item marginTop={1}>
+                  <LoginProvider id={id} title={title} width={width} height={height} callbackUrl={`${siteUrl}${chimen}`} />
+                </Grid>
+              ))}
+            </Grid>
           </Box>
 
           <Box sx={{textAlign: 'center', marginBottom: 3}}>