feat: améliore design cartes et légende comparaison versions

This commit is contained in:
2025-07-23 13:40:34 +04:00
parent acabbae951
commit 709128f881
+34 -14
View File
@@ -72,15 +72,25 @@ export default function VersionComparison({versionData, versionCompare}) {
return ( return (
<Box sx={{padding: 3}}> <Box sx={{padding: 3}}>
<Grid container spacing={2}> <Grid container spacing={2} sx={{width: '100%'}}>
<Grid xs={6}> <Grid xs={6} sx={{width: '100%'}}>
<Paper sx={{padding: 1, backgroundColor: '#E8F5E9'}}> <Paper sx={{
<Box sx={{color: '#388E3C', fontWeight: 'bold'}}> padding: 2,
backgroundColor: '#E8F5E9',
width: '100%',
minHeight: '200px'
}}
>
<Box sx={{
color: '#2E7D32',
fontWeight: 'bold'
}}
>
<MarkdownRenderer <MarkdownRenderer
content={main.contenu} content={main.contenu}
color='#388E3C' color='#2E7D32'
fallbackComponent={({children, ...props}) => ( fallbackComponent={({children, ...props}) => (
<Typography variant='body1' sx={{color: '#388E3C', fontWeight: 'bold'}} {...props}> <Typography variant='body1' sx={{color: '#2E7D32', fontWeight: 'bold'}} {...props}>
{children} {children}
</Typography> </Typography>
)} )}
@@ -88,9 +98,19 @@ export default function VersionComparison({versionData, versionCompare}) {
</Box> </Box>
</Paper> </Paper>
</Grid> </Grid>
<Grid xs={6}> <Grid xs={6} sx={{width: '100%'}}>
<Paper sx={{padding: 1, backgroundColor: outdated ? '#F9E8E8' : '#E3F2FD'}}> <Paper sx={{
<Box sx={{color: outdated ? '#D32F2F' : '#1976D2', fontWeight: 'bold'}}> padding: 2,
backgroundColor: outdated ? '#F9E8E8' : '#E3F2FD',
width: '100%',
minHeight: '200px'
}}
>
<Box sx={{
color: outdated ? '#D32F2F' : '#1976D2',
fontWeight: 'bold'
}}
>
<MarkdownRenderer <MarkdownRenderer
content={current.contenu} content={current.contenu}
color={outdated ? '#D32F2F' : '#1976D2'} color={outdated ? '#D32F2F' : '#1976D2'}
@@ -149,22 +169,22 @@ export default function VersionComparison({versionData, versionCompare}) {
> >
LÉGENDE LÉGENDE
</Typography> </Typography>
<Grid container textAlign='center' spacing={2}> <Grid container textAlign='center' spacing={1}>
<Grid size={{xs: 12, sm: 4}}> <Grid size={{xs: 6, sm: 6}}>
<Typography <Typography
variant='body2' variant='body2'
sx={{ sx={{
backgroundColor: '#E8F5E9', backgroundColor: '#E8F5E9',
padding: 1, padding: 1,
borderRadius: 1, borderRadius: 1,
color: '#388E3C', color: '#2E7D32',
fontWeight: 'bold' fontWeight: 'bold'
}} }}
> >
En ligne Version de référence
</Typography> </Typography>
</Grid> </Grid>
<Grid size={{xs: 12, sm: 4}}> <Grid size={{xs: 6, sm: 6}}>
<Typography <Typography
variant='body2' variant='body2'
sx={{ sx={{