From 4ad62eb1965e04e66f30ab561ede3f68cbf72cb7 Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Fri, 16 Aug 2019 15:20:54 +0100
Subject: [PATCH] Add simple CSS to show/hide modal

---
 app/src/frontend/ConfirmationModal.css |  7 +++++++
 app/src/frontend/ConfirmationModal.tsx | 11 +++++------
 app/src/frontend/my-account.tsx        |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 app/src/frontend/ConfirmationModal.css

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<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>
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<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()}
                         />