diff --git a/app/src/frontend/ConfirmationModal.css b/app/src/frontend/ConfirmationModal.css new file mode 100644 index 00000000..9cffe468 --- /dev/null +++ b/app/src/frontend/ConfirmationModal.css @@ -0,0 +1,7 @@ +.show-modal { + display: block; +} + +.modal-hide { + display: none; +} \ No newline at end of file diff --git a/app/src/frontend/ConfirmationModal.tsx b/app/src/frontend/ConfirmationModal.tsx index 51c03b29..6fab02b7 100644 --- a/app/src/frontend/ConfirmationModal.tsx +++ b/app/src/frontend/ConfirmationModal.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import './ConfirmationModal.css'; interface ConfirmationModalProps { show: boolean, @@ -18,11 +19,9 @@ const ConfirmationModal: React.FunctionComponent = ({ 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 ( -
+
@@ -42,12 +41,12 @@ const ConfirmationModal: React.FunctionComponent = ({
diff --git a/app/src/frontend/my-account.tsx b/app/src/frontend/my-account.tsx index 2b0b9084..060ec3c4 100644 --- a/app/src/frontend/my-account.tsx +++ b/app/src/frontend/my-account.tsx @@ -159,6 +159,7 @@ class MyAccountPage extends Component { // 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()} />