From 4de3bb1f97e4b9cb72da1869f906e97343fc432b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <cedric@livingdata.co>
Date: Mon, 31 Oct 2022 23:01:33 +0400
Subject: [PATCH] Add Button to LoginProvider

---
 components/sesyon/koneksyon.js      | 14 +++++++-------
 components/sesyon/login-provider.js | 20 ++++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/components/sesyon/koneksyon.js b/components/sesyon/koneksyon.js
index 5b06291..9d315b7 100644
--- a/components/sesyon/koneksyon.js
+++ b/components/sesyon/koneksyon.js
@@ -35,20 +35,20 @@ const PROVIDERS = [
   {
     id: 'google',
     title: 'Google',
-    width: 46,
-    height: 46
+    width: 16,
+    height: 16
   },
   {
     id: 'twitter',
     title: 'Twitter',
-    width: 56,
-    height: 46
+    width: 16,
+    height: 13
   },
   {
     id: 'github',
     title: 'GitHub',
-    width: 52,
-    height: 51
+    width: 16,
+    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}`} />
diff --git a/components/sesyon/login-provider.js b/components/sesyon/login-provider.js
index 2c5e381..979e391 100644
--- a/components/sesyon/login-provider.js
+++ b/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
-        style={{cursor: 'pointer'}}
-        width={width}
-        height={height}
-        alt={title}
-        src={`/images/${id === 'github' ? `${id}-${theme.palette.mode}` : id}.svg`}
-        onClick={hanleClick}
-      />
+      <Button variant='outlined' color='inherit' startIcon={
+        <Image
+          width={width}
+          height={height}
+          alt={title}
+          src={`/images/${id === 'github' ? `${id}-${theme.palette.mode}` : id}.svg`}
+        />
+      } onClick={hanleClick}
+      >
+        {title}
+      </Button>
     </Link>
   )
 }