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;
}
.modal-hide {
.modal.modal-hide {
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';
return (
<div className={modalShowClass} tabIndex={-1} role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{props.title}</h5>
<button
type="button"
className="close"
aria-label="Close"
onClick={() => props.onCancel()}
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<p>{props.description}</p>
</div>
<div className="modal-footer">
<button
type="button"
className={`btn btn-block ${confirmButtonClass}`}
onClick={() => props.onConfirm()}
>{confirmButtonText}</button>
<button
type="button"
className={`btn btn-block ${cancelButtonClass}`}
onClick={() => props.onCancel()}
>Cancel</button>
<div className={`modal ${modalShowClass}`} tabIndex={-1} role="dialog">
<div className="modal-backdrop">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{props.title}</h5>
<button
type="button"
className="close"
aria-label="Close"
onClick={() => props.onCancel()}
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<p>{props.description}</p>
</div>
<div className="modal-footer">
<button
type="button"
className={`btn btn-block ${confirmButtonClass}`}
onClick={() => props.onConfirm()}
>{confirmButtonText}</button>
<button
type="button"
className={`btn btn-block ${cancelButtonClass}`}
onClick={() => props.onCancel()}
>Cancel</button>
</div>
</div>
</div>
</div>