style: flèches de scroll des tabs plus visibles

components/teks/teks.js

@@ -13,6 +13,8 @@ import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
 import Image from 'next/image'
 
@@ -225,7 +227,26 @@ export default function Teks({parole}) {
           scrollButtons
           allowScrollButtonsMobile
           centered={langArray.length === 0}
-          sx={{borderBottom: 1, borderColor: 'divider', mb: 2}}
+          slots={{
+            StartScrollButtonIcon: ArrowBackIosNewIcon,
+            EndScrollButtonIcon: ArrowForwardIosIcon
+          }}
+          sx={{
+            borderBottom: 1,
+            borderColor: 'divider',
+            mb: 2,
+            '& .MuiTabs-scrollButtons': {
+              width: 36,
+              height: 36,
+              borderRadius: '50%',
+              color: 'primary.main',
+              backgroundColor: 'action.hover',
+              mx: 0.5,
+              '&.Mui-disabled': {
+                opacity: 0
+              }
+            }
+          }}
         >
           <Tab label='Transcription' />
           {langArray.map(({title}) => (