From 619f2c566b2c141ada7868b5801503d9bda2c5dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Tue, 3 Dec 2024 11:51:29 +0400
Subject: [PATCH] Improve VersionComparison

---
 components/versions/version-comparison.js | 145 +++++++---------------
 1 file changed, 48 insertions(+), 97 deletions(-)

diff --git a/components/versions/version-comparison.js b/components/versions/version-comparison.js
index b3f7ca9..da56187 100644
--- a/components/versions/version-comparison.js
+++ b/components/versions/version-comparison.js
@@ -11,15 +11,15 @@ export default function VersionComparison({versionData}) {
     <Box sx={{padding: 3}}>
       <Grid container spacing={2}>
         <Grid xs={6}>
-          <Paper sx={{padding: 1, backgroundColor: '#388E3C'}}>
-            <Typography variant='body1' sx={{color: '#fff'}}>
+          <Paper sx={{padding: 1, backgroundColor: '#E8F5E9'}}>
+            <Typography variant='body1' sx={{color: '#388E3C', fontWeight: 'bold'}}>
               {main.contenu}
             </Typography>
           </Paper>
         </Grid>
         <Grid xs={6}>
-          <Paper sx={{padding: 1, backgroundColor: outdated ? '#D32F2F' : '#1976D2'}}>
-            <Typography variant='body1' sx={{color: '#fff'}}>
+          <Paper sx={{padding: 1, backgroundColor: outdated ? '#F9E8E8' : '#E3F2FD'}}>
+            <Typography variant='body1' sx={{color: outdated ? '#D32F2F' : '#1976D2', fontWeight: 'bold'}}>
               {current.contenu}
             </Typography>
           </Paper>
@@ -27,103 +27,54 @@ export default function VersionComparison({versionData}) {
       </Grid>
 
       <Box sx={{marginTop: 4}}>
-        <Typography textAlign='center' variant='subtitle1' sx={{fontWeight: 'bold', marginBottom: 1}}>
+        <Typography variant='button' sx={{
+          fontWeight: 'bold', marginBottom: 1, textAlign: 'center', display: 'block'
+        }}
+        >
           LÉGENDE
         </Typography>
-        <Grid container spacing={1}>
-          <Grid container xs={12} alignItems='center' spacing={2}>
-            <Grid>
-              <Paper
-                sx={{
-                  padding: 1,
-                  backgroundColor: '#388E3C',
-                  color: '#fff',
-                  width: 100,
-                  textAlign: 'center',
-                }}
-              >
-                <Typography variant='body2'>
-                  <strong>PUBLIÉE</strong>
-                </Typography>
-              </Paper>
-            </Grid>
-            <Grid>
-              <Typography
-                variant='body2'
-                sx={{
-                  backgroundColor: '#E8F5E9',
-                  padding: 1,
-                  borderRadius: 1,
-                  color: '#388E3C',
-                  fontWeight: 'bold'
-                }}
-              >
-                Version actuellement en ligne.
-              </Typography>
-            </Grid>
+        <Grid container textAlign='center' spacing={2}>
+          <Grid size={12}>
+            <Typography
+              variant='body2'
+              sx={{
+                backgroundColor: '#E8F5E9',
+                padding: 1,
+                borderRadius: 1,
+                color: '#388E3C',
+                fontWeight: 'bold'
+              }}
+            >
+              Version actuellement en ligne.
+            </Typography>
           </Grid>
-          <Grid container xs={12} alignItems='center' spacing={2}>
-            <Grid>
-              <Paper
-                sx={{
-                  padding: 1,
-                  backgroundColor: '#1976D2',
-                  color: '#fff',
-                  width: 100,
-                  textAlign: 'center'
-                }}
-              >
-                <Typography variant='body2'>
-                  <strong>PROPOSÉE</strong>
-                </Typography>
-              </Paper>
-            </Grid>
-            <Grid>
-              <Typography
-                variant='body2'
-                sx={{
-                  backgroundColor: '#E3F2FD',
-                  padding: 1,
-                  borderRadius: 1,
-                  color: '#1976D2',
-                  fontWeight: 'bold'
-                }}
-              >
-                Version soumise mais pas encore publiée.
-              </Typography>
-            </Grid>
+          <Grid size={12}>
+            <Typography
+              variant='body2'
+              sx={{
+                backgroundColor: '#E3F2FD',
+                padding: 1,
+                borderRadius: 1,
+                color: '#1976D2',
+                fontWeight: 'bold'
+              }}
+            >
+              Version soumise mais pas encore publiée.
+            </Typography>
           </Grid>
-
-          <Grid container xs={12} alignItems='center' spacing={2}>
-            <Grid>
-              <Paper
-                sx={{
-                  padding: 1,
-                  backgroundColor: '#D32F2F',
-                  color: '#fff',
-                  width: 100,
-                  textAlign: 'center',
-                }}
-              >
-                <Typography variant='body2'>
-                  <strong>ANCIENNE</strong>
-                </Typography>
-              </Paper>
-            </Grid>
-            <Grid>
-              <Typography
-                variant='body2'
-                sx={{
-                  backgroundColor: '#F9E8E8',
-                  padding: 1,
-                  borderRadius: 1,
-                  color: '#D32F2F',
-                  fontWeight: 'bold'
-                }}
-              >
-                Remplacée par une version plus récente publiée.
-              </Typography>
-            </Grid>
+          <Grid size={12}>
+            <Typography
+              variant='body2'
+              sx={{
+                backgroundColor: '#F9E8E8',
+                padding: 1,
+                borderRadius: 1,
+                color: '#D32F2F',
+                fontWeight: 'bold'
+              }}
+            >
+              Remplacée par une version plus récente publiée.
+            </Typography>
           </Grid>
         </Grid>
       </Box>