Improve device list icons

4 files changed, 36 insertions, 30 deletions

diff --git a/modern/public/images/ignition.svg b/modern/public/images/ignition.svg
deleted file mode 100644
index d731c92e..00000000
--- a/modern/public/images/ignition.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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 15a88874..490f428d 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -6,19 +6,21 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 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 { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg';
+import Battery60Icon from '@material-ui/icons/Battery60';
+import Battery20Icon from '@material-ui/icons/Battery20';
+import FlashOnIcon from '@material-ui/icons/FlashOn';
+import FlashOffIcon from '@material-ui/icons/FlashOff';
 
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
-import { formatPosition, getBatteryStatus, getStatusColor } from './common/formatter';
+import { formatBoolean, formatPercentage, getStatusColor } from './common/formatter';
 import { useTranslation } from './LocalizationProvider';
+import { Tooltip } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -47,12 +49,12 @@ const useStyles = makeStyles((theme) => ({
   positive: {
     color: theme.palette.colors.positive,
   },
+  medium: {
+    color: theme.palette.colors.medium,
+  },
   negative: {
     color: theme.palette.colors.negative,
   },
-  neutral: {
-    color: theme.palette.colors.neutral,
-  },
   indicators: {
     lineHeight: 1,
   },
@@ -66,7 +68,6 @@ const DeviceRow = ({ data, index, style }) => {
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
-  const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition;
 
   return (
     <div style={style}>
@@ -79,23 +80,28 @@ const DeviceRow = ({ data, index, style }) => {
         <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
         <ListItemSecondaryAction className={classes.indicators}>
           {position && (
-          <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
-            {showIgnition && (
-            <Grid item>
-              <SvgIcon component={IgnitionIcon} />
-            </Grid>
-            )}
-            {position.attributes.hasOwnProperty('batteryLevel') && (
-            <Grid item container xs alignItems="center" alignContent="center">
-              <Grid item>
-                <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}</span>
-              </Grid>
-              <Grid item>
-                <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
-              </Grid>
-            </Grid>
-            )}
-          </Grid>
+            <>
+              {position.attributes.hasOwnProperty('ignition') && (
+                <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}>
+                  {position.attributes.ignition ? (
+                    <FlashOnIcon className={classes.positive} />
+                  ) : (
+                    <FlashOffIcon className={classes.negative} />
+                  )}
+                </Tooltip>
+              )}
+              {position.attributes.hasOwnProperty('batteryLevel') && (
+                <Tooltip title={`${t('positionBatteryLevel')}: ${formatPercentage(position.attributes.batteryLevel)}`}>
+                  {position.attributes.batteryLevel > 70 ? (
+                    <BatteryFullIcon className={classes.positive} />
+                  ) : position.attributes.batteryLevel > 30 ? (
+                    <Battery60Icon className={classes.medium} />
+                  ) : (
+                    <Battery20Icon className={classes.negative} />
+                  )}
+                </Tooltip>
+              )}
+            </>
           )}
         </ListItemSecondaryAction>
       </ListItem>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 1d4806e8..2a7c9095 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -4,6 +4,8 @@ export const formatBoolean = (value, t) => (value ? t('sharedYes') : t('sharedNo
 
 export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
 
+export const formatPercentage = (value) => `${value}%`;
+
 export const formatDate = (value, format = 'YYYY-MM-DD HH:mm') => moment(value).format(format);
 export const formatTime = (value, format = 'YYYY-MM-DD HH:mm:ss') => moment(value).format(format);
 
@@ -24,7 +26,7 @@ export const formatPosition = (value, key, t) => {
     case 'course':
       return value.toFixed(1);
     case 'batteryLevel':
-      return `${value}%`;
+      return formatPercentage(value);
     default:
       if (typeof value === 'number') {
         return formatNumber(value);
@@ -119,7 +121,7 @@ export const getBatteryStatus = (batteryLevel) => {
     return 'positive';
   }
   if (batteryLevel > 30) {
-    return 'neutral';
+    return 'medium';
   }
   return 'negative';
 };
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index 46f82ae9..d24d60cc 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -8,6 +8,7 @@ export default {
   },
   colors: {
     positive: '#4CAF50',
+    medium: '#F3A813',
     negative: '#CC2222',
     neutral: '#888888',
   },