streamline EditHistoryModal layout and improve button placement

src/views/Modals/EditHistoryModal.jsx

@@ -1,4 +1,4 @@
-import { Box, Button, FormLabel, Input, Typography } from '@mui/joy'
+import { Box, Button, FormLabel, Input } from '@mui/joy'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
 
@@ -39,10 +39,35 @@ function EditHistoryModal({ config, historyRecord }) {
       onClose={config?.onClose}
       size='lg'
       // fullWidth={true}
+      title='Edit History'
+      footer={
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button
+            size='lg'
+            onClick={() =>
+              config.onSave({
+                id: historyRecord.id,
+                performedAt: moment(completedDate).toISOString(),
+                dueDate: moment(dueDate).toISOString(),
+                notes,
+              })
+            }
+            fullWidth
+            sx={{ mr: 1 }}
+          >
+            Save
+          </Button>
+          <Button
+            fullWidth
+            size='lg'
+            onClick={config.onClose}
+            variant='outlined'
+          >
+            Cancel
+          </Button>
+        </Box>
+      }
     >
-      <Typography level='h4' mb={1}>
-        Edit History
-      </Typography>
       <FormLabel>Due Date</FormLabel>
       <Input
         type='datetime-local'
@@ -50,6 +75,7 @@ function EditHistoryModal({ config, historyRecord }) {
         onChange={e => {
           setDueDate(e.target.value)
         }}
+        sx={{ mb: 2 }}
       />
       <FormLabel>Completed Date</FormLabel>
       <Input
@@ -58,6 +84,7 @@ function EditHistoryModal({ config, historyRecord }) {
         onChange={e => {
           setCompletedDate(e.target.value)
         }}
+        sx={{ mb: 2 }}
       />
       <FormLabel>Note</FormLabel>
       <Input
@@ -75,31 +102,10 @@ function EditHistoryModal({ config, historyRecord }) {
         }}
         size='md'
         sx={{
-          mb: 1,
+          mb: 2,
         }}
       />
 
-      {/* 3 button save , cancel and delete */}
-      <Box display={'flex'} justifyContent={'space-around'} mt={1}>
-        <Button
-          size='lg'
-          onClick={() =>
-            config.onSave({
-              id: historyRecord.id,
-              performedAt: moment(completedDate).toISOString(),
-              dueDate: moment(dueDate).toISOString(),
-              notes,
-            })
-          }
-          fullWidth
-          sx={{ mr: 1 }}
-        >
-          Save
-        </Button>
-        <Button fullWidth size='lg' onClick={config.onClose} variant='outlined'>
-          Cancel
-        </Button>
-      </Box>
       <ConfirmationModal
         config={{
           isOpen: isDeleteModalOpen,