From c2c69193563158223b3108f3bad0b6ac129a7dee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 21 Oct 2024 10:06:16 +0400
Subject: [PATCH] Fix Grid sizes

---
 components/akey/kat-akey.js           | 2 +-
 components/awtis/awtis-detay.js       | 4 ++--
 components/awtis/awtis-kat.js         | 2 +-
 components/rezo/kat-rezo-nou.js       | 2 +-
 components/soutyen/payment-method.js  | 4 ++--
 components/stats/kat-stats.js         | 2 +-
 components/stats/traductions-stats.js | 2 +-
 components/teks/teks-kat.js           | 2 +-
 components/teks/teks.js               | 4 ++--
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/akey/kat-akey.js b/components/akey/kat-akey.js
index 3f3202d..b013b28 100644
--- a/components/akey/kat-akey.js
+++ b/components/akey/kat-akey.js
@@ -14,7 +14,7 @@ export default function KatAkey({tit, kantite, href, as}) {
   const rute = useRouter()
 
   return (
-    <Grid xs={12} md={6}>
+    <Grid size={{xs: 12, md: 6}}>
       <Card sx={{borderColor: theme.palette.primary[theme.palette.mode]}} color='primary' variant='outlined'>
         <CardActionArea onClick={() => rute.push(href, as)}>
           <CardContent>
diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index 15d9a84..8a0b4fb 100644
--- a/components/awtis/awtis-detay.js
+++ b/components/awtis/awtis-detay.js
@@ -58,7 +58,7 @@ export default function AwtisDetay({anAwtis}) {
       </Box>
       <Grid container direction='column' justifyContent='center' alignItems='center' spacing={3}>
         {biyo && (
-          <Grid xs={12} md={6}>
+          <Grid size={{xs: 12, md: 6}}>
             <Card sx={{minWidth: 300}}>
               <CardActionArea onClick={handleClick}>
                 <CardContent>
@@ -73,7 +73,7 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
-        <Grid xs={12} md={6}>
+        <Grid size={{xs: 12, md: 6}}>
           <Box marginBottom={3}>
             {paroles.data.length > 1 ? (
               <Accordion>
diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js
index a88f5bc..37b5e00 100644
--- a/components/awtis/awtis-kat.js
+++ b/components/awtis/awtis-kat.js
@@ -58,7 +58,7 @@ export default function AwtisKat({artiste}) {
   const {alias, biographie, paroles, photo, slug} = artiste
 
   return (
-    <Grid xs={12} sm={6} md={4}>
+    <Grid size={{xs: 12, sm: 6, md: 4}}>
       <Kat>
         <Card sx={{maxWidth: 340}}>
           <CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>
diff --git a/components/rezo/kat-rezo-nou.js b/components/rezo/kat-rezo-nou.js
index 3cbd10e..fc96f09 100644
--- a/components/rezo/kat-rezo-nou.js
+++ b/components/rezo/kat-rezo-nou.js
@@ -20,7 +20,7 @@ export default function KatRezoNou({tit, img, soutit, ko, lyen}) {
 
   return (
     <>
-      <Grid xs={12} md={6} sx={{marginBottom: 2}}>
+      <Grid size={{xs: 12, md: 6}} sx={{marginBottom: 2}}>
         <Card raised>
           <CardActionArea onClick={handleClickOpen}>
             <CardMedia
diff --git a/components/soutyen/payment-method.js b/components/soutyen/payment-method.js
index 3631417..6b6c037 100644
--- a/components/soutyen/payment-method.js
+++ b/components/soutyen/payment-method.js
@@ -60,12 +60,12 @@ export default function PaymentMethod({paymentMethod, setPaymentMethod}) {
       </Box>
       <TabPanel value={paymentMethod} index={0}>
         <Grid container rowSpacing={1}>
-          <Grid md={6} xs={12}>
+          <Grid size={{xs: 12, md: 6}}>
             <Button variant='outlined' size='large' endIcon={<Liberapay />} onClick={() => window.open(`https://liberapay.com/${LIBERAPAY_DONATE}/donate`, '_blank')}>
               Faire un don via Liberapay
             </Button>
           </Grid>
-          <Grid md={6} xs={12}>
+          <Grid size={{xs: 12, md: 6}}>
             <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
               Faire un don via PayPal
             </Button>
diff --git a/components/stats/kat-stats.js b/components/stats/kat-stats.js
index 72a2b2c..63bbd3a 100644
--- a/components/stats/kat-stats.js
+++ b/components/stats/kat-stats.js
@@ -8,7 +8,7 @@ import TraductionsStats from './traductions-stats'
 
 export default function KatStats({emoji, value, total}) {
   return (
-    <Grid xs={12} md={2}>
+    <Grid size={{xs: 12, md: 2}}>
       <Card variant='outlined'>
         <CardContent>
           <Typography align='center' variant='h6'>
diff --git a/components/stats/traductions-stats.js b/components/stats/traductions-stats.js
index 22b4f77..81e6032 100644
--- a/components/stats/traductions-stats.js
+++ b/components/stats/traductions-stats.js
@@ -12,7 +12,7 @@ export default function TraductionsStats({value, total}) {
   return (
     <Box sx={{width: '100%'}}>
       <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
-        <Grid xs={12} md={6}>
+        <Grid size={{xs: 12, md: 6}}>
           <Typography style={{fontWeight: 'bold'}} align='center' variant='h6'>
             {translated}
           </Typography>
diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js
index 9d5a54c..10dc2e7 100644
--- a/components/teks/teks-kat.js
+++ b/components/teks/teks-kat.js
@@ -51,7 +51,7 @@ export default function TeksKat({parole}) {
   }
 
   return (
-    <StyledGrid xs={12} sm={6} md={4}>
+    <StyledGrid size={{xs: 12, sm: 6, md: 4}}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia
diff --git a/components/teks/teks.js b/components/teks/teks.js
index 5b4aee6..188a9f2 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -200,7 +200,7 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Grid container justifyContent='center' spacing={1}>
-        <Grid xs={12} md={langArray.length > 0 ? 6 : null}>
+        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
@@ -211,7 +211,7 @@ export default function Teks({parole}) {
           </Box>
         </Grid>
         {langArray.map(({title, flag, lang}) => (
-          <Grid key={title} xs={12} md={6}>
+          <Grid key={title} size={{xs: 12, md: 6}}>
             <Box className={classes.gridText}>
               <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
                 {flag === 'fr' && (