Run monkey page improvement, small style and attack report fixes

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {css} from '@emotion/core';
-import {Button, Col, Card, Nav, Collapse} from 'react-bootstrap';
+import {Button, Col, Card, Nav, Collapse, Row} from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import GridLoader from 'react-spinners/GridLoader';
 
@@ -17,8 +17,6 @@ import AwsRunTable from '../run-monkey/AwsRunTable';
 
 import MissingBinariesModal from '../ui-components/MissingBinariesModal';
 
-import '../../styles/MonkeyRunPage.scss';
-
 const loading_css_override = css`
     display: block;
     margin-right: auto;
@@ -142,7 +140,8 @@ class RunMonkeyPageComponent extends AuthComponent {
           if (res['error_text'].startsWith('Copy file failed')) {
             this.setState({
                 showModal: true,
-              errorDetails: res['error_text']}
+                errorDetails: res['error_text']
+              }
             );
           }
           this.setState({
@@ -358,10 +357,11 @@ class RunMonkeyPageComponent extends AuthComponent {
         <Collapse in={this.state.showManual}>
           <div style={{'marginBottom': '2em'}}>
             <p style={{'fontSize': '1.2em'}}>
-              Choose the operating system where you want to run the monkey
-              {this.state.ips.length > 1 ? ', and the interface to communicate with.' : '.'}
+              Choose the operating system where you want to run the monkey:
             </p>
-            <Nav variant='pills' id={'bootstrap-override'} className={'run-on-os-buttons'}
+            <Row>
+              <Col>
+                <Nav variant='pills' fill id={'bootstrap-override'} className={'run-on-os-buttons'}
                      activeKey={this.state.selectedOs} onSelect={this.setSelectedOs}>
                   <Nav.Item>
                     <Nav.Link eventKey={'windows-32'}>
@@ -374,7 +374,7 @@ class RunMonkeyPageComponent extends AuthComponent {
                     </Nav.Link>
                   </Nav.Item>
                   <Nav.Item>
-                <Nav.Link eventKey='linux-32' variant={'monkey-alt'}>
+                    <Nav.Link eventKey='linux-32'>
                       Linux (32 bit)
                     </Nav.Link>
                   </Nav.Item>
@@ -384,12 +384,28 @@ class RunMonkeyPageComponent extends AuthComponent {
                     </Nav.Link>
                   </Nav.Item>
                 </Nav>
+              </Col>
+            </Row>
+
             {this.state.ips.length > 1 ?
-              <Nav variant="pills" activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
+              <div>
+                <Row>
+                  <Col>
+                    <p style={{'fontSize': '1.2em'}}>
+                      Choose the interface to communicate with:
+                    </p>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col>
+                    <Nav variant="pills" fill activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
                          className={'run-on-os-buttons'}>
                       {this.state.ips.map(ip => <Nav.Item>
                         <Nav.Link eventKey={ip}>{ip}</Nav.Link></Nav.Item>)}
                     </Nav>
+                  </Col>
+                </Row>
+              </div>
               : <div style={{'marginBottom': '2em'}}/>
             }
             <p style={{'fontSize': '1.2em'}}>

monkey/monkey_island/cc/ui/src/styles/Main.scss

@@ -3,11 +3,12 @@
 @import '../../node_modules/bootstrap/scss/bootstrap';
 
 // Imports that require variables
-@import './report/ReportPage';
+@import './report/ReportPage.scss';
 @import './report/AttackReport.scss';
 @import './PreviewPane.scss';
-@import './ConfigurationPage';
-@import './AuthPage';
+@import './ConfigurationPage.scss';
+@import './AuthPage.scss';
+@import './MonkeyRunPage.scss';
 
 
 // Define custom elements after bootstrap import
@@ -16,6 +17,11 @@
   color: $monkey-black;
 }
 
+.btn-outline-monkey-alt, button {
+  @include button-outline-variant($monkey-alt, $monkey-white, $monkey-alt, $monkey-alt);
+  color: $monkey-black;
+}
+
 .btn-outline-standard, button {
   @include button-outline-variant($light-gray, $monkey-black, $light-gray, $light-gray);
   color: $monkey-black;

monkey/monkey_island/cc/ui/src/styles/MonkeyRunPage.scss

@@ -5,3 +5,12 @@ div.run-on-os-buttons {
 div.run-on-os-buttons > .nav-item{
   margin: 0 10px 0 10px;
 }
+
+div.run-on-os-buttons > .nav-item > .nav-link{
+  border: 1px solid $monkey-alt;
+}
+
+div.run-on-os-buttons > .nav-item > .nav-link:hover{
+  color: $monkey-white;
+  background-color: $monkey-alt;
+}

monkey/monkey_island/cc/ui/src/styles/_variables.scss

@@ -1,6 +1,6 @@
 $monkey-alt: #28a745;
 $monkey-yellow: #ffc107;
-$monkey-black: #000;
+$monkey-black: #000000;
 $monkey-white: #ffffff;
 $light-gray: #ececec;
 

monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss

@@ -50,6 +50,7 @@
 }
 
 .attack-report .toggle-btn {
+  box-shadow: None !important;
   padding: 0;
   margin-bottom: 30px;
   margin-left: 6px;