Refactored stylesheets a bit and coloured attack matrix in report.

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 (
-      <div id="attack">
+      <div id="attack" className="attack-report">
       <h3>
         ATT&CK report
       </h3>

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) {

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) {

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;
-}

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;
+}

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;
+}