Add simple CSS to show/hide modal
This commit is contained in:
parent
423f35958d
commit
4ad62eb196
7
app/src/frontend/ConfirmationModal.css
Normal file
7
app/src/frontend/ConfirmationModal.css
Normal file
@ -0,0 +1,7 @@
|
||||
.show-modal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-hide {
|
||||
display: none;
|
||||
}
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import './ConfirmationModal.css';
|
||||
|
||||
interface ConfirmationModalProps {
|
||||
show: boolean,
|
||||
@ -18,11 +19,9 @@ const ConfirmationModal: React.FunctionComponent<ConfirmationModalProps> = ({
|
||||
cancelButtonClass = '',
|
||||
...props
|
||||
}) => {
|
||||
const confirmButtonClassString = `btn btn-block ${confirmButtonClass}`;
|
||||
const cancelButtonClassString = `btn btn-block ${cancelButtonClass}`;
|
||||
const modalClass = `modal ${props.show ? 'show' : ''}`;
|
||||
const modalShowClass = props.show ? 'modal-show': 'modal-hide';
|
||||
return (
|
||||
<div className={modalClass} tabIndex={-1} role="dialog">
|
||||
<div className={modalShowClass} tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
@ -42,12 +41,12 @@ const ConfirmationModal: React.FunctionComponent<ConfirmationModalProps> = ({
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className={confirmButtonClassString}
|
||||
className={`btn btn-block ${confirmButtonClass}`}
|
||||
onClick={() => props.onConfirm()}
|
||||
>{confirmButtonText}</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cancelButtonClassString}
|
||||
className={`btn btn-block ${cancelButtonClass}`}
|
||||
onClick={() => props.onCancel()}
|
||||
>Cancel</button>
|
||||
</div>
|
||||
|
@ -159,6 +159,7 @@ class MyAccountPage extends Component<any, any> { // TODO: add proper types
|
||||
title="Confirm account deletion"
|
||||
description="Are you sure you want to delete your account? This cannot be undone."
|
||||
confirmButtonText="Delete account"
|
||||
confirmButtonClass="btn-danger"
|
||||
onConfirm={() => this.handleDelete()}
|
||||
onCancel={() => this.hideConfirmDelete()}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user