From 6197f4253e1cb095ec7e7239a100bb882bcc0d8d Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Wed, 4 Oct 2017 15:26:02 +0300
Subject: [PATCH] Improve config buttons and message

---
 .../ui/src/components/pages/ConfigurePage.js  | 47 ++++++++++++-------
 .../ui/src/components/pages/StartOverPage.js  |  4 +-
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/monkey_island/cc/ui/src/components/pages/ConfigurePage.js b/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
index f24c76f53..cc8118b17 100644
--- a/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
+++ b/monkey_island/cc/ui/src/components/pages/ConfigurePage.js
@@ -122,26 +122,37 @@ class ConfigurePageComponent extends React.Component {
           <Form schema={displayedSchema}
                 formData={this.state.configuration[this.state.selectedSection]}
                 onSubmit={this.onSubmit}
-                onChange={this.onChange} />
+                onChange={this.onChange}>
+            <div>
+              <div className="alert alert-info">
+                <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
+                This configuration will only apply to new infections.
+              </div>
+              <div className="text-center">
+                <button type="submit" className="btn btn-success btn-lg" style={{margin: '5px'}}>
+                  Submit
+                </button>
+                <button type="button" onClick={this.resetConfig} className="btn btn-danger btn-lg" style={{margin: '5px'}}>
+                  Reset to defaults
+                </button>
+              </div>
+              { this.state.reset ?
+                <div className="alert alert-success">
+                  <i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
+                  Configuration reset successfully.
+                </div>
+                : ''}
+              { this.state.saved ?
+                <div className="alert alert-success">
+                  <i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
+                  Configuration saved successfully.
+                </div>
+                : ''}
+            </div>
+          </Form>
           : ''}
-        <a onClick={this.resetConfig} className="btn btn-danger btn-lg">Reset to defaults</a>
-        <div className="alert alert-info">
-          <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
-          This configuration will only apply to new infections.
-        </div>
 
-        { this.state.reset ?
-          <div className="alert alert-info">
-            <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
-            Configuration reset successfully.
-          </div>
-          : ''}
-        { this.state.saved ?
-          <div className="alert alert-info">
-            <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
-            Configuration saved successfully.
-          </div>
-          : ''}
+
       </Col>
     );
   }
diff --git a/monkey_island/cc/ui/src/components/pages/StartOverPage.js b/monkey_island/cc/ui/src/components/pages/StartOverPage.js
index 26b404137..6ecb2cc69 100644
--- a/monkey_island/cc/ui/src/components/pages/StartOverPage.js
+++ b/monkey_island/cc/ui/src/components/pages/StartOverPage.js
@@ -27,8 +27,8 @@ class StartOverPageComponent extends React.Component {
             <a onClick={this.cleanup} className="btn btn-danger btn-lg">Reset Environment</a>
           </p>
           { this.state.cleaned ?
-            <div className="alert alert-info">
-              <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
+            <div className="alert alert-success">
+              <i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
               Environment was reset successfully
             </div>
             : ''}