From 1dc6949829f4dd548c8ee5bbcba3f160fd1b4549 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Mon, 25 Nov 2019 10:58:04 +0200
Subject: [PATCH] Refactored stylesheets a bit and coloured attack matrix in
 report.

---
 .../report-components/AttackReport.js         |  3 ++-
 .../report-components/attack/Matrix.js        |  1 +
 .../src/components/ui-components/Checkbox.js  |  3 +--
 monkey/monkey_island/cc/ui/src/styles/App.css | 10 ----------
 .../cc/ui/src/styles/report/AttackReport.scss | 13 ++++++++++++
 .../src/styles/report/ReportAttackMatrix.scss | 20 +++++++++++++++++++
 6 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss

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