Refactor modals to use FadeModal component for consistent styling and improved user experience

- fix https://github.com/donetick/donetick/issues/222

- Replaced Modal and ModalDialog with FadeModal in LabelModal, PasswordChangeModal, SelectModal, TextModal, UserModal, WriteNFCModal, RedeemPointsModal, and AddTaskModal.
- Updated modal structure and layout to maintain functionality while enhancing visual consistency.
- Removed unused imports and commented-out code for cleaner codebase.

src/views/Modals/EditHistoryModal.jsx

@@ -1,14 +1,7 @@
-import {
-  Box,
-  Button,
-  FormLabel,
-  Input,
-  Modal,
-  ModalDialog,
-  Typography,
-} from '@mui/joy'
+import { Box, Button, FormLabel, Input, Typography } from '@mui/joy'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
+import FadeModal from '../../components/common/FadeModal'
 import ConfirmationModal from './Inputs/ConfirmationModal'
 
 function EditHistoryModal({ config, historyRecord }) {
@@ -29,93 +22,91 @@ function EditHistoryModal({ config, historyRecord }) {
   const [notes, setNotes] = useState(historyRecord.notes)
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   return (
-    <Modal open={config?.isOpen} onClose={config?.onClose}>
-      <ModalDialog>
-        <Typography level='h4' mb={1}>
-          Edit History
-        </Typography>
-        <FormLabel>Due Date</FormLabel>
-        <Input
-          type='datetime-local'
-          value={dueDate}
-          onChange={e => {
-            setDueDate(e.target.value)
-          }}
-        />
-        <FormLabel>Completed Date</FormLabel>
-        <Input
-          type='datetime-local'
-          value={completedDate}
-          onChange={e => {
-            setCompletedDate(e.target.value)
-          }}
-        />
-        <FormLabel>Note</FormLabel>
-        <Input
-          fullWidth
-          multiline
-          label='Additional Notes'
-          placeholder='Additional Notes'
-          value={notes}
-          onChange={e => {
-            if (e.target.value.trim() === '') {
-              setNotes(null)
-              return
-            }
-            setNotes(e.target.value)
-          }}
-          size='md'
-          sx={{
-            mb: 1,
-          }}
-        />
+    <FadeModal open={config?.isOpen} onClose={config?.onClose}>
+      <Typography level='h4' mb={1}>
+        Edit History
+      </Typography>
+      <FormLabel>Due Date</FormLabel>
+      <Input
+        type='datetime-local'
+        value={dueDate}
+        onChange={e => {
+          setDueDate(e.target.value)
+        }}
+      />
+      <FormLabel>Completed Date</FormLabel>
+      <Input
+        type='datetime-local'
+        value={completedDate}
+        onChange={e => {
+          setCompletedDate(e.target.value)
+        }}
+      />
+      <FormLabel>Note</FormLabel>
+      <Input
+        fullWidth
+        multiline
+        label='Additional Notes'
+        placeholder='Additional Notes'
+        value={notes}
+        onChange={e => {
+          if (e.target.value.trim() === '') {
+            setNotes(null)
+            return
+          }
+          setNotes(e.target.value)
+        }}
+        size='md'
+        sx={{
+          mb: 1,
+        }}
+      />
 
-        {/* 3 button save , cancel and delete */}
-        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
-          <Button
-            onClick={() =>
-              config.onSave({
-                id: historyRecord.id,
-                performedAt: moment(completedDate).toISOString(),
-                dueDate: moment(dueDate).toISOString(),
-                notes,
-              })
-            }
-            fullWidth
-            sx={{ mr: 1 }}
-          >
-            Save
-          </Button>
-          <Button onClick={config.onClose} variant='outlined'>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              setIsDeleteModalOpen(true)
-            }}
-            variant='outlined'
-            color='danger'
-          >
-            Delete
-          </Button>
-        </Box>
-        <ConfirmationModal
-          config={{
-            isOpen: isDeleteModalOpen,
-            onClose: isConfirm => {
-              if (isConfirm) {
-                config.onDelete(historyRecord.id)
-              }
-              setIsDeleteModalOpen(false)
-            },
-            title: 'Delete History',
-            message: 'Are you sure you want to delete this history?',
-            confirmText: 'Delete',
-            cancelText: 'Cancel',
+      {/* 3 button save , cancel and delete */}
+      <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+        <Button
+          onClick={() =>
+            config.onSave({
+              id: historyRecord.id,
+              performedAt: moment(completedDate).toISOString(),
+              dueDate: moment(dueDate).toISOString(),
+              notes,
+            })
+          }
+          fullWidth
+          sx={{ mr: 1 }}
+        >
+          Save
+        </Button>
+        <Button onClick={config.onClose} variant='outlined'>
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            setIsDeleteModalOpen(true)
           }}
-        />
-      </ModalDialog>
-    </Modal>
+          variant='outlined'
+          color='danger'
+        >
+          Delete
+        </Button>
+      </Box>
+      <ConfirmationModal
+        config={{
+          isOpen: isDeleteModalOpen,
+          onClose: isConfirm => {
+            if (isConfirm) {
+              config.onDelete(historyRecord.id)
+            }
+            setIsDeleteModalOpen(false)
+          },
+          title: 'Delete History',
+          message: 'Are you sure you want to delete this history?',
+          confirmText: 'Delete',
+          cancelText: 'Cancel',
+        }}
+      />
+    </FadeModal>
   )
 }
 export default EditHistoryModal