Improve Sign component

components/session/sign.js

@@ -6,34 +6,46 @@ import {useRouter} from 'next/navigation'
 import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
 import Fab from '@mui/material/Fab'
-import Tooltip from '@mui/material/Tooltip'
+import {styled} from '@mui/material/styles'
+import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import LogoutIcon from '@mui/icons-material/Logout'
 import LoginIcon from '@mui/icons-material/Login'
 import PersonAddIcon from '@mui/icons-material/PersonAdd'
 
+const LightTooltip = styled(({className, ...props}) => (
+  <Tooltip {...props} classes={{popper: className}} />
+))(({theme}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 15,
+  },
+}))
+
 export default function Sign({session}) {
   const router = useRouter()
 
   return (
-    <Box sx={{display: 'flex', justifyContent: 'center', marginTop: 1}}>
+    <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 1}}>
       {session ? (
-        <Tooltip title='Se déconnecter' placement='left'>
-          <Fab size='small' color='error' onClick={() => signOut()}>
-            <LogoutIcon fontSize='small' />
+        <LightTooltip title='Se déconnecter' placement='right'>
+          <Fab size='large' color='error' onClick={() => signOut()}>
+            <LogoutIcon fontSize='large' />
           </Fab>
-        </Tooltip>
+        </LightTooltip>
       ) : (
         <Stack direction='row' spacing={2}>
-          <Tooltip title='Se connecter' placement='left'>
-            <Fab size='small' color='success' onClick={() => router.push('/login')}>
-              <LoginIcon fontSize='small' />
+          <LightTooltip title='Se connecter' placement='left'>
+            <Fab size='large' color='success' onClick={() => router.push('/login')}>
+              <LoginIcon fontSize='large' />
             </Fab>
-          </Tooltip>
-          <Tooltip title='S’enregistrer' placement='right'>
-            <Fab size='small' color='success' onClick={() => router.push('/register')}>
-              <PersonAddIcon fontSize='small' />
+          </LightTooltip>
+          <LightTooltip title='S’enregistrer' placement='right'>
+            <Fab size='large' color='success' onClick={() => router.push('/register')}>
+              <PersonAddIcon fontSize='large' />
             </Fab>
-          </Tooltip>
+          </LightTooltip>
         </Stack>
       )}
     </Box>