Use ignition icon

3 files changed, 14 insertions, 5 deletions

diff --git a/modern/public/images/icon/ignition.svg b/modern/public/images/icon/ignition.svg
new file mode 100644
index 0000000..d731c92
--- /dev/null
+++ b/modern/public/images/icon/ignition.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 8H19.5C19.81 8 20.11 8.15 20.3 8.4L22.6 11.47C22.86 11.82 23 12.24 23 12.67V16C23 16.55 22.55 17 22 17H21C21 18.66 19.66 20 18 20C16.34 20 15 18.66 15 17H9C9 18.66 7.66 20 6 20C4.34 20 3 18.66 3 17C1.9 17 1 16.1 1 15V6C1 4.9 1.9 4 3 4H15C16.1 4 17 4.9 17 6V8ZM5 17C5 17.55 5.45 18 6 18C6.55 18 7 17.55 7 17C7 16.45 6.55 16 6 16C5.45 16 5 16.45 5 17ZM21.46 12L19.5 9.5H17V12H21.46ZM17 17C17 17.55 17.45 18 18 18C18.55 18 19 17.55 19 17C19 16.45 18.55 16 18 16C17.45 16 17 16.45 17 17ZM7.7704 16.1299L8.3613 16.2341C8.3613 16.2341 9.91885 14.1732 13.0446 10.0602L13.1033 9.96899C13.1774 9.86019 13.1742 9.63624 12.8847 9.58519L10.8165 9.22052L12.2178 4.72894L11.6269 4.62475C10.789 5.73304 10.0364 6.72746 9.36924 7.60897C8.4039 8.88444 7.61745 9.92355 7.01063 10.7292C6.99419 10.7534 7.10701 10.5973 6.95538 10.8007C6.80375 11.0041 6.7608 11.2132 7.10352 11.2736L9.17166 11.6383L7.7704 16.1299Z" fill="#F3A813"/>
+</svg>
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index b06f7f7..3ffd421 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -9,10 +9,11 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Grid from '@material-ui/core/Grid';
 import ListItemText from '@material-ui/core/ListItemText';
+import SvgIcon from '@material-ui/core/SvgIcon';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import BatteryFullIcon from '@material-ui/icons/BatteryFull';
-import VpnKeyIcon from '@material-ui/icons/VpnKey';
+import { ReactComponent as IgnitionIcon } from '../public/images/icon/ignition.svg';
 
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
@@ -48,6 +49,9 @@ const useStyles = makeStyles((theme) => ({
   gray: {
     color: theme.palette.common.gray,
   },
+  indicators: {
+    lineHeight: 1,
+  },
 }));
 
 const getStatusColor = (status) => {
@@ -79,6 +83,7 @@ const DeviceRow = ({ data, index, style }) => {
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
+  const showIgnition = true;// position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition
 
   return (
     <div style={style}>
@@ -90,12 +95,12 @@ const DeviceRow = ({ data, index, style }) => {
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
-          <ListItemSecondaryAction>
+          <ListItemSecondaryAction className={classes.indicators}>
             {position && (
-              <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
-                {position.attributes.hasOwnProperty('ignition') && (
+              <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
+                {showIgnition && (
                   <Grid item>
-                    <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`} />
+                    <SvgIcon component={IgnitionIcon} />
                   </Grid>
                 )}
                 {position.attributes.hasOwnProperty('batteryLevel') && (
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 6f6b05c..417cdb0 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -69,6 +69,7 @@ const useStyles = makeStyles((theme) => ({
     left: theme.spacing(1.5),
     top: theme.spacing(3),
     borderRadius: '0px',
+    minWidth: 0,
     [theme.breakpoints.down('md')]: {
       left: theme.spacing(0),
     },