From 492e2f2e7eab05e201d3853ef42afac379857396 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 8 Feb 2026 01:39:33 -0500
Subject: [PATCH] refactor: update modal components to use larger size and full
 width with titles

---
 .../Modals/Inputs/AcknowledgmentModal.jsx     |  7 ++--
 .../Modals/Inputs/BackupRestoreModal.jsx      | 32 ++++++++-----------
 src/views/Modals/Inputs/CreateThingModal.jsx  | 11 ++++---
 src/views/Modals/Inputs/DateModal.jsx         |  9 ++++--
 src/views/Modals/Inputs/EditThingState.jsx    | 10 ++++--
 src/views/Modals/Inputs/IconPickerModal.jsx   |  7 ++--
 src/views/Modals/Inputs/NudgeModal.jsx        |  8 ++---
 .../Modals/Inputs/PasswordChangeModal.jsx     | 12 ++++---
 src/views/Modals/Inputs/SelectModal.jsx       |  9 ++++--
 src/views/Modals/Inputs/TextModal.jsx         |  9 ++++--
 src/views/Modals/Inputs/UserDeletionModal.jsx |  3 +-
 src/views/Modals/Inputs/UserModal.jsx         | 11 ++++---
 12 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/src/views/Modals/Inputs/AcknowledgmentModal.jsx b/src/views/Modals/Inputs/AcknowledgmentModal.jsx
index 234483e..36b2ab7 100644
--- a/src/views/Modals/Inputs/AcknowledgmentModal.jsx
+++ b/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'
diff --git a/src/views/Modals/Inputs/BackupRestoreModal.jsx b/src/views/Modals/Inputs/BackupRestoreModal.jsx
index 445157f..a8f88be 100644
--- a/src/views/Modals/Inputs/BackupRestoreModal.jsx
+++ b/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>
       ) : (
-        <>
-          <Typography level='h4' mb={3}>
-            🔄 Backup & Restore
-          </Typography>
+        <Tabs
+          value={activeTab}
+          onChange={(event, newValue) => setActiveTab(newValue)}
+        >
+          <TabList>
+            <Tab>Create Backup</Tab>
+            <Tab>Restore Backup</Tab>
+          </TabList>
 
-          <Tabs
-            value={activeTab}
-            onChange={(event, newValue) => setActiveTab(newValue)}
-          >
-            <TabList>
-              <Tab>Create Backup</Tab>
-              <Tab>Restore Backup</Tab>
-            </TabList>
+          <TabPanel value={0}>{renderBackupTab()}</TabPanel>
 
-            <TabPanel value={0}>{renderBackupTab()}</TabPanel>
-
-            <TabPanel value={1}>{renderRestoreTab()}</TabPanel>
-          </Tabs>
-        </>
+          <TabPanel value={1}>{renderRestoreTab()}</TabPanel>
+        </Tabs>
       )}
     </ResponsiveModal>
   )
diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx
index 9dbb041..97996e1 100644
--- a/src/views/Modals/Inputs/CreateThingModal.jsx
+++ b/src/views/Modals/Inputs/CreateThingModal.jsx
@@ -60,10 +60,13 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
-      <Typography level='h4'>
-        {currentThing?.id ? 'Edit' : 'Create'} Thing
-      </Typography>
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={`${currentThing?.id ? 'Edit' : 'Create'} Thing`}
+    >
       <FormControl>
         <Typography>Name</Typography>
         <Textarea
