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 (
<Box sx={{padding: 3}}>
<Grid container spacing={2}>
<Grid xs={6}>
<Paper sx={{padding: 1, backgroundColor: '#E8F5E9'}}>
<Box sx={{color: '#388E3C', fontWeight: 'bold'}}>
<Grid container spacing={2} sx={{width: '100%'}}>
<Grid xs={6} sx={{width: '100%'}}>
<Paper sx={{
padding: 2,
backgroundColor: '#E8F5E9',
width: '100%',
minHeight: '200px'
}}
>
<Box sx={{
color: '#2E7D32',
fontWeight: 'bold'
}}
>
<MarkdownRenderer
content={main.contenu}
color='#388E3C'
color='#2E7D32'
fallbackComponent={({children, ...props}) => (
<Typography variant='body1' sx={{color: '#388E3C', fontWeight: 'bold'}} {...props}>
<Typography variant='body1' sx={{color: '#2E7D32', fontWeight: 'bold'}} {...props}>
{children}
</Typography>
)}
@@ -88,9 +98,19 @@ export default function VersionComparison({versionData, versionCompare}) {
</Box>
</Paper>
</Grid>
<Grid xs={6}>
<Paper sx={{padding: 1, backgroundColor: outdated ? '#F9E8E8' : '#E3F2FD'}}>
<Box sx={{color: outdated ? '#D32F2F' : '#1976D2', fontWeight: 'bold'}}>
<Grid xs={6} sx={{width: '100%'}}>
<Paper sx={{
padding: 2,
backgroundColor: outdated ? '#F9E8E8' : '#E3F2FD',
width: '100%',
minHeight: '200px'
}}
>
<Box sx={{
color: outdated ? '#D32F2F' : '#1976D2',
fontWeight: 'bold'
}}
>
<MarkdownRenderer
content={current.contenu}
color={outdated ? '#D32F2F' : '#1976D2'}
@@ -149,22 +169,22 @@ export default function VersionComparison({versionData, versionCompare}) {
>
LÉGENDE
</Typography>
<Grid container textAlign='center' spacing={2}>
<Grid size={{xs: 12, sm: 4}}>
<Grid container textAlign='center' spacing={1}>
<Grid size={{xs: 6, sm: 6}}>
<Typography
variant='body2'
sx={{
backgroundColor: '#E8F5E9',
padding: 1,
borderRadius: 1,
color: '#388E3C',
color: '#2E7D32',
fontWeight: 'bold'
}}
>
En ligne
Version de référence
</Typography>
</Grid>
<Grid size={{xs: 12, sm: 4}}>
<Grid size={{xs: 6, sm: 6}}>
<Typography
variant='body2'
sx={{