From 28ffdcf19e75fc6d1553ef8c56004b2a2f227b3b Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Fri, 16 Aug 2019 15:40:38 +0100
Subject: [PATCH] Improve modal popup CSS

---
 app/src/frontend/ConfirmationModal.css |  4 +-
 app/src/frontend/ConfirmationModal.tsx | 58 +++++++++++++-------------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/app/src/frontend/ConfirmationModal.css b/app/src/frontend/ConfirmationModal.css
index 9cffe468..2d5330f1 100644
--- a/app/src/frontend/ConfirmationModal.css
+++ b/app/src/frontend/ConfirmationModal.css
@@ -1,7 +1,7 @@
-.show-modal {
+.modal.modal-show {
     display: block;
 }
 
-.modal-hide {
+.modal.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 6fab02b7..7ad5be58 100644
--- a/app/src/frontend/ConfirmationModal.tsx
+++ b/app/src/frontend/ConfirmationModal.tsx
@@ -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>