TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OHIF-330: Update Modal Styles (#1891)

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-07-10 12:48:51 -03:00 committed by GitHub
parent 67f91251d8
commit 436df9ed30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
platform/ui/src/components/Modal/Modal.jsx
View File

@ -4,7 +4,7 @@ import ReactModal from 'react-modal';
import './Modal.css'; import './Modal.css';
import { Typography, useModal, IconButton, Icon } from '@ohif/ui'; import { Typography, useModal, Icon } from '@ohif/ui';
ReactModal.setAppElement(document.getElementById('root')); ReactModal.setAppElement(document.getElementById('root'));
@ -25,18 +25,20 @@ const Modal = ({
const renderHeader = () => { const renderHeader = () => {
return ( return (
title && ( title && (
<header className="mb-6 pb-4 border-b border-secondary-main"> <header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr">
<Typography variant="h4">{title}</Typography> <Typography
{closeButton && ( variant="h4"
<IconButton className="flex flex-grow text-primary-light font-light"
className="absolute top-0 right-0 focus:outline-none flex -mr-3 -mt-3"
data-cy="close-button"
color="primary"
onClick={onClose}
rounded="full"
> >
<Icon name="close" className="text-white w-8 h-8" /> {title}
</IconButton> </Typography>
{closeButton && (
<Icon
data-cy="close-button"
onClick={onClose}
name="close"
className="cursor-pointer text-primary-active w-6 h-6"
/>
)} )}
</header> </header>
) )
@ -45,15 +47,15 @@ const Modal = ({
return ( return (
<ReactModal <ReactModal
className="relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded" className="relative w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none text-white"
overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16" overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16"
shouldCloseOnEsc={shouldCloseOnEsc} shouldCloseOnEsc={shouldCloseOnEsc}
onRequestClose={handleClose} onRequestClose={handleClose}
isOpen={isOpen} isOpen={isOpen}
title={title} title={title}
> >
<div className="px-6">{renderHeader()}</div> {renderHeader()}
<section className="ohif-scrollbar modal-content overflow-y-auto px-6"> <section className="ohif-scrollbar modal-content overflow-y-auto px-4 py-6 rounded-bl rounded-br bg-primary-dark">
{children} {children}
</section> </section>
</ReactModal> </ReactModal>