Merge branch 'dev'

package.json

@@ -61,6 +61,7 @@
     "@tanstack/react-query": "^5.17.0",
     "aos": "^2.3.4",
     "browser-image-compression": "^2.0.2",
+    "caniuse-lite": "^1.0.30001769",
     "capacitor-plugin-safe-area": "^4.0.0",
     "chrono-node": "^2.7.7",
     "dotenv": "^16.4.5",
@@ -95,7 +96,7 @@
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
-    "baseline-browser-mapping": "^2.9.16",
+    "baseline-browser-mapping": "^2.9.19",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",

src/views/Authorization/MFAVerificationModal.jsx

@@ -70,14 +70,17 @@ const MFAVerificationModal = ({
   }
 
   return (
-    <ResponsiveModal open={open} onClose={handleClose} size='sm'>
+    <ResponsiveModal
+      open={open}
+      onClose={handleClose}
+      size='lg'
+      fullWidth={true}
+      title='Two-Factor Authentication'
+    >
       <ModalClose />
 
       <Box className='mb-4 text-center'>
         <Security sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
-        <Typography level='h4' sx={{ mb: 1 }}>
-          Two-Factor Authentication
-        </Typography>
         <Typography level='body-md' sx={{ color: 'text.secondary' }}>
           Enter the verification code from your authenticator app
         </Typography>

src/views/Modals/Inputs/AcknowledgmentModal.jsx

@@ -64,15 +64,14 @@ function AcknowledgmentModal({ config }) {
     <ResponsiveModal
       open={config?.isOpen}
       onClose={config?.onClose}
-      size='md'
+      size='lg'
+      fullWidth={true}
       unmountDelay={250}
+      title={config?.title}
     >
       <Box
         sx={{ p: 2, minWidth: { xs: '100%', sm: '400px' }, maxWidth: '500px' }}
       >
-        <Typography level='h4' mb={2} textAlign='center'>
-          {config?.title}
-        </Typography>
 
         <Typography
           level='body-md'

src/views/Modals/Inputs/BackupRestoreModal.jsx

@@ -317,8 +317,10 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
     <ResponsiveModal
       open={isOpen}
       onClose={handleClose}
-      size='md'
+      size='lg'
+      fullWidth={true}
       unmountDelay={250}
+      title='🔄 Backup & Restore'
     >
       {loading ? (
         <Box
@@ -333,25 +335,19 @@ function BackupRestoreModal({ isOpen, onClose, showNotification }) {
           </Typography>
         </Box>
       ) : (
-        <>
+        <Tabs
-          <Typography level='h4' mb={3}>
+          value={activeTab}
-            🔄 Backup & Restore
+          onChange={(event, newValue) => setActiveTab(newValue)}
-          </Typography>
+        >
+          <TabList>
+            <Tab>Create Backup</Tab>
+            <Tab>Restore Backup</Tab>
+          </TabList>
 
-          <Tabs
+          <TabPanel value={0}>{renderBackupTab()}</TabPanel>
-            value={activeTab}
-            onChange={(event, newValue) => setActiveTab(newValue)}
-          >
-            <TabList>
-              <Tab>Create Backup</Tab>
-              <Tab>Restore Backup</Tab>
-            </TabList>
 
-            <TabPanel value={0}>{renderBackupTab()}</TabPanel>
+          <TabPanel value={1}>{renderRestoreTab()}</TabPanel>
-
+        </Tabs>
-            <TabPanel value={1}>{renderRestoreTab()}</TabPanel>
-          </Tabs>
-        </>
       )}
     </ResponsiveModal>
   )

src/views/Modals/Inputs/CreateThingModal.jsx

@@ -1,13 +1,13 @@
 import {
-  Box,
+    Box,
-  Button,
+    Button,
-  FormControl,
+    FormControl,
-  FormHelperText,
+    FormHelperText,
-  Input,
+    Input,
-  Option,
+    Option,
-  Select,
+    Select,
-  Textarea,
+    Textarea,
-  Typography,
+    Typography,
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
@@ -60,10 +60,13 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography level='h4'>
+      open={isOpen}
-        {currentThing?.id ? 'Edit' : 'Create'} Thing
+      onClose={onClose}
-      </Typography>
+      size='lg'
+      fullWidth={true}
+      title={`${currentThing?.id ? 'Edit' : 'Create'} Thing`}
+    >
       <FormControl>
         <Typography>Name</Typography>
         <Textarea

src/views/Modals/Inputs/DateModal.jsx

@@ -72,8 +72,13 @@ function DateModal({ isOpen, onClose, onSave, current, title }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography variant='h4'>{title}</Typography>
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={title}
+    >
       <Input
         sx={{ mt: 3 }}
         type='date'

src/views/Modals/Inputs/EditThingState.jsx

@@ -1,10 +1,10 @@
 import {
-  Box,
+    Box,
-  Button,
+    Button,
-  FormControl,
+    FormControl,
-  FormHelperText,
+    FormHelperText,
-  Input,
+    Input,
-  Typography,
+    Typography,
 } from '@mui/joy'
 import { useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
@@ -40,9 +40,13 @@ function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography level='h4'>Update state</Typography>
+      open={isOpen}
-
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title='Update state'
+    >
       <FormControl>
         <Typography>Value</Typography>
         <Input

src/views/Modals/Inputs/IconPickerModal.jsx

@@ -1,11 +1,11 @@
 import {
-  Avatar,
+    Avatar,
-  Box,
+    Box,
-  Button,
+    Button,
-  FormControl,
+    FormControl,
-  FormLabel,
+    FormLabel,
-  Grid,
+    Grid,
-  Typography,
+    Typography,
 } from '@mui/joy'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 import { getTextColorFromBackgroundColor } from '../../../utils/Colors'
@@ -29,12 +29,11 @@ const IconPickerModal = ({
     <ResponsiveModal
       open={isOpen}
       onClose={onClose}
-      size='sm'
+      size='lg'
+      fullWidth={true}
       unmountDelay={250}
+      title='Choose Project Icon'
     >
-      <Typography level='h4' mb={2}>
-        Choose Project Icon
-      </Typography>
 
       <FormControl>
         <FormLabel>Available Icons</FormLabel>

src/views/Modals/Inputs/LabelModal.jsx

@@ -91,75 +91,80 @@ function LabelModal({ isOpen, onClose, label }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography level='title-md' mb={1}>
+      open={isOpen}
-        {label ? 'Edit Label' : 'Add Label'}
+      onClose={onClose}
-      </Typography>
+      size='lg'
+      fullWidth={true}
+      title={label ? 'Edit Label' : 'Add Label'}
+      footer={
+        <Box display='flex' justifyContent='space-around' mt={1}>
+          <Button size='lg' onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+            {label ? 'Save Changes' : 'Add Label'}
+          </Button>
+          <Button size='lg' onClick={onClose} variant='outlined'>
+            Cancel
+          </Button>
+        </Box>
+      }
+    >
+      <Box>
+        <FormControl>
+          <Typography gutterBottom level='body-sm' alignSelf='start'>
+            Name
+          </Typography>
+          <Input
+            fullWidth
+            id='labelName'
+            value={labelName}
+            onChange={e => setLabelName(e.target.value)}
+          />
+        </FormControl>
 
-      <FormControl>
+        <FormControl>
-        <Typography gutterBottom level='body-sm' alignSelf='start'>
+          <Typography gutterBottom level='body-sm' alignSelf='start'>
-          Name
+            Color
-        </Typography>
+          </Typography>
-        <Input
+          <Select
-          fullWidth
+            value={color}
-          id='labelName'
+            onChange={(e, value) => value && setColor(value)}
-          value={labelName}
+            renderValue={selected => (
-          onChange={e => setLabelName(e.target.value)}
+              <Typography
-        />
+                startDecorator={
-      </FormControl>
+                  <Box
+                    className='size-4'
+                    borderRadius={10}
+                    sx={{ background: selected.value }}
+                  />
+                }
+              >
+                {selected.label}
+              </Typography>
+            )}
+          >
+            {LABEL_COLORS.map(val => (
+              <Option key={val.value} value={val.value}>
+                <Box className='flex items-center justify-between'>
+                  <Box
+                    width={20}
+                    height={20}
+                    borderRadius={10}
+                    sx={{ background: val.value }}
+                  />
+                  <Typography sx={{ ml: 1 }} variant='caption'>
+                    {val.name}
+                  </Typography>
+                </Box>
+              </Option>
+            ))}
+          </Select>
+        </FormControl>
 
-      <FormControl>
+        {error && (
-        <Typography gutterBottom level='body-sm' alignSelf='start'>
+          <Typography color='warning' level='body-sm'>
-          Color
+            {error}
-        </Typography>
+          </Typography>
-        <Select
+        )}
-          value={color}
-          onChange={(e, value) => value && setColor(value)}
-          renderValue={selected => (
-            <Typography
-              startDecorator={
-                <Box
-                  className='size-4'
-                  borderRadius={10}
-                  sx={{ background: selected.value }}
-                />
-              }
-            >
-              {selected.label}
-            </Typography>
-          )}
-        >
-          {LABEL_COLORS.map(val => (
-            <Option key={val.value} value={val.value}>
-              <Box className='flex items-center justify-between'>
-                <Box
-                  width={20}
-                  height={20}
-                  borderRadius={10}
-                  sx={{ background: val.value }}
-                />
-                <Typography sx={{ ml: 1 }} variant='caption'>
-                  {val.name}
-                </Typography>
-              </Box>
-            </Option>
-          ))}
-        </Select>
-      </FormControl>
-
-      {error && (
-        <Typography color='warning' level='body-sm'>
-          {error}
-        </Typography>
-      )}
-
-      <Box display='flex' justifyContent='space-around' mt={1}>
-        <Button size='lg' onClick={handleSave} fullWidth sx={{ mr: 1 }}>
-          {label ? 'Save Changes' : 'Add Label'}
-        </Button>
-        <Button size='lg' onClick={onClose} variant='outlined'>
-          Cancel
-        </Button>
       </Box>
     </ResponsiveModal>
   )

src/views/Modals/Inputs/NudgeModal.jsx

@@ -1,12 +1,12 @@
 import {
-  Alert,
+    Alert,
-  Box,
+    Box,
-  Button,
+    Button,
-  FormControl,
+    FormControl,
-  FormLabel,
+    FormLabel,
-  Switch,
+    Switch,
-  Textarea,
+    Textarea,
-  Typography,
+    Typography,
 } from '@mui/joy'
 import { useCallback, useEffect, useState } from 'react'
 import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'
@@ -104,13 +104,11 @@ function NudgeModal({ config }) {
     <ResponsiveModal
       open={config?.isOpen}
       onClose={config?.onClose}
-      size='md'
+      size='lg'
+      fullWidth={true}
       unmountDelay={250}
+      title='Send Nudge'
     >
-      <Typography level='h4' mb={2}>
-        Send Nudge
-      </Typography>
-
       <Typography level='body-md' mb={2}>
         Send a gentle reminder to the assignee about this task. You can
         customize the message and choose who gets notified.

src/views/Modals/Inputs/PasswordChangeModal.jsx

@@ -1,10 +1,10 @@
 import {
-  Box,
+    Box,
-  Button,
+    Button,
-  FormControl,
+    FormControl,
-  FormHelperText,
+    FormHelperText,
-  Input,
+    Input,
-  Typography,
+    Typography,
 } from '@mui/joy'
 import React, { useEffect } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
@@ -41,11 +41,13 @@ function PassowrdChangeModal({ isOpen, onClose }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography level='h4' mb={1}>
+      open={isOpen}
-        Change Password
+      onClose={onClose}
-      </Typography>
+      size='lg'
-
+      fullWidth={true}
+      title='Change Password'
+    >
       <Typography level='body-md' gutterBottom>
         Please enter your new password.
       </Typography>

src/views/Modals/Inputs/SelectModal.jsx

@@ -1,4 +1,4 @@
-import { Box, Button, Option, Select, Typography } from '@mui/joy'
+import { Box, Button, Option, Select } from '@mui/joy'
 import React from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 
@@ -20,8 +20,13 @@ function SelectModal({
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography variant='h4'>{title}</Typography>
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={title}
+    >
       <Select placeholder={placeholder}>
         {options.map((item, index) => (
           <Option

src/views/Modals/Inputs/TextModal.jsx

@@ -1,4 +1,4 @@
-import { Box, Button, Textarea, Typography } from '@mui/joy'
+import { Box, Button, Textarea } from '@mui/joy'
 import { useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 
@@ -21,8 +21,13 @@ function TextModal({
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
+    <ResponsiveModal
-      <Typography variant='h4'>{title}</Typography>
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={title}
+    >
       <Textarea
         placeholder='Type in here…'
         value={text}

src/views/Modals/Inputs/UserDeletionModal.jsx

@@ -344,7 +344,8 @@ function UserDeletionModal({ isOpen, onClose, userProfile }) {
     <ResponsiveModal
       open={isOpen}
       onClose={() => handleClose(false)}
-      size='md'
+      size='lg'
+      fullWidth={true}
       title='Delete Account'
     >
       {loading && step === 1 ? (

src/views/Modals/Inputs/UserModal.jsx

@@ -5,10 +5,13 @@ const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
   const { ResponsiveModal } = useResponsiveModal()
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose} size='md' fullWidth>
+    <ResponsiveModal
-      <Typography level='h4' sx={{ mb: 2 }}>
+      open={isOpen}
-        Select User
+      onClose={onClose}
-      </Typography>
+      size='lg'
+      fullWidth={true}
+      title='Select User'
+    >
       <List sx={{ mb: 2 }}>
         {performers.map(user => (
           <ListItem

src/views/components/NavBar.jsx

@@ -127,6 +127,44 @@ const NavBar = () => {
       }
     })
   }, [])
+
+  const getMenuIcon = () => {
+    const menuRounded = (
+      <IconButton size='md' variant='plain' onClick={() => setDrawerOpen(true)}>
+        <MenuRounded />
+      </IconButton>
+    )
+    if (!Capacitor.isNativePlatform()) {
+      return menuRounded
+    }
+    if (
+      ['/chores', '/'].includes(location.pathname) &&
+      !searchParams.get('filter')
+    ) {
+      return menuRounded
+    }
+    return (
+      <IconButton
+        size='md'
+        variant='plain'
+        onClick={() => {
+          if (location.pathname === '/chores') {
+            // Navigate back to calendar view
+            navigate('/')
+          } else {
+            // Default back navigation
+            navigate(-1)
+          }
+        }}
+        title={
+          searchParams.get('from') === 'calendar' ? 'Back to Calendar' : 'Back'
+        }
+      >
+        <ArrowBack />
+      </IconButton>
+    )
+  }
+
   if (
     [
       '/signup',
@@ -172,37 +210,7 @@ const NavBar = () => {
         backgroundColor: 'var(--joy-palette-background-body)',
       }}
     >
-      {['/chores', '/'].includes(location.pathname) &&
+      {getMenuIcon()}
-      !searchParams.get('filter') ? (
-        <IconButton
-          size='md'
-          variant='plain'
-          onClick={() => setDrawerOpen(true)}
-        >
-          <MenuRounded />
-        </IconButton>
-      ) : (
-        <IconButton
-          size='md'
-          variant='plain'
-          onClick={() => {
-            if (location.pathname === '/chores') {
-              // Navigate back to calendar view
-              navigate('/')
-            } else {
-              // Default back navigation
-              navigate(-1)
-            }
-          }}
-          title={
-            searchParams.get('from') === 'calendar'
-              ? 'Back to Calendar'
-              : 'Back'
-          }
-        >
-          <ArrowBack />
-        </IconButton>
-      )}
       <Box className='flex-1' />
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <UserProfileAvatar />