a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve modal popup CSS

Browse Source
This commit is contained in:
Maciej Ziarkowski 2019-08-16 15:40:38 +01:00
parent 4ad62eb196
commit 28ffdcf19e
2 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/frontend/ConfirmationModal.css
View File

@ -1,7 +1,7 @@
.show-modal { .modal.modal-show {
display: block; display: block;
} }
.modal-hide { .modal.modal-hide {
display: none; display: none;
} }

58
app/src/frontend/ConfirmationModal.tsx
View File

@ -21,34 +21,36 @@ const ConfirmationModal: React.FunctionComponent<ConfirmationModalProps> = ({
}) => { }) => {
const modalShowClass = props.show ? 'modal-show': 'modal-hide'; const modalShowClass = props.show ? 'modal-show': 'modal-hide';
return ( return (
<div className={modalShowClass} tabIndex={-1} role="dialog"> <div className={`modal ${modalShowClass}`} tabIndex={-1} role="dialog">
<div className="modal-dialog" role="document"> <div className="modal-backdrop">
<div className="modal-content"> <div className="modal-dialog" role="document">
<div className="modal-header"> <div className="modal-content">
<h5 className="modal-title">{props.title}</h5> <div className="modal-header">
<button <h5 className="modal-title">{props.title}</h5>
type="button" <button
className="close" type="button"
aria-label="Close" className="close"
onClick={() => props.onCancel()} aria-label="Close"
> onClick={() => props.onCancel()}
<span aria-hidden="true">&times;</span> >
</button> <span aria-hidden="true">&times;</span>
</div> </button>
<div className="modal-body"> </div>
<p>{props.description}</p> <div className="modal-body">
</div> <p>{props.description}</p>
<div className="modal-footer"> </div>
<button <div className="modal-footer">
type="button" <button
className={`btn btn-block ${confirmButtonClass}`} type="button"
onClick={() => props.onConfirm()} className={`btn btn-block ${confirmButtonClass}`}
>{confirmButtonText}</button> onClick={() => props.onConfirm()}
<button >{confirmButtonText}</button>
type="button" <button
className={`btn btn-block ${cancelButtonClass}`} type="button"
onClick={() => props.onCancel()} className={`btn btn-block ${cancelButtonClass}`}
>Cancel</button> onClick={() => props.onCancel()}
>Cancel</button>
</div>
</div> </div>
</div> </div>
</div> </div>