diff --git a/src/views/Modals/Inputs/DateModal.jsx b/src/views/Modals/Inputs/DateModal.jsx
index 7f4bb98..da5ce7c 100644
--- a/src/views/Modals/Inputs/DateModal.jsx
+++ b/src/views/Modals/Inputs/DateModal.jsx
@@ -72,8 +72,13 @@ function DateModal({ isOpen, onClose, onSave, current, title }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
-      <Typography variant='h4'>{title}</Typography>
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={title}
+    >
       <Input
         sx={{ mt: 3 }}
         type='date'
diff --git a/src/views/Modals/Inputs/EditThingState.jsx b/src/views/Modals/Inputs/EditThingState.jsx
index 2ddd98a..388c2d0 100644
--- a/src/views/Modals/Inputs/EditThingState.jsx
+++ b/src/views/Modals/Inputs/EditThingState.jsx
@@ -40,9 +40,13 @@ function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
-      <Typography level='h4'>Update state</Typography>
-
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title='Update state'
+    >
       <FormControl>
         <Typography>Value</Typography>
         <Input
diff --git a/src/views/Modals/Inputs/IconPickerModal.jsx b/src/views/Modals/Inputs/IconPickerModal.jsx
index f805f7b..7e748a8 100644
--- a/src/views/Modals/Inputs/IconPickerModal.jsx
+++ b/src/views/Modals/Inputs/IconPickerModal.jsx
@@ -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>
diff --git a/src/views/Modals/Inputs/NudgeModal.jsx b/src/views/Modals/Inputs/NudgeModal.jsx
index b75e9a8..ce7f50b 100644
--- a/src/views/Modals/Inputs/NudgeModal.jsx
+++ b/src/views/Modals/Inputs/NudgeModal.jsx
@@ -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.
diff --git a/src/views/Modals/Inputs/PasswordChangeModal.jsx b/src/views/Modals/Inputs/PasswordChangeModal.jsx
index ae323ab..0bdfbbd 100644
--- a/src/views/Modals/Inputs/PasswordChangeModal.jsx
+++ b/src/views/Modals/Inputs/PasswordChangeModal.jsx
@@ -41,11 +41,13 @@ function PassowrdChangeModal({ isOpen, onClose }) {
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
-      <Typography level='h4' mb={1}>
-        Change Password
-      </Typography>
-
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title='Change Password'
+    >
       <Typography level='body-md' gutterBottom>
         Please enter your new password.
       </Typography>
diff --git a/src/views/Modals/Inputs/SelectModal.jsx b/src/views/Modals/Inputs/SelectModal.jsx
index b4f7267..d1396fd 100644
--- a/src/views/Modals/Inputs/SelectModal.jsx
+++ b/src/views/Modals/Inputs/SelectModal.jsx
@@ -20,8 +20,13 @@ function SelectModal({
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
-      <Typography variant='h4'>{title}</Typography>
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={title}
+    >
       <Select placeholder={placeholder}>
         {options.map((item, index) => (
           <Option
diff --git a/src/views/Modals/Inputs/TextModal.jsx b/src/views/Modals/Inputs/TextModal.jsx
index a86d432..66e8cd2 100644
--- a/src/views/Modals/Inputs/TextModal.jsx
+++ b/src/views/Modals/Inputs/TextModal.jsx
@@ -21,8 +21,13 @@ function TextModal({
   }
 
   return (
-    <ResponsiveModal open={isOpen} onClose={onClose}>
-      <Typography variant='h4'>{title}</Typography>
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title={title}
+    >
       <Textarea
         placeholder='Type in here…'
         value={text}
diff --git a/src/views/Modals/Inputs/UserDeletionModal.jsx b/src/views/Modals/Inputs/UserDeletionModal.jsx
index b568a6d..2778a51 100644
--- a/src/views/Modals/Inputs/UserDeletionModal.jsx
+++ b/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 ? (
diff --git a/src/views/Modals/Inputs/UserModal.jsx b/src/views/Modals/Inputs/UserModal.jsx
index f7ee9d8..9b6e201 100644
--- a/src/views/Modals/Inputs/UserModal.jsx
+++ b/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>
-      <Typography level='h4' sx={{ mb: 2 }}>
-        Select User
-      </Typography>
+    <ResponsiveModal
+      open={isOpen}
+      onClose={onClose}
+      size='lg'
+      fullWidth={true}
+      title='Select User'
+    >
       <List sx={{ mb: 2 }}>
         {performers.map(user => (
           <ListItem