Unify modals and buttons style and layout

src/views/Modals/Inputs/AttachmentViewerModal.jsx

@@ -1,8 +1,9 @@
 import { Browser } from '@capacitor/browser'
 import { Capacitor } from '@capacitor/core'
-import { Close, Download } from '@mui/icons-material'
-import { Box, Button, CircularProgress, Typography } from '@mui/joy'
+import { Download } from '@mui/icons-material'
+import { Box, CircularProgress, Typography } from '@mui/joy'
 import { useState } from 'react'
+import ModalActions from '../../../components/common/ModalActions'
 import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
 
 const openUrl = async url => {
@@ -47,25 +48,15 @@ function AttachmentViewerModal({ config }) {
       title={fileName || 'Attachment'}
       maxHeight='92vh'
       footer={
-        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
-          <Button
-            variant='plain'
-            color='neutral'
-            startDecorator={<Close />}
-            onClick={handleClose}
-          >
-            Close
-          </Button>
-          <Button
-            variant='soft'
-            color='neutral'
-            startDecorator={<Download />}
-            onClick={() => downloadUrl(url, fileName)}
-            disabled={!url}
-          >
-            Download
-          </Button>
-        </Box>
+        <ModalActions
+          secondary={{ label: 'Close', onClick: handleClose }}
+          primary={{
+            label: 'Download',
+            startDecorator: <Download />,
+            onClick: () => downloadUrl(url, fileName),
+            disabled: !url,
+          }}
+        />
       }
     >
       <Box
@@ -78,10 +69,7 @@ function AttachmentViewerModal({ config }) {
         }}
       >
         {!imgLoaded && !imgError && (
-          <CircularProgress
-            sx={{ position: 'absolute' }}
-            size='md'
-          />
+          <CircularProgress sx={{ position: 'absolute' }} size='md' />
         )}
         {imgError ? (
           <Typography level='body-sm' sx={{ color: 'text.secondary' }}>