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/Inputs/SelectModal.jsx

@@ -1,15 +1,16 @@
-import {
-  Box,
-  Button,
-  Modal,
-  ModalDialog,
-  Option,
-  Select,
-  Typography,
-} from '@mui/joy'
+import { Box, Button, Option, Select, Typography } from '@mui/joy'
 import React from 'react'
+import FadeModal from '../../../components/common/FadeModal'
 
-function SelectModal({ isOpen, onClose, onSave, options, title, displayKey,placeholder }) {
+function SelectModal({
+  isOpen,
+  onClose,
+  onSave,
+  options,
+  title,
+  displayKey,
+  placeholder,
+}) {
   const [selected, setSelected] = React.useState(null)
   const handleSave = () => {
     onSave(options.find(item => item.id === selected))
@@ -17,33 +18,31 @@ function SelectModal({ isOpen, onClose, onSave, options, title, displayKey,place
   }
 
   return (
-    <Modal open={isOpen} onClose={onClose}>
-      <ModalDialog>
-        <Typography variant='h4'>{title}</Typography>
-        <Select placeholder={placeholder}>
-          {options.map((item, index) => (
-            <Option
-              value={item.id}
-              key={item[displayKey]}
-              onClick={() => {
-                setSelected(item.id)
-              }}
-            >
-              {item[displayKey]}
-            </Option>
-          ))}
-        </Select>
+    <FadeModal open={isOpen} onClose={onClose}>
+      <Typography variant='h4'>{title}</Typography>
+      <Select placeholder={placeholder}>
+        {options.map((item, index) => (
+          <Option
+            value={item.id}
+            key={item[displayKey]}
+            onClick={() => {
+              setSelected(item.id)
+            }}
+          >
+            {item[displayKey]}
+          </Option>
+        ))}
+      </Select>
 
-        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
-          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
-            Save
-          </Button>
-          <Button onClick={onClose} variant='outlined'>
-            Cancel
-          </Button>
-        </Box>
-      </ModalDialog>
-    </Modal>
+      <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+        <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+          Save
+        </Button>
+        <Button onClick={onClose} variant='outlined'>
+          Cancel
+        </Button>
+      </Box>
+    </FadeModal>
   )
 }
 export default SelectModal