diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
index 7c5f6cdc4..b57405fe0 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
@@ -3,6 +3,7 @@ import {Col} from 'react-bootstrap';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {edgeGroupToColor, options} from 'components/map/MapOptions';
import '../../styles/Collapse.scss';
+import '../../styles/report/AttackReport.scss'
import AuthComponent from '../AuthComponent';
import {ScanStatus} from '../attack/techniques/Helpers';
import Collapse from '@kunukn/react-collapse';
@@ -152,7 +153,7 @@ class AttackReportPageComponent extends AuthComponent {
content.push(this.getTechniqueCollapse(tech_id))
});
return (
-
+
ATT&CK report
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js
index f37fbe9c9..86fc641d8 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js
@@ -2,6 +2,7 @@ import React from 'react';
import Checkbox from '../../ui-components/Checkbox';
import ReactTable from 'react-table';
import 'filepond/dist/filepond.min.css';
+import '../../../styles/report/ReportAttackMatrix.scss';
class MatrixComponent extends React.Component {
constructor(props) {
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js b/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js
index ebd40aa3d..91d6512f3 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js
@@ -23,7 +23,6 @@ class CheckboxComponent extends React.PureComponent {
} else {
this.status = false
}
- console.log(this.props);
this.state = {
status: this.status,
checked: this.props.checked,
@@ -56,7 +55,7 @@ class CheckboxComponent extends React.PureComponent {
// Creates class string for component
composeStateClasses(core) {
let result = core;
- if (this.state.status) {
+ if (this.state.status !== false) {
result += ' status-'+this.state.status;
}
if (this.state.necessary) {
diff --git a/monkey/monkey_island/cc/ui/src/styles/App.css b/monkey/monkey_island/cc/ui/src/styles/App.css
index 5003ae87e..91267b7a1 100644
--- a/monkey/monkey_island/cc/ui/src/styles/App.css
+++ b/monkey/monkey_island/cc/ui/src/styles/App.css
@@ -525,7 +525,6 @@ body {
.label-danger {
background-color: #d9534f !important;
}
-
}
/* Attack pages */
@@ -537,10 +536,6 @@ body {
margin-bottom: 20px;
}
-.attack-report .btn-collapse span:nth-of-type(2) {
- flex: 0;
-}
-
.icon-info {
color: #ade3eb !important;
}
@@ -588,8 +583,3 @@ body {
margin-right: auto;
}
-.attack-report.footer-text {
- text-align: right;
- font-size: 0.8em;
- margin-top: 20px;
-}
diff --git a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
new file mode 100644
index 000000000..c9ff0b0a0
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
@@ -0,0 +1,13 @@
+.attack-report.footer-text {
+ text-align: right;
+ font-size: 0.8em;
+ margin-top: 20px;
+}
+
+.attack-report .btn-collapse span:nth-of-type(2) {
+ flex: 0;
+}
+
+.attack-report div.attack-legend {
+ margin-top: 30px;
+}
diff --git a/monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss b/monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss
new file mode 100644
index 000000000..c8eaeca9e
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss
@@ -0,0 +1,20 @@
+// colors
+$light-grey: #e0ddde;
+$light-blue: #ade3eb;
+$light-red: #d9acac;
+$black: #3a3a3a;
+
+.attack-matrix .status-0 {
+ background-color: $light-grey !important;
+ color: $black;
+}
+
+.attack-matrix .status-1 {
+ background-color: $light-blue !important;
+ color: $black;
+}
+
+.attack-matrix .status-2 {
+ background-color: $light-red !important;
+ color: $black;
+}