Reduce KatStats

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>

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} />

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} />

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} />
             ))}