From 1011e731afda63208a02b43b6c1907aaaab2336d Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Tue, 17 Oct 2017 11:17:41 +0300
Subject: [PATCH] Improve modal boxes

---
 .../cc/ui/src/components/pages/MapPage.js     | 28 ++++++++++---------
 .../ui/src/components/pages/StartOverPage.js  | 26 +++++++++--------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
index 351ed8bcf..f3f3630a7 100644
--- a/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -134,21 +134,23 @@ class MapPageComponent extends React.Component {
     return (
       <ModalContainer onClose={() => this.setState({showKillDialog: false})}>
         <ModalDialog onClose={() => this.setState({showKillDialog: false})}>
-          <h1>Kill all monkeys</h1>
+          <h2>Are you sure you want to kill all monkeys?</h2>
           <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
-            Are you sure you want to kill all monkeys?
+            This might take a few moments...
           </p>
-          <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
-                  onClick={() => {
-                    this.killAllMonkeys();
-                    this.setState({showKillDialog: false});
-                  }}>
-            Kill all monkeys
-          </button>
-          <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
-                  onClick={() => this.setState({showKillDialog: false})}>
-            Cancel
-          </button>
+          <div className="text-center">
+            <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
+                    onClick={() => {
+                      this.killAllMonkeys();
+                      this.setState({showKillDialog: false});
+                    }}>
+              Kill all monkeys
+            </button>
+            <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+                    onClick={() => this.setState({showKillDialog: false})}>
+              Cancel
+            </button>
+          </div>
         </ModalDialog>
       </ModalContainer>
     )
diff --git a/monkey_island/cc/ui/src/components/pages/StartOverPage.js b/monkey_island/cc/ui/src/components/pages/StartOverPage.js
index 4c3ae8fb4..20b355cec 100644
--- a/monkey_island/cc/ui/src/components/pages/StartOverPage.js
+++ b/monkey_island/cc/ui/src/components/pages/StartOverPage.js
@@ -33,7 +33,7 @@ class StartOverPageComponent extends React.Component {
     return (
       <ModalContainer onClose={() => this.setState({showCleanDialog: false})}>
         <ModalDialog onClose={() => this.setState({showCleanDialog: false})}>
-          <h1>Reset environment</h1>
+          <h2>Reset environment</h2>
           <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
             Are you sure you want to reset the environment?
           </p>
@@ -46,17 +46,19 @@ class StartOverPageComponent extends React.Component {
               :
               <div />
           }
-          <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
-                  onClick={() => {
-                    this.cleanup();
-                    this.setState({showCleanDialog: false});
-                  }}>
-            Reset environment
-          </button>
-          <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
-                  onClick={() => this.setState({showCleanDialog: false})}>
-            Cancel
-          </button>
+          <div className="text-center">
+            <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
+                    onClick={() => {
+                      this.cleanup();
+                      this.setState({showCleanDialog: false});
+                    }}>
+              Reset environment
+            </button>
+            <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+                    onClick={() => this.setState({showCleanDialog: false})}>
+              Cancel
+            </button>
+          </div>
         </ModalDialog>
       </ModalContainer>
     )