Add Button to LoginProvider

components/sesyon/koneksyon.js

@@ -35,20 +35,20 @@ const PROVIDERS = [
   {
     id: 'google',
     title: 'Google',
-    width: 46,
+    width: 16,
-    height: 46
+    height: 16
   },
   {
     id: 'twitter',
     title: 'Twitter',
-    width: 56,
+    width: 16,
-    height: 46
+    height: 13
   },
   {
     id: 'github',
     title: 'GitHub',
-    width: 52,
+    width: 16,
-    height: 51
+    height: 15
   }
 ]
 
@@ -258,7 +258,7 @@ function Koneksyon({chimen}) {
 
           <Box sx={{textAlign: 'center', marginBottom: 3}}>
             <Typography gutterBottom textAlign='center'>Connectez-vous avec</Typography>
-            <Grid container alignItems='center' justifyContent='center' spacing={5}>
+            <Grid container alignItems='center' justifyContent='center' columnSpacing={{xs: 1, sm: 2, md: 3}}>
               {PROVIDERS.map(({id, title, width, height}) => (
                 <Grid key={id} item marginTop={1}>
                   <LoginProvider id={id} title={title} width={width} height={height} callbackUrl={`${siteUrl}${chimen}`} />

components/sesyon/login-provider.js

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import {signIn} from 'next-auth/react'
 import {useTheme} from '@mui/material/styles'
+import Button from '@mui/material/Button'
 
 export default function LoginProvider({id, title, width, height, callbackUrl}) {
   const theme = useTheme()
@@ -16,14 +17,17 @@ export default function LoginProvider({id, title, width, height, callbackUrl}) {
 
   return (
     <Link passHref href='/api/auth/signin'>
-      <Image
+      <Button variant='outlined' color='inherit' startIcon={
-        style={{cursor: 'pointer'}}
+        <Image
-        width={width}
+          width={width}
-        height={height}
+          height={height}
-        alt={title}
+          alt={title}
-        src={`/images/${id === 'github' ? `${id}-${theme.palette.mode}` : id}.svg`}
+          src={`/images/${id === 'github' ? `${id}-${theme.palette.mode}` : id}.svg`}
-        onClick={hanleClick}
+        />
-      />
+      } onClick={hanleClick}
+      >
+        {title}
+      </Button>
     </Link>
   )
 }