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

@@ -1,57 +1,44 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  List,
-  ListItem,
-  Modal,
-  ModalDialog,
-  ModalOverflow,
-  Typography,
-} from '@mui/joy'
+import { Avatar, Box, Button, List, ListItem, Typography } from '@mui/joy'
+import FadeModal from '../../../components/common/FadeModal'
 
 const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
   return (
-    <Modal open={isOpen} onClose={onClose}>
-      <ModalOverflow>
-        <ModalDialog size='md' sx={{ minWidth: 360 }}>
-          <Typography level='h4' sx={{ mb: 2 }}>
-            Select User
-          </Typography>
-          <List sx={{ mb: 2 }}>
-            {performers.map(user => (
-              <ListItem
-                key={user.id}
-                sx={{
-                  cursor: 'pointer',
-                  '&:hover': {
-                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                  },
-                }}
-                onClick={() => {
-                  onSelect(user)
-                  onClose()
-                }}
-              >
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                  <Avatar
-                    size='lg'
-                    src={user.image || user.avatar}
-                    alt={user.displayName || user.name}
-                  />
-                  <Typography>{user.displayName || user.name}</Typography>
-                </Box>
-              </ListItem>
-            ))}
-          </List>
-          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-            <Button variant='outlined' color='neutral' onClick={onClose}>
-              Cancel
-            </Button>
-          </Box>
-        </ModalDialog>
-      </ModalOverflow>
-    </Modal>
+    <FadeModal open={isOpen} onClose={onClose} size='md' fullWidth>
+      <Typography level='h4' sx={{ mb: 2 }}>
+        Select User
+      </Typography>
+      <List sx={{ mb: 2 }}>
+        {performers.map(user => (
+          <ListItem
+            key={user.id}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.04)',
+              },
+            }}
+            onClick={() => {
+              onSelect(user)
+              onClose()
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <Avatar
+                size='lg'
+                src={user.image || user.avatar}
+                alt={user.displayName || user.name}
+              />
+              <Typography>{user.displayName || user.name}</Typography>
+            </Box>
+          </ListItem>
+        ))}
+      </List>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+        <Button variant='outlined' color='neutral' onClick={onClose}>
+          Cancel
+        </Button>
+      </Box>
+    </FadeModal>
   )
 }