feat: redesign artist page layout and social icons

components/awtis/social-buttons.js

@@ -1,7 +1,8 @@
 'use client'
 
-import Button from '@mui/material/Button'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import Chip from '@mui/material/Chip'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
 import {
   Mastodon, Peertube,
   Instagram, Youtube, Tiktok,
@@ -32,24 +33,41 @@ const SOCIAL_CONFIG = {
 export function SocialButton({rezo}) {
   const config = SOCIAL_CONFIG[rezo.plateforme] ?? {label: rezo.plateforme, bg: '#555', color: '#fff', Icon: null}
   const PlatformIcon = config.Icon
+
+  if (PlatformIcon) {
+    return (
+      <Tooltip title={config.label}>
+        <IconButton
+          component='a'
+          href={rezo.url}
+          target='_blank'
+          rel='noopener noreferrer'
+          size='small'
+          sx={{
+            bgcolor: config.bg,
+            width: 34,
+            height: 34,
+            '&:hover': {bgcolor: config.bg, opacity: 0.8},
+          }}
+        >
+          <PlatformIcon size={17} color={config.color} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
   return (
-    <Button
-      href={rezo.url}
-      target='_blank'
-      rel='noopener noreferrer'
-      size='small'
-      startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
-      endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
-      sx={{
-        bgcolor: config.bg,
-        color: config.color,
-        fontWeight: 700,
-        fontSize: '0.72rem',
-        textTransform: 'none',
-        '&:hover': {bgcolor: config.bg, opacity: 0.85},
-      }}
-    >
-      {config.label}
-    </Button>
+    <Tooltip title={rezo.url}>
+      <Chip
+        label={config.label}
+        component='a'
+        href={rezo.url}
+        target='_blank'
+        rel='noopener noreferrer'
+        clickable
+        size='small'
+        sx={{bgcolor: config.bg, color: config.color, fontWeight: 600}}
+      />
+    </Tooltip>
   )
 }