From 86cfc10741a621c85cf9ab381d3109b4388a1b40 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 8 Feb 2026 01:40:33 -0500
Subject: [PATCH] chore: update dependencies in package.json and refactor
 import statements in modal components

---
 package.json                                   |  3 ++-
 .../Authorization/MFAVerificationModal.jsx     | 11 +++++++----
 src/views/Modals/Inputs/CreateThingModal.jsx   | 18 +++++++++---------
 src/views/Modals/Inputs/EditThingState.jsx     | 12 ++++++------
 src/views/Modals/Inputs/IconPickerModal.jsx    | 14 +++++++-------
 src/views/Modals/Inputs/NudgeModal.jsx         | 16 ++++++++--------
 .../Modals/Inputs/PasswordChangeModal.jsx      | 12 ++++++------
 src/views/Modals/Inputs/SelectModal.jsx        |  2 +-
 src/views/Modals/Inputs/TextModal.jsx          |  2 +-
 9 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index f7a1a7e..2b8e621 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/Authorization/MFAVerificationModal.jsx b/src/views/Authorization/MFAVerificationModal.jsx
index 4586fb3..6d5d41b 100644
--- a/src/views/Authorization/MFAVerificationModal.jsx
+++ b/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>
diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx
index 97996e1..164cc4b 100644
--- a/src/views/Modals/Inputs/CreateThingModal.jsx
+++ b/src/views/Modals/Inputs/CreateThingModal.jsx
@@ -1,13 +1,13 @@
 import {
-  Box,
-  Button,
-  FormControl,
-  FormHelperText,
-  Input,
-  Option,
-  Select,
-  Textarea,
-  Typography,
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Option,
+    Select,
+    Textarea,
+    Typography,
 } from '@mui/joy'
 import { useEffect, useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
diff --git a/src/views/Modals/Inputs/EditThingState.jsx b/src/views/Modals/Inputs/EditThingState.jsx
index 388c2d0..2871b44 100644
--- a/src/views/Modals/Inputs/EditThingState.jsx
+++ b/src/views/Modals/Inputs/EditThingState.jsx
@@ -1,10 +1,10 @@
 import {
-  Box,
-  Button,
-  FormControl,
-  FormHelperText,
-  Input,
-  Typography,
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Typography,
 } from '@mui/joy'
 import { useState } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
diff --git a/src/views/Modals/Inputs/IconPickerModal.jsx b/src/views/Modals/Inputs/IconPickerModal.jsx
index 7e748a8..2a32844 100644
--- a/src/views/Modals/Inputs/IconPickerModal.jsx
+++ b/src/views/Modals/Inputs/IconPickerModal.jsx
@@ -1,11 +1,11 @@
 import {
-  Avatar,
-  Box,
-  Button,
-  FormControl,
-  FormLabel,
-  Grid,
-  Typography,
+    Avatar,
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Grid,
+    Typography,
 } from '@mui/joy'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 import { getTextColorFromBackgroundColor } from '../../../utils/Colors'
diff --git a/src/views/Modals/Inputs/NudgeModal.jsx b/src/views/Modals/Inputs/NudgeModal.jsx
index ce7f50b..75babf0 100644
--- a/src/views/Modals/Inputs/NudgeModal.jsx
+++ b/src/views/Modals/Inputs/NudgeModal.jsx
@@ -1,12 +1,12 @@
 import {
-  Alert,
-  Box,
-  Button,
-  FormControl,
-  FormLabel,
-  Switch,
-  Textarea,
-  Typography,
+    Alert,
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Switch,
+    Textarea,
+    Typography,
 } from '@mui/joy'
 import { useCallback, useEffect, useState } from 'react'
 import KeyboardShortcutHint from '../../../components/common/KeyboardShortcutHint'
diff --git a/src/views/Modals/Inputs/PasswordChangeModal.jsx b/src/views/Modals/Inputs/PasswordChangeModal.jsx
index 0bdfbbd..f75c7ab 100644
--- a/src/views/Modals/Inputs/PasswordChangeModal.jsx
+++ b/src/views/Modals/Inputs/PasswordChangeModal.jsx
@@ -1,10 +1,10 @@
 import {
-  Box,
-  Button,
-  FormControl,
-  FormHelperText,
-  Input,
-  Typography,
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    Input,
+    Typography,
 } from '@mui/joy'
 import React, { useEffect } from 'react'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
diff --git a/src/views/Modals/Inputs/SelectModal.jsx b/src/views/Modals/Inputs/SelectModal.jsx
index d1396fd..ed7a041 100644
--- a/src/views/Modals/Inputs/SelectModal.jsx
+++ b/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'
 
diff --git a/src/views/Modals/Inputs/TextModal.jsx b/src/views/Modals/Inputs/TextModal.jsx
index 66e8cd2..fac5558 100644
--- a/src/views/Modals/Inputs/TextModal.jsx
+++ b/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'