message: changed details modal to dialog
diff: import React, { Dispatch, SetStateAction } from 'react'
  import { UseQueryResult } from 'react-query'
  -import { Box, Modal, Typography, CSSObject } from '@mui/material'
  +import { Dialog, Card, CardContent, Typography, Divider } from '@mui/material'
  import { DocumentResponse } from 'gql/document'
  import { useDocument } from 'common/hooks/documents'
  -const modalStyle: CSSObject = {
  - position: 'absolute',
  - top: '50%',
  - left: '50%',
  - transform: 'translate(-50%, -50%)',
  - width: 'auto',
  - bgcolor: 'background.paper',
  - border: '2px solid #000',
  - p: 4,
  -}
  -
  type Props = {
  id: string
  detailsOpen: boolean
  @@ -26,14 +15,29 @@ export default function DetailsModal({ id, detailsOpen, setDetailsOpen }: Props)
  const { data }: UseQueryResult<DocumentResponse> = useDocument(id)
  return (
  - <Modal open={detailsOpen} onClose={() => setDetailsOpen(false)}>
  - <Box sx={modalStyle}>
  - <Typography sx={{ mb: 2, fontSize: 24 }}>Type: {data?.type}</Typography>
  - <Typography sx={{ mb: 2, fontSize: 24 }}>Name: {data?.name}</Typography>
  - <Typography sx={{ mb: 2, fontSize: 24 }}>File Name: {data?.filename}</Typography>
  - <Typography sx={{ mb: 2, fontSize: 24 }}>File Type: {data?.filetype}</Typography>
  - <Typography sx={{ mb: 2, fontSize: 24 }}>description: {data?.description}</Typography>
  - <Typography sx={{ mb: 2, fontSize: 24 }}>
  + <Dialog open={detailsOpen} onClose={() => setDetailsOpen(false)} sx={{ top: '-35%' }}>
  + <Card>
  + <CardContent>
  + <Typography variant="h5" sx={{ marginBottom: '16px' }}>
  + Document details:
  + </Typography>
  + <Divider />
  + <Typography variant="body1" sx={{ fontSize: 24, marginTop: '8px' }}>
  + Type: {data?.type}
  + </Typography>
  + <Typography variant="body1" sx={{ fontSize: 24 }}>
  + Name: {data?.name}
  + </Typography>
  + <Typography variant="body1" sx={{ fontSize: 24 }}>
  + File Name: {data?.filename}
  + </Typography>
  + <Typography variant="body1" sx={{ fontSize: 24 }}>
  + File Type: {data?.filetype}
  + </Typography>
  + <Typography variant="body1" sx={{ fontSize: 24 }}>
  + description: {data?.description}
  + </Typography>
  + <Typography variant="body1" sx={{ fontSize: 24 }}>
  Source url:{' '}
  {
  <a target="_blank" href={data?.sourceUrl} rel="noreferrer">
  @@ -41,7 +45,8 @@ export default function DetailsModal({ id, detailsOpen, setDetailsOpen }: Props)
  </a>
  }
  </Typography>
  - </Box>
  - </Modal>
  + </CardContent>
  + </Card>
  + </Dialog>
  )
  }
  