M app/src/containers/AddToMyEventDialog/index.js → app/src/containers/AddToMyEventDialog/index.js

@@ -1,11 +1,14 @@ 
 import React, {useState} from 'react';
 import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
+import {makeStyles} from '@material-ui/core/styles';
 import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Icon from '@material-ui/core/Icon';
 import Slide from '@material-ui/core/Slide';
 import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
 import {useTranslation} from 'react-i18next';
 import {Redirect} from 'react-router-dom';
 
@@ -16,7 +19,7 @@ 
 const AddToMyEventDialog = ({event, open, onClose}) => {
   const {t} = useTranslation();
   const [redirectTo, setRedirectTo] = useState(null);
-
+  const classes = useStyles();
   if (!event) return null;
 
   if (redirectTo) {
@@ -27,10 +30,13 @@ }
 
   return (
     <Dialog open={open} TransitionComponent={Transition} onClose={onClose}>
+      <IconButton onClick={onClose} className={classes.close}>
+        <Icon>close</Icon>
+      </IconButton>
+      <DialogTitle>
+        {t('event.add_to_my_events.title', {eventName: event.name})}
+      </DialogTitle>
       <DialogContent>
-        <DialogTitle>
-          {t('event.add_to_my_events.title', {eventName: event.name})}
-        </DialogTitle>
         <DialogContentText
           dangerouslySetInnerHTML={{
             __html: t('event.add_to_my_events.text_html', {
@@ -40,9 +46,6 @@ }}
         />
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} id="AddToMyEventCancel">
-          {t('event.add_to_my_events.cancel')}
-        </Button>
         <Button id="AddToMyEventLogin" onClick={() => setRedirectTo('/login')}>
           {t('event.add_to_my_events.login')}
         </Button>
@@ -58,4 +61,11 @@ </Dialog>
   );
 };
 
+const useStyles = makeStyles(theme => ({
+  close: {
+    position: 'absolute',
+    top: theme.spacing(1),
+    right: theme.spacing(0.5),
+  },
+}));
 export default AddToMyEventDialog;

M app/src/locales/fr.json → app/src/locales/fr.json

@@ -62,7 +62,6 @@ "cant_create": "Impossible de créer l'événement",
       "cant_update": "Impossible de modifier l'événement"
     },
     "add_to_my_events": {
-      "cancel": "Annuler",
       "login": "Se connecter",
       "register": "S'inscrire",
       "title": "Ajouter {{eventName}} à sa liste d'évènement",