diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
index fb51b299e..ff2b15442 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
+++ b/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;
@@ -141,8 +139,9 @@ class RunMonkeyPageComponent extends AuthComponent {
/* If Monkey binaries are missing, change the state accordingly */
if (res['error_text'].startsWith('Copy file failed')) {
this.setState({
- showModal: true,
- errorDetails: res['error_text']}
+ showModal: true,
+ errorDetails: res['error_text']
+ }
);
}
this.setState({
@@ -327,9 +326,9 @@ class RunMonkeyPageComponent extends AuthComponent {
{RunMonkeyPageComponent.renderIconByState(this.state.runningOnIslandState)}
</Button>
<MissingBinariesModal
- showModal = {this.state.showModal}
- onClose = {this.closeModal}
- errorDetails = {this.state.errorDetails}/>
+ showModal={this.state.showModal}
+ onClose={this.closeModal}
+ errorDetails={this.state.errorDetails}/>
{
// TODO: implement button functionality
/*
@@ -358,38 +357,55 @@ 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'}
- activeKey={this.state.selectedOs} onSelect={this.setSelectedOs}>
- <Nav.Item>
- <Nav.Link eventKey={'windows-32'}>
- Windows (32 bit)
- </Nav.Link>
- </Nav.Item>
- <Nav.Item>
- <Nav.Link eventKey='windows-64'>
- Windows (64 bit)
- </Nav.Link>
- </Nav.Item>
- <Nav.Item>
- <Nav.Link eventKey='linux-32' variant={'monkey-alt'}>
- Linux (32 bit)
- </Nav.Link>
- </Nav.Item>
- <Nav.Item>
- <Nav.Link eventKey='linux-64'>
- Linux (64 bit)
- </Nav.Link>
- </Nav.Item>
- </Nav>
+ <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'}>
+ Windows (32 bit)
+ </Nav.Link>
+ </Nav.Item>
+ <Nav.Item>
+ <Nav.Link eventKey='windows-64'>
+ Windows (64 bit)
+ </Nav.Link>
+ </Nav.Item>
+ <Nav.Item>
+ <Nav.Link eventKey='linux-32'>
+ Linux (32 bit)
+ </Nav.Link>
+ </Nav.Item>
+ <Nav.Item>
+ <Nav.Link eventKey='linux-64'>
+ Linux (64 bit)
+ </Nav.Link>
+ </Nav.Item>
+ </Nav>
+ </Col>
+ </Row>
+
{this.state.ips.length > 1 ?
- <Nav variant="pills" 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>
+ <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'}}>
diff --git a/monkey/monkey_island/cc/ui/src/styles/Main.scss b/monkey/monkey_island/cc/ui/src/styles/Main.scss
index 77e1138f2..1a3fe6229 100644
--- a/monkey/monkey_island/cc/ui/src/styles/Main.scss
+++ b/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;
diff --git a/monkey/monkey_island/cc/ui/src/styles/MonkeyRunPage.scss b/monkey/monkey_island/cc/ui/src/styles/MonkeyRunPage.scss
index 8c931e42b..56f6cdb15 100644
--- a/monkey/monkey_island/cc/ui/src/styles/MonkeyRunPage.scss
+++ b/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;
+}
diff --git a/monkey/monkey_island/cc/ui/src/styles/_variables.scss b/monkey/monkey_island/cc/ui/src/styles/_variables.scss
index 928fc4afd..a3f5fc782 100644
--- a/monkey/monkey_island/cc/ui/src/styles/_variables.scss
+++ b/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;
diff --git a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
index 2e854de1a..f459f2707 100644
--- a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
+++ b/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;