Minor code improvement

2 files changed, 27 insertions, 18 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 6f0b7639..b06f7f76 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -28,6 +28,12 @@ const useStyles = makeStyles((theme) => ({
     height: '25px',
     filter: 'brightness(0) invert(1)',
   },
+  listItem: {
+    backgroundColor: 'white',
+    '&:hover': {
+      backgroundColor: 'white',
+    },
+  },
   batteryText: {
     fontSize: '0.75rem',
     fontWeight: 'normal',
@@ -44,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const getOnlineStatus = (status) => {
+const getStatusColor = (status) => {
   switch (status) {
     case 'online':
       return 'green';
@@ -77,13 +83,13 @@ const DeviceRow = ({ data, index, style }) => {
   return (
     <div style={style}>
       <Fragment key={index}>
-        <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
+        <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}>
           <ListItemAvatar>
             <Avatar>
               <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getOnlineStatus(item.status)] }} />
+          <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
           <ListItemSecondaryAction>
             {position && (
               <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
@@ -145,7 +151,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
 };
 
 const DevicesList = () => (
-  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
+  <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd />
 );
 
 export default DevicesList;
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index e41cc338..d5447e55 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -65,6 +65,10 @@ const useStyles = makeStyles((theme) => ({
   },
   deviceList: {
     height: '100%',
+    backgroundColor: 'transparent',
+    [theme.breakpoints.down('md')]: {
+      backgroundColor: 'white',
+    },
   },
   collapsed: {
     transform: `translateX(-${360 + 16}px)`,
@@ -112,8 +116,6 @@ const useStyles = makeStyles((theme) => ({
   menuButton: {
     display: 'flex',
     flexDirection: 'column',
-  },
-  iconText: {
     fontSize: '0.75rem',
     fontWeight: 'normal',
     color: '#222222',
@@ -128,7 +130,8 @@ const MainPage = () => {
   const [deviceName, setDeviceName] = useState();
   const [collapsed, setCollapsed] = useState(false);
 
-  const matchesMD = useMediaQuery(theme.breakpoints.down('md'));
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+  const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
   const handleClose = () => {
     setCollapsed(!collapsed);
@@ -148,23 +151,23 @@ const MainPage = () => {
         && (
         <Button
           variant="contained"
-          color={matchesMD ? 'secondary' : 'primary'}
+          color={isPhone ? 'secondary' : 'primary'}
           classes={{ containedPrimary: classes.deviceButtonBackground }}
           className={classes.deviceButton}
           onClick={handleClose}
           startIcon={<ListIcon />}
           disableElevation
         >
-          {!matchesMD ? t('deviceTitle') : ''}
+          {!isPhone ? t('deviceTitle') : ''}
         </Button>
         )}
       <div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}>
-        <Grid container direction="column" spacing={matchesMD ? 0 : 2} style={{ height: '100%' }}>
+        <Grid container direction="column" spacing={isTablet ? 0 : 2} style={{ height: '100%' }}>
           <Grid item>
             <Paper className={classes.paper}>
               <Toolbar className={classes.toolbar} disableGutters>
                 <Grid container direction="row" alignItems="center" spacing={2}>
-                  {matchesMD && (
+                  {isTablet && (
                   <Grid item>
                     <IconButton onClick={handleClose}>
                       <ArrowBackIcon />
@@ -188,7 +191,7 @@ const MainPage = () => {
                       <AddIcon />
                     </IconButton>
                   </Grid>
-                  {!matchesMD && (
+                  {!isTablet && (
                   <Grid item>
                     <IconButton onClick={handleClose}>
                       <CloseIcon />
@@ -200,9 +203,9 @@ const MainPage = () => {
             </Paper>
           </Grid>
           <Grid item xs>
-            <Paper className={`${classes.deviceList} ${classes.paper}`}>
+            <div className={classes.deviceList}>
               <DevicesList />
-            </Paper>
+            </div>
           </Grid>
         </Grid>
       </div>
@@ -213,25 +216,25 @@ const MainPage = () => {
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <ReplayIcon />
-                  <span className={classes.iconText}>{t('reportReplay')}</span>
+                  {t('reportReplay')}
                 </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <DescriptionIcon />
-                  <span className={classes.iconText}>{t('reportTitle')}</span>
+                  {t('reportTitle')}
                 </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <ShuffleIcon />
-                  <span className={classes.iconText}>Options</span>
+                  Options
                 </IconButton>
               </Grid>
               <Grid item>
                 <IconButton classes={{ label: classes.menuButton }}>
                   <PersonIcon />
-                  <span className={classes.iconText}>{t('settingsUser')}</span>
+                  {t('settingsUser')}
                 </IconButton>
               </Grid>
             </Grid>