Unify modals and buttons style and layout

src/views/Modals/Inputs/UserModal.jsx

@@ -1,4 +1,5 @@
-import { Avatar, Box, Button, List, ListItem, Typography } from '@mui/joy'
+import { Avatar, Box, List, ListItem, Typography } from '@mui/joy'
+import ModalActions from '../../../components/common/ModalActions'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 
 const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
@@ -11,6 +12,9 @@ const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
       size='lg'
       fullWidth={true}
       title='Select User'
+      footer={
+        <ModalActions secondary={{ label: 'Cancel', onClick: onClose }} />
+      }
     >
       <List sx={{ mb: 2 }}>
         {performers.map(user => (
@@ -38,11 +42,6 @@ const UserModal = ({ isOpen, performers = [], onSelect, onClose }) => {
           </ListItem>
         ))}
       </List>
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-        <Button size='lg' variant='outlined' color='neutral' onClick={onClose}>
-          Cancel
-        </Button>
-      </Box>
     </ResponsiveModal>
   )
 }