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/RedeemPointsModal.jsx

@@ -1,14 +1,6 @@
-import {
-  Box,
-  Button,
-  FormLabel,
-  IconButton,
-  Input,
-  Modal,
-  ModalDialog,
-  Typography,
-} from '@mui/joy'
+import { Box, Button, FormLabel, IconButton, Input, Typography } from '@mui/joy'
 import { useEffect, useState } from 'react'
+import FadeModal from '../../components/common/FadeModal'
 
 function RedeemPointsModal({ config }) {
   useEffect(() => {
@@ -20,71 +12,69 @@ function RedeemPointsModal({ config }) {
   const predefinedPoints = [1, 5, 10, 25]
 
   return (
-    <Modal open={config?.isOpen} onClose={config?.onClose}>
-      <ModalDialog>
-        <Typography level='h4' mb={1}>
-          Redeem Points
-        </Typography>
-        <FormLabel>
-          Points to Redeem ({config.available ? config.available : 0} points
-          available)
-        </FormLabel>
-        <Input
-          type='number'
-          value={points}
-          slotProps={{
-            input: { min: 0, max: config.available ? config.available : 0 },
-          }}
-          onChange={e => {
-            if (e.target.value > config.available) {
-              setPoints(config.available)
-              return
-            }
-            setPoints(e.target.value)
-          }}
-        />
-        <FormLabel>Or select from predefined points:</FormLabel>
-        <Box display='flex' justifyContent='space-evenly' mb={1}>
-          {predefinedPoints.map(point => (
-            <IconButton
-              variant='outlined'
-              disabled={points + point > config.available}
-              sx={{ borderRadius: '50%' }}
-              key={point}
-              onClick={() => {
-                const newPoints = points + point
-                if (newPoints > config.available) {
-                  setPoints(config.available)
-                  return
-                }
-                setPoints(newPoints)
-              }}
-            >
-              {point}
-            </IconButton>
-          ))}
-        </Box>
-
-        {/* 3 button save , cancel and delete */}
-        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
-          <Button
-            onClick={() =>
-              config.onSave({
-                points: Number(points),
-                userId: config.user.userId,
-              })
-            }
-            fullWidth
-            sx={{ mr: 1 }}
+    <FadeModal open={config?.isOpen} onClose={config?.onClose}>
+      <Typography level='h4' mb={1}>
+        Redeem Points
+      </Typography>
+      <FormLabel>
+        Points to Redeem ({config.available ? config.available : 0} points
+        available)
+      </FormLabel>
+      <Input
+        type='number'
+        value={points}
+        slotProps={{
+          input: { min: 0, max: config.available ? config.available : 0 },
+        }}
+        onChange={e => {
+          if (e.target.value > config.available) {
+            setPoints(config.available)
+            return
+          }
+          setPoints(e.target.value)
+        }}
+      />
+      <FormLabel>Or select from predefined points:</FormLabel>
+      <Box display='flex' justifyContent='space-evenly' mb={1}>
+        {predefinedPoints.map(point => (
+          <IconButton
+            variant='outlined'
+            disabled={points + point > config.available}
+            sx={{ borderRadius: '50%' }}
+            key={point}
+            onClick={() => {
+              const newPoints = points + point
+              if (newPoints > config.available) {
+                setPoints(config.available)
+                return
+              }
+              setPoints(newPoints)
+            }}
           >
-            Redeem
-          </Button>
-          <Button onClick={config.onClose} variant='outlined'>
-            Cancel
-          </Button>
-        </Box>
-      </ModalDialog>
-    </Modal>
+            {point}
+          </IconButton>
+        ))}
+      </Box>
+
+      {/* 3 button save , cancel and delete */}
+      <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+        <Button
+          onClick={() =>
+            config.onSave({
+              points: Number(points),
+              userId: config.user.userId,
+            })
+          }
+          fullWidth
+          sx={{ mr: 1 }}
+        >
+          Redeem
+        </Button>
+        <Button onClick={config.onClose} variant='outlined'>
+          Cancel
+        </Button>
+      </Box>
+    </FadeModal>
   )
 }
 export default RedeemPointsModal