feat: améliore interface VersionDialog

components/versions/version-dialog.js

@@ -5,6 +5,12 @@ import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import CloseIcon from '@mui/icons-material/Close'
+import CompareArrowsIcon from '@mui/icons-material/CompareArrows'
 import {useTheme} from '@mui/material/styles'
 import VersionComparison from './version-comparison.js'
 
@@ -16,21 +22,52 @@ export default function VersionDialog({versionData, versionCompare, isOpen, setI
     setIsOpen(false)
   }
 
+  const outdated = versionCompare?.outdated || false
+  const versionName = versionData?.name || 'Version inconnue'
+
   return (
     <Dialog
       fullScreen={fullScreen}
+      maxWidth='lg'
       open={isOpen}
       aria-labelledby='comparaison-des-versions'
       onClose={handleClose}
     >
-      <DialogTitle textAlign='center' id='comparaison-des-versions'>
-        {'Comparaison des versions'}
+      <DialogTitle id='comparaison-des-versions'>
+        <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+          <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
+            <CompareArrowsIcon color='primary' />
+            <Typography variant='h6' component='span'>
+              Comparaison: {versionName}
+            </Typography>
+            <Chip
+              label={outdated ? 'Obsolète' : 'Active'}
+              color={outdated ? 'error' : 'success'}
+              size='small'
+              variant='outlined'
+            />
+          </Box>
+          <IconButton
+            edge='end'
+            color='inherit'
+            aria-label='fermer'
+            onClick={handleClose}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
       </DialogTitle>
-      <DialogContent>
+
+      <DialogContent sx={{minHeight: '60vh'}}>
         <VersionComparison versionData={versionData} versionCompare={versionCompare} />
       </DialogContent>
-      <DialogActions>
-        <Button autoFocus color='success' onClick={handleClose}>
+
+      <DialogActions sx={{px: 3, py: 2}}>
+        <Button
+          variant='contained'
+          color='error'
+          onClick={handleClose}
+        >
           Fermer
         </Button>
       </DialogActions>