From 3dcc6be877f8f43bd9c7e1eee1ad6d7950b435a5 Mon Sep 17 00:00:00 2001
From: Iván Ávalos <avalos@disroot.org>
Date: Wed, 8 Dec 2021 22:24:07 -0600
Subject: Media query terms changed

---
 modern/src/MainPage.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'modern/src')

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 13cc1fc..aee5a3c 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -98,9 +98,10 @@ const MainPage = () => {
   const dispatch = useDispatch();
   const t = useTranslation();
 
-  const isComputer = useMediaQuery(theme.breakpoints.down('sm'));
+  const isComputer = useMediaQuery(theme.breakpoints.down('lg'));
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
-  const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
+  const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
+  const isWide = useMediaQuery(theme.breakpoints.up('sm'));
 
   const [deviceName, setDeviceName] = useState('');
   const collapsed = useSelector((state) => state.ui.collapsed);
@@ -114,12 +115,12 @@ const MainPage = () => {
     dispatch(devicesActions.setFilter(text));
   }
 
-  useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
+  useEffect(() => uiActions.setCollapsed(isPhone), [isPhone]);
 
   return (
     <div className={classes.root}>
       <Map>
-        {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
+        {isWide && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
         <CurrentLocationMap />
         <GeofenceMap />
         <AccuracyMap />
@@ -138,10 +139,10 @@ const MainPage = () => {
         <ListIcon />
         <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
       </Button>
-      <Paper square elevation={3} className={`${classes.sidebar} ${(isComputer && collapsed) && classes.sidebarCollapsed}`}>
+      <Paper square elevation={3} className={`${classes.sidebar} ${(!isWide && collapsed) && classes.sidebarCollapsed}`}>
         <Paper className={classes.paper} square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
-            {isTablet && (
+            {isPhone && (
             <IconButton onClick={handleClose}>
               <ArrowBackIcon />
             </IconButton>
-- 
cgit v1.2.3