From 4a6ed2462ed5ed2960fc8245ac3c5bae967e685b Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Mon, 19 Jul 2021 13:22:11 +0530 Subject: Minor code improvement --- modern/src/DevicesList.js | 14 ++++++++++---- modern/src/MainPage.js | 31 +++++++++++++++++-------------- 2 files changed, 27 insertions(+), 18 deletions(-) (limited to 'modern') diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 6f0b763..b06f7f7 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 (
- dispatch(devicesActions.select(item))}> + dispatch(devicesActions.select(item))}> - + {position && ( @@ -145,7 +151,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { }; const DevicesList = () => ( - + ); export default DevicesList; diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index e41cc33..d5447e5 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 = () => { && ( )}
- + - {matchesMD && ( + {isTablet && ( @@ -188,7 +191,7 @@ const MainPage = () => { - {!matchesMD && ( + {!isTablet && ( @@ -200,9 +203,9 @@ const MainPage = () => { - +
- +
@@ -213,25 +216,25 @@ const MainPage = () => { - {t('reportReplay')} + {t('reportReplay')} - {t('reportTitle')} + {t('reportTitle')} - Options + Options - {t('settingsUser')} + {t('settingsUser')}
-- cgit v1.2.3