@@ -24,7 +24,7 @@ paddingTop: '1rem',
     paddingBottom: '1rem',
   },
   link: {
-    width: '75%',
+    width: '60%',
   },
   logo: {
     display: 'block',

@@ -105,13 +105,14 @@ >
           <Icon>done</Icon>
         </IconButton>
         <DateTimePicker
-          label={t('event.creation.date')}
+          label={t('car.creation.date')}
           value={date}
           onChange={setDate}
           className={classes.textField}
           fullWidth
           format="LLLL"
           disablePast
+          minDateMessage={t('car.creation.date_min')}
           id="EditCarDateTime"
           name="date"
           cancelLabel={t('generic.cancel')}

@@ -12,9 +12,9 @@ <Container maxWidth="sm" className={classes.container}>
       <Button
         fullWidth
         variant="contained"
-        color="primary"
+        color="secondary"
         onClick={toggleNewCar}
-        classes={{containedPrimary: classes.button}}
+        classes={{containedSecondary: classes.button}}
       >
         {t('car.creation.title')}
       </Button>
@@ -26,11 +26,12 @@ const useStyles = makeStyles(theme => ({
   container: {
     display: 'flex',
     justifyContent: 'center',
+    padding: 0,
   },
   button: {
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,
-    '&:hover': {color: theme.palette.primary.contrastText},
+    '&:hover': {color: theme.palette.secondary.contrastText},
   },
 }));
 

@@ -87,15 +87,19 @@ };
 
 const useStyles = makeStyles(theme => ({
   slider: {
-    padding: theme.spacing(1),
     marginTop: theme.mixins.toolbar.minHeight,
+    padding: theme.spacing(1),
+    overflow: 'hidden',
+    '& .slick-list': {
+      overflow: 'visible',
+    },
   },
   slide: {
     height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px - ${theme.spacing(
       2
     )})`,
     outline: 'none',
-    padding: theme.spacing(2),
+    padding: theme.spacing(1),
     marginBottom: theme.spacing(10),
   },
 }));

@@ -6,7 +6,6 @@ import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import {useTranslation} from 'react-i18next';
 import useDebounce from '../../hooks/useDebounce';
-import Paper from '../../components/Paper';
 
 const isValidEmail = email =>
   // eslint-disable-next-line
@@ -14,14 +13,7 @@ /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
     email
   );
 
-const Step1 = ({
-  nextStep,
-  previousStep,
-  createEvent,
-  event,
-  addToEvent,
-  ...props
-}) => {
+const Step1 = ({nextStep, previousStep, createEvent, event, addToEvent}) => {
   const classes = useStyles();
   const {t} = useTranslation();
 
@@ -47,55 +39,54 @@ return false;
   };
 
   return (
-    <Paper {...props}>
-      <form onSubmit={onNext}>
-        <TextField
-          className={classes.textField}
-          label={t('event.creation.event_name')}
-          fullWidth
-          autoFocus
-          margin="dense"
-          value={name}
-          onChange={e => setName(e.target.value)}
-          id="NewEventName"
-          name="name"
-        />
-        <TextField
-          className={classes.textField}
-          label={t('event.creation.creator_email')}
-          fullWidth
-          margin="dense"
-          value={email}
-          onChange={e => setEmail(e.target.value)}
-          id="NewEventEmail"
-          name="email"
-          type="email"
-        />
-        <FormControlLabel
-          className={classes.newsletter}
-          label={t('event.creation.newsletter')}
-          control={
-            <Checkbox
-              name="newsletter"
-              id="NewEventNewsletter"
-              checked={newsletter}
-              onChange={e => setNewsletter(e.target.checked)}
-            />
-          }
-        />
-        <Button
-          className={classes.button}
-          type="submit"
-          variant="contained"
-          color="secondary"
-          fullWidth
-          disabled={!canSubmit}
-          aria-disabled={!canSubmit}
-        >
-          {t('event.creation.next')}
-        </Button>
-      </form>
-    </Paper>
+    <form onSubmit={onNext}>
+      <TextField
+        className={classes.textField}
+        label={t('event.creation.event_name')}
+        fullWidth
+        autoFocus
+        margin="dense"
+        value={name}
+        onChange={e => setName(e.target.value)}
+        id="NewEventName"
+        name="name"
+      />
+      <TextField
+        className={classes.textField}
+        label={t('event.creation.creator_email')}
+        fullWidth
+        margin="dense"
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+        id="NewEventEmail"
+        name="email"
+        type="email"
+      />
+      <FormControlLabel
+        className={classes.newsletter}
+        label={t('event.creation.newsletter')}
+        control={
+          <Checkbox
+            name="newsletter"
+            color="primary"
+            id="NewEventNewsletter"
+            checked={newsletter}
+            onChange={e => setNewsletter(e.target.checked)}
+          />
+        }
+      />
+      <Button
+        className={classes.button}
+        type="submit"
+        variant="contained"
+        color="secondary"
+        fullWidth
+        disabled={!canSubmit}
+        aria-disabled={!canSubmit}
+      >
+        {t('event.creation.next')}
+      </Button>
+    </form>
   );
 };
 

@@ -7,9 +7,8 @@ import {DatePicker} from '@material-ui/pickers';
 import moment from 'moment';
 import {useHistory} from 'react-router-dom';
 import {useToast} from '../../contexts/Toast';
-import Paper from '../../components/Paper';
 
-const Step2 = ({event, addToEvent, createEvent, ...props}) => {
+const Step2 = ({event, addToEvent, createEvent}) => {
   const classes = useStyles();
   const {t} = useTranslation();
   const history = useHistory();
@@ -30,44 +29,42 @@ return false;
   };
 
   return (
-    <Paper {...props}>
-      <form onSubmit={onCreate}>
-        <DatePicker
-          label={t('event.creation.date')}
-          value={date}
-          onChange={setDate}
-          className={classes.textField}
-          fullWidth
-          format="DD.MM.YYYY"
-          disablePast
-          id="NewEventDate"
-          name="date"
-          cancelLabel={t('generic.cancel')}
-        />
-        <TextField
-          className={classes.textField}
-          label={t('event.creation.address')}
-          fullWidth
-          margin="dense"
-          multiline
-          rows={4}
-          value={address}
-          onChange={e => setAddress(e.target.value)}
-          id="NewEventAddress"
-          name="address"
-        />
-        <Button
-          className={classes.button}
-          variant="contained"
-          color="secondary"
-          fullWidth
-          type="submit"
-          id="NewEventSubmit"
-        >
-          {t('generic.create')}
-        </Button>
-      </form>
-    </Paper>
+    <form onSubmit={onCreate}>
+      <DatePicker
+        label={t('event.creation.date')}
+        value={date}
+        onChange={setDate}
+        className={classes.textField}
+        fullWidth
+        format="DD.MM.YYYY"
+        disablePast
+        id="NewEventDate"
+        name="date"
+        cancelLabel={t('generic.cancel')}
+      />
+      <TextField
+        className={classes.textField}
+        label={t('event.creation.address')}
+        fullWidth
+        margin="dense"
+        multiline
+        rows={4}
+        value={address}
+        onChange={e => setAddress(e.target.value)}
+        id="NewEventAddress"
+        name="address"
+      />
+      <Button
+        className={classes.button}
+        variant="contained"
+        color="secondary"
+        fullWidth
+        type="submit"
+        id="NewEventSubmit"
+      >
+        {t('generic.create')}
+      </Button>
+    </form>
   );
 };
 

@@ -9,7 +9,7 @@ const steps = [Step1, Step2];
 
 const eventReducer = (state, item) => ({...state, ...item});
 
-const CreateEvent = props => {
+const CreateEvent = () => {
   const strapi = useStrapi();
   const [step, setStep] = useState(0);
   const [event, addToEvent] = useReducer(eventReducer, {});
@@ -26,7 +26,6 @@ };
 
   return (
     <Step
-      {...props}
       event={event}
       addToEvent={addToEvent}
       createEvent={createEvent}

@@ -74,11 +74,11 @@ };
 
   return (
     <Dialog
-      open={open}
-      TransitionComponent={Transition}
-      onClose={toggle}
       fullWidth
       maxWidth="sm"
+      open={open}
+      onClose={toggle}
+      TransitionComponent={Transition}
     >
       <form onSubmit={onCreate}>
         <DialogTitle>{t('car.creation.title')}</DialogTitle>

@@ -1,44 +1,28 @@ 
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
-import {makeStyles} from '@material-ui/core/styles';
 import {useTranslation} from 'react-i18next';
 
 const Passenger = ({passenger, button}) => {
-  const classes = useStyles();
   const {t} = useTranslation();
   return !!passenger ? (
-    <Box display="flex" flexDirection="row" alignItems="center" px={2} py={1}>
-      <Typography variant="body2" className={classes.name}>
-        {passenger}
-      </Typography>
-      {button}
-    </Box>
+    <>
+      <ListItemText primary={passenger} />
+      <ListItemSecondaryAction>{button}</ListItemSecondaryAction>
+    </>
   ) : (
-    <Box
-      display="flex"
-      flexDirection="row"
-      alignItems="center"
-      px={2}
-      py={1}
-      minHeight={46}
-    >
-      <Icon color="disabled" className={classes.icon}>
-        person
-      </Icon>
-      <Typography variant="body2">{t('car.passengers.empty')}</Typography>
-    </Box>
+    <>
+      <ListItemAvatar>
+        <ListItemIcon color="disabled">
+          <Icon>person</Icon>
+        </ListItemIcon>
+      </ListItemAvatar>
+      <ListItemText primary={t('car.passengers.empty')} />
+    </>
   );
 };
-
-const useStyles = makeStyles(theme => ({
-  name: {
-    flexGrow: 1,
-  },
-  icon: {
-    marginRight: theme.spacing(2),
-  },
-}));
 
 export default Passenger;

@@ -1,5 +1,6 @@ 
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
 import Icon from '@material-ui/core/Icon';
 import {makeStyles} from '@material-ui/core/styles';
 import Input from './Input';
@@ -30,25 +31,21 @@ 
   return (
     <div className={classes.container}>
       {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
-      {!!places &&
-        !!list &&
-        list.map((passenger, index) => (
-          <Passenger
-            key={index}
-            passenger={passenger}
-            button={
-              <IconButton
-                size="small"
-                color="primary"
-                edge="end"
-                onClick={() => onClick(index)}
-                disabled={disabled}
-              >
-                <Icon>{icon}</Icon>
-              </IconButton>
-            }
-          />
-        ))}
+      <List disablePadding>
+        {!!places &&
+          !!list &&
+          list.map((passenger, index) => (
+            <ListItem key={index} onClick={() => !disabled && onClick(index)}>
+              <Passenger
+                key={index}
+                passenger={passenger}
+                button={
+                  <Icon color={disabled ? 'disabled' : 'primary'}>{icon}</Icon>
+                }
+              />
+            </ListItem>
+          ))}
+      </List>
     </div>
   );
 };

@@ -34,7 +34,7 @@ </IconButton>
         </Toolbar>
       </AppBar>
       <div className={classes.offset}>
-        <List>
+        <List disablePadding>
           {cars?.map((car, i) => (
             <ListItem
               key={i}

@@ -21,10 +21,10 @@ "creator_email": "Votre e-mail",
       "date": "Départ",
       "address": "Adresse de l'événement",
       "next": "Suivant",
-      "newsletter": "J'accepte d'être tenu informé de l'évolution du produit par e-mail"
+      "newsletter": "Me tenir informé des évolutions de Caroster par e-mail"
     },
     "actions": {
-      "show_details": "Afficher les détails",
+      "show_details": "Détails de l'événement",
       "hide_details": "Cacher les détails",
       "add_car": "Ajouter une voiture",
       "invite": "Inviter",
@@ -43,6 +43,8 @@ "details": "Notes",
       "phone": "Contact"
     },
     "creation": {
+      "date": "Départ",
+      "date_min": "Sélectionnez une date à venir",
       "title": "Ajouter une voiture",
       "name": "Nom de la voiture",
       "seats": "Nombre de places",

@@ -7,15 +7,15 @@ import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Icon from '@material-ui/core/Icon';
 import {makeStyles} from '@material-ui/core/styles';
+import {useEvent, EventProvider} from '../contexts/Event';
+import {useToast} from '../contexts/Toast';
 import Layout from '../layouts/Default';
+import Loading from '../pages/Loading';
 import EventMenu from '../containers/EventMenu';
 import EventDetails from '../containers/EventDetails';
 import EventFab from '../containers/EventFab';
-import {useEvent, EventProvider} from '../contexts/Event';
 import CarColumns from '../containers/CarColumns';
-import {useToast} from '../contexts/Toast';
 import NewCarDialog from '../containers/NewCarDialog';
-import Loading from '../pages/Loading';
 
 const Event = () => {
   const {t} = useTranslation();
@@ -71,33 +71,31 @@ className={classes.appbar}
         id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
       >
         <Toolbar>
-          {
-            <div className={classes.name}>
-              <Typography variant="h6" noWrap id="MenuHeaderTitle">
-                {event.name}
-              </Typography>
-              {detailsOpen && !isEditing && (
-                <IconButton
-                  color="inherit"
-                  edge="end"
-                  id="CloseDetailsBtn"
-                  onClick={() => setIsEditing(true)}
-                >
-                  <Icon className={classes.barIcon}>edit</Icon>
-                </IconButton>
-              )}
-              {detailsOpen && isEditing && (
-                <IconButton
-                  color="inherit"
-                  edge="end"
-                  id="EditEventSubmit"
-                  onClick={onEventSave}
-                >
-                  <Icon className={classes.barIcon}>done</Icon>
-                </IconButton>
-              )}
-            </div>
-          }
+          <div className={classes.name}>
+            <Typography variant="h6" noWrap id="MenuHeaderTitle">
+              {event.name}
+            </Typography>
+            {detailsOpen && !isEditing && (
+              <IconButton
+                color="inherit"
+                edge="end"
+                id="CloseDetailsBtn"
+                onClick={() => setIsEditing(true)}
+              >
+                <Icon>edit</Icon>
+              </IconButton>
+            )}
+            {detailsOpen && isEditing && (
+              <IconButton
+                color="inherit"
+                edge="end"
+                id="EditEventSubmit"
+                onClick={onEventSave}
+              >
+                <Icon>done</Icon>
+              </IconButton>
+            )}
+          </div>
           {!detailsOpen && (
             <>
               <IconButton
@@ -129,7 +127,7 @@ setIsEditing(false);
                 toggleDetails();
               }}
             >
-              <Icon className={classes.barIcon}>close</Icon>
+              <Icon>close</Icon>
             </IconButton>
           )}
           <EventMenu
@@ -185,7 +183,7 @@ display: 'flex',
     alignItems: 'center',
   },
   shareIcon: {
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(0),
   },
 }));
 

@@ -1,13 +1,16 @@ 
 import React from 'react';
 import Layout from '../layouts/Centered';
+import Paper from '../components/Paper';
 import Logo from '../components/Logo';
 import CreateEvent from '../containers/CreateEvent';
 
 const Home = () => {
   return (
     <Layout>
-      <Logo />
-      <CreateEvent />
+      <Paper>
+        <Logo />
+        <CreateEvent />
+      </Paper>
     </Layout>
   );
 };

@@ -14,13 +14,13 @@ },
   },
   mixins: {
     toolbar: {
-      minHeight: 64,
+      minHeight: 56,
     },
   },
   overrides: {
     MuiAppBar: {
       colorPrimary: {
-        backgroundColor: 'rgba(0,0,0,0.78)',
+        backgroundColor: '#242424',
         color: 'white',
       },
     },