@@ -1,15 +1,18 @@ 
+import {makeStyles} from '@material-ui/core/styles';
 import Snackbar from '@material-ui/core/Snackbar';
 import useToastStore from '../../stores/useToastStore';
 
 const Toasts = () => {
   const toast = useToastStore(s => s.toast);
   const clearToast = useToastStore(s => s.clearToast);
+  const classes = useStyles();
 
   return (
     <Snackbar
+      className={classes.withMobile}
       anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'center',
+        vertical: 'bottom',
+        horizontal: 'left',
       }}
       autoHideDuration={6000}
       open={!!toast}
@@ -18,5 +21,13 @@ onClose={clearToast}
     />
   );
 };
+
+const useStyles = makeStyles(theme => ({
+  withMobile: {
+    [theme.breakpoints.down('sm')]: {
+      bottom: theme.spacing(8),
+    },
+  }
+}));
 
 export default Toasts;

@@ -7,9 +7,10 @@ 
 interface Props {
   getOnClickFunction: (addSelf: boolean) => () => void;
   canAddSelf: boolean;
+  variant: 'waitingList' | 'travel';
 }
 
-const AddPassengerButtons = ({getOnClickFunction, canAddSelf}: Props) => {
+const AddPassengerButtons = ({getOnClickFunction, canAddSelf, variant}: Props) => {
   const classes = useStyles();
   const {t} = useTranslation();
 
@@ -38,7 +39,7 @@ fullWidth
           onClick={getOnClickFunction(false)}
         >
           <Icon>person_add</Icon>
-          {t('travel.passengers.add')}
+          {t(`travel.passengers.add_to_${variant}`)}
         </Button>
       </Box>
     </Box>

@@ -21,10 +21,8 @@ return (
     <Fragment>
       <Box className={classes.inputBox}>
         <label htmlFor="name">
-          <Typography>
-            <Icon className={classes.labelIcon}>
-              person
-            </Icon>{' '}
+          <Typography className={classes.label}>
+            <Icon className={classes.labelIcon}>person</Icon>{' '}
             {t('travel.passengers.name')}
           </Typography>
         </label>
@@ -42,10 +40,8 @@ />
       </Box>
       <Box className={classes.inputBox}>
         <label htmlFor="email">
-          <Typography>
-            <Icon className={classes.labelIcon}>
-              mail_outlined
-            </Icon>{' '}
+          <Typography className={classes.label}>
+            <Icon className={classes.labelIcon}>mail_outlined</Icon>{' '}
             {t('travel.passengers.email')}
           </Typography>
         </label>

@@ -103,7 +103,7 @@ />
           )}
           <Box className={classes.inputBox}>
             <label htmlFor="location">
-              <Typography>
+              <Typography className={classes.label}>
                 <Icon className={classes.labelIcon}>place</Icon>{' '}
                 {t('travel.passengers.location')}
               </Typography>

@@ -4,9 +4,13 @@ const useStyles = makeStyles(theme => ({
     dialogContent: {
       padding: theme.spacing(1, 3, 3, 3),
     },
+    label: {
+      verticalAlign: 'text-bottom',
+    },
     labelIcon: {
-      verticalAlign: 'middle',
-      fontSize: '1rem'
+      verticalAlign: 'text-bottom',
+      fontSize: '1rem',
+      margin: theme.spacing(0, 0, .125, 0)
     },
     inputBox: {
       padding: theme.spacing(1, 0),

@@ -35,6 +35,7 @@ <Divider />
       <AddPassengerButtons
         getOnClickFunction={props.getAddPassengerFunction}
         canAddSelf={props.canAddSelf}
+        variant="travel"
       />
       <Divider />
       {!isEditing && (

@@ -16,7 +16,7 @@ const {t} = useTranslation();
 
   return (
     <ListItemSecondaryAction  className={classes.action} onClick={onClick} tabIndex={tabIndex}>
-      <IconButton className={classes.button} size="small" color="primary">
+      <IconButton className={classes.button} color="primary">
         {t('passenger.actions.place')}
         <Icon>chevron_right</Icon>
       </IconButton>
@@ -30,6 +30,10 @@ top: theme.spacing(3),
   },
   button: {
     borderRadius: theme.spacing(1),
+    margin: theme.spacing(1, 0, 0, 0),
+    padding: 0,
+    fontSize: '1rem',
+    lineHeight: 1.5,
   },
 }));
 

@@ -122,6 +122,7 @@ <Divider />
         <AddPassengerButtons
           getOnClickFunction={getToggleNewPassengerDialogFunction}
           canAddSelf={canAddSelf}
+          variant="waitingList"
         />
         <Divider />
         <PassengersList

@@ -148,6 +148,8 @@ },
     "passengers": {
       "empty": "Available seat",
       "add": "Add a passenger",
+      "add_to_travel": "Add a passenger",
+      "add_to_waitingList": "Add someone",
       "add_to_car": "Add to car",
       "add_me": "Add me",
       "register_to_waiting_list": "Register to waiting list",

@@ -148,6 +148,8 @@ },
     "passengers": {
       "empty": "Place disponible",
       "add": "Ajouter un passager",
+      "add_to_travel": "Ajouter un passager",
+      "add_to_waitingList": "Ajouter quelqu'un",
       "add_me": "S'ajouter",
       "add_to_car": "Ajouter à la voiture",
       "register_to_waiting_list": "Inscription à la liste d'attente",

@@ -24,6 +24,7 @@ } from '../../generated/graphql';
 import ErrorPage from '../_error';
 import AddTravel from '../../containers/TravelColumns/AddTravel';
 import useProfile from '../../hooks/useProfile';
+import Fab from '../../containers/Fab';
 
 const POLL_INTERVAL = 10000;
 
@@ -108,7 +109,13 @@ onShare={onShare}
       />
       <TravelColumns toggle={toggleVehicleChoice} />
       <Box className={classes.bottomRight}>
-        <AddTravel toggle={user ? toggleVehicleChoice : toggleNewTravel} />
+        <Fab
+          onClick={(user ? toggleVehicleChoice : toggleNewTravel)}
+          aria-label="add-car"
+          color="primary"
+        >
+          {t('travel.creation.title')}
+        </Fab>
       </Box>
       <NewTravelDialog open={openNewTravel} toggle={toggleNewTravel} />
       <VehicleChoiceDialog