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