From c6131ffc43084587aecef8199718eac8b479a476 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sat, 4 Jun 2022 01:38:19 +0400
Subject: [PATCH] Reduce KatStats

---
 components/stats/bar-stats.js         |  4 ++--
 components/stats/kat-stats.js         |  4 ++--
 components/stats/traductions-stats.js | 13 +------------
 pages/index.js                        |  5 ++++-
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/components/stats/bar-stats.js b/components/stats/bar-stats.js
index 91295c6..5e41a2b 100644
--- a/components/stats/bar-stats.js
+++ b/components/stats/bar-stats.js
@@ -19,11 +19,11 @@ const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
 export default function BarStats({percent}) {
   return (
     <Box sx={{display: 'flex', alignItems: 'center'}}>
-      <Box sx={{width: '100%', mr: 1}}>
+      <Box sx={{width: '100%'}}>
         <BorderLinearProgress variant='determinate' value={percent} />
       </Box>
       <Box sx={{minWidth: 35}}>
-        <Typography sx={{fontWeight: 'bold'}} variant='body2' color='text.secondary'>{`${Math.round(
+        <Typography textAlign='right' sx={{fontWeight: 'bold'}} variant='body2' color='text.secondary'>{`${Math.round(
           percent,
         )}%`}</Typography>
       </Box>
diff --git a/components/stats/kat-stats.js b/components/stats/kat-stats.js
index f8d4d2d..410421d 100644
--- a/components/stats/kat-stats.js
+++ b/components/stats/kat-stats.js
@@ -8,10 +8,10 @@ import TraductionsStats from './traductions-stats'
 
 export default function KatStats({emoji, value, total}) {
   return (
-    <Grid item xs={12} md={6}>
+    <Grid item xs={12} md={2}>
       <Card variant='outlined'>
         <CardContent>
-          <Typography gutterBottom align='center' variant='h6'>
+          <Typography align='center' variant='h6'>
             <span dangerouslySetInnerHTML={{__html: emoji}} />
           </Typography>
           <TraductionsStats value={value} total={total} />
diff --git a/components/stats/traductions-stats.js b/components/stats/traductions-stats.js
index 9497ab2..b200c25 100644
--- a/components/stats/traductions-stats.js
+++ b/components/stats/traductions-stats.js
@@ -13,20 +13,9 @@ export default function TraductionsStats({value, total}) {
     <Box sx={{width: '100%'}}>
       <Grid container rowSpacing={3} columnSpacing={6} justifyContent='space-around'>
         <Grid item xs={12} md={6}>
-          <Typography style={{fontWeight: 'bold'}} align='center' variant='h5'>
+          <Typography style={{fontWeight: 'bold'}} align='center' variant='h6'>
             {translated}
           </Typography>
-          <Typography variant='h6' align='center' >
-            Paroles traduites
-          </Typography>
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <Typography style={{fontWeight: 'bold'}} align='center' variant='h5'>
-            {value}
-          </Typography>
-          <Typography variant='h6' align='center' >
-            Paroles non traduites
-          </Typography>
         </Grid>
       </Grid>
       <BarStats value={value} percent={percent} />
diff --git a/pages/index.js b/pages/index.js
index 59873ee..5a47f24 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -80,7 +80,10 @@ export default function Home({errorCode, errorMessage, stats}) {
             <KatKayLa tit='Paroles' kantite={stats.countParole} href='/paroles' as='/paroles' />
             <KatKayLa tit='Artistes' kantite={stats.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
           </Grid>
-          <Grid container spacing={2} marginBottom={3}>
+          <Typography marginBottom={2} textAlign='center' sx={{fontWeight: 'bold'}} variant='h6' component='h4'>
+            Traductions
+          </Typography>
+          <Grid container justifyContent='space-between' spacing={2} marginBottom={3}>
             {statsByLang.map(({code, value, emoji}) => (
               <KatStats key={code} emoji={emoji} value={value} total={stats.countParole} />
             ))}