Merge pull request #160 from CodeDead/feature/mobile-enhancements

feat: removed tips on mobile, improved mobile detection and reduced n…

Author: CodeDead

src/components/App/index.jsx

@@ -7,6 +7,7 @@ import Snackbar from '@mui/material/Snackbar';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { platform } from '@tauri-apps/plugin-os';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import packageJson from '../../../package.json';
@@ -47,20 +48,18 @@ const App = () => {
     checkedForUpdates,
   } = state;
 
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [snackOpen, setSnackOpen] = useState(
-    !window.__TAURI__ && window.innerWidth > 600,
-  );
-  const language = state.languages[languageIndex];
-
   const color = ThemeSelector(themeIndex);
-
   const theme = createTheme({
     palette: {
       primary: color,
       mode: themeType,
     },
   });
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [snackOpen, setSnackOpen] = useState(!window.__TAURI__ && !isMobile);
+  const language = state.languages[languageIndex];
 
   /**
    * Check for updates

src/components/PasswordTips/index.jsx

@@ -10,13 +10,17 @@ import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { MainContext } from '../../contexts/MainContextProvider';
 
 const getRandomTipIndex = (length) =>
   length > 0 ? Math.floor(Math.random() * length) : 0;
 
 const PasswordTips = () => {
   const [state] = useContext(MainContext);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const { languageIndex, tips } = state;
   const language = state.languages[languageIndex];
@@ -75,7 +79,7 @@ const PasswordTips = () => {
   };
 
   return (
-    <Collapse in={tips && tipsOpen}>
+    <Collapse in={tips && tipsOpen && !isMobile}>
       <Alert
         severity="info"
         action={

src/routes/Generate/index.jsx

@@ -8,6 +8,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Paper from '@mui/material/Paper';
 import Select from '@mui/material/Select';
 import Snackbar from '@mui/material/Snackbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { DataGrid } from '@mui/x-data-grid';
 import { invoke } from '@tauri-apps/api/core';
 import { save } from '@tauri-apps/plugin-dialog';
@@ -61,6 +63,8 @@ const Generate = () => {
 
   const { languageIndex, loading, sortByStrength } = state1;
   const language = state1.languages[languageIndex];
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const [exportType, setExportType] = useState('application/json');
   const [snackOpen, setSnackOpen] = useState(false);
@@ -307,6 +311,14 @@ const Generate = () => {
     <Container maxWidth="xl">
       <Paper style={{ height: '70vh', width: '100%' }}>
         <DataGrid
+          initialState={{
+            columns: {
+              columnVisibilityModel: {
+                length: !isMobile,
+                strength: !isMobile,
+              },
+            },
+          }}
           rows={passwordRows}
           columns={columns}
           pageSize={50}

src/routes/Home/index.jsx

@@ -11,8 +11,10 @@ import Container from '@mui/material/Container';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import Grid from '@mui/material/Grid';
+import { useTheme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { useNavigate } from 'react-router-dom';
 import LoadingBar from '../../components/LoadingBar';
 import PasswordTips from '../../components/PasswordTips';
@@ -89,6 +91,9 @@ const Home = () => {
     min > max ||
     max < min;
 
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
   /**
    * Generate passwords
    */
@@ -307,7 +312,7 @@ const Home = () => {
       </Card>
       <Accordion
         sx={{ mt: 2 }}
-        defaultExpanded={!window.__TAURI__ && window.innerWidth > 600}
+        defaultExpanded={!window.__TAURI__ && !isMobile}
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}