M app/src/containers/PassengersList/Passenger.js → app/src/containers/PassengersList/Passenger.js

@@ -1,7 +1,6 @@ 
 import React from 'react';
 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 {useTranslation} from 'react-i18next';
@@ -11,7 +10,7 @@ const {t} = useTranslation();
   return !!passenger ? (
     <>
       <ListItemText primary={passenger} />
-      <ListItemSecondaryAction>{button}</ListItemSecondaryAction>
+      {button}
     </>
   ) : (
     <>

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

@@ -1,7 +1,9 @@ 
 import React from 'react';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import IconButton from '@material-ui/core/IconButton';
 import Icon from '@material-ui/core/Icon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import {makeStyles} from '@material-ui/core/styles';
 import Input from './Input';
 import Passenger from './Passenger';
@@ -13,6 +15,7 @@ places = 0,
   addPassenger,
   icon,
   onClick,
+  onPress,
   disabled,
 }) => {
   const classes = useStyles();
@@ -28,6 +31,18 @@ }
 
   const emptyPlaces = !!passengers ? places - passengers.length : places;
 
+  const button = index => {
+    return !!onClick ? (
+      <ListItemSecondaryAction>
+        <IconButton size="small" color="primary" onClick={() => onClick(index)}>
+          <Icon>{icon}</Icon>
+        </IconButton>
+      </ListItemSecondaryAction>
+    ) : (
+      <Icon color="primary">{icon}</Icon>
+    );
+  };
+
   return (
     <div className={classes.container}>
       {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
@@ -35,13 +50,16 @@ <List disablePadding>
         {!!places &&
           !!list &&
           list.map((passenger, index) => (
-            <ListItem key={index} onClick={() => !disabled && onClick(index)}>
+            <ListItem
+              key={index}
+              disabled={disabled}
+              button={!!onPress}
+              onClick={() => !!onPress && onPress(index)}
+            >
               <Passenger
                 key={index}
                 passenger={passenger}
-                button={
-                  <Icon color={disabled ? 'disabled' : 'primary'}>{icon}</Icon>
-                }
+                button={button(index)}
               />
             </ListItem>
           ))}

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

@@ -94,7 +94,7 @@ if (isEditing) savePassengers();
     toggleEditing();
   };
 
-  const onClick = index => {
+  const onPress = index => {
     if (isEditing) setRemoving(index);
     else setAdding(index);
   };
@@ -122,7 +122,7 @@ hideEmpty
           places={50}
           passengers={passengers}
           addPassenger={addPassenger}
-          onClick={onClick}
+          onPress={onPress}
           icon={isEditing ? 'close' : 'chevron_right'}
           disabled={availability <= 0}
         />