refactor: update modal components to use larger size and full width with titles

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>
       ) : (
-        <>
-          <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>
   )

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

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'

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

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>

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.

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>

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

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}

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>
-      <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