From eba638eaffb68941bb5d53da8c8e8097b02650a7 Mon Sep 17 00:00:00 2001
From: Shreya <shreya.malviya@gmail.com>
Date: Tue, 1 Sep 2020 23:37:39 +0530
Subject: [PATCH] ATT&CK report UI changes

- color changes
- strikethrough disabled techiques' text in matrix
---
 .../report-components/attack/SelectedTechnique.js          | 3 ++-
 .../report-components/attack/TechniqueDropdowns.js         | 5 +++--
 .../cc/ui/src/styles/components/Collapse.scss              | 5 +++--
 .../cc/ui/src/styles/pages/report/ReportAttackMatrix.scss  | 7 ++++---
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
index 8bdcf2960..69ca738f0 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
@@ -38,7 +38,8 @@ class SelectedTechnique extends React.Component {
           </span>
           <span>
             <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}>
-              <FontAwesomeIcon icon={faQuestionCircle}/>
+              <FontAwesomeIcon icon={faQuestionCircle}
+                               color={AttackReport.getComponentClass(tech_id, this.state.techniques) === 'collapse-default' ? '#ffffff' : '#000000'}/>
             </a>
           </span>
         </button>
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
index 1ba9285e6..13e5e23a3 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
@@ -43,8 +43,9 @@ class TechniqueDropdowns extends React.Component{
             {this.state.techniques[tech_id].title}
           </span>
           <span>
-            <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}>
-              <FontAwesomeIcon icon={faQuestionCircle}/>
+            <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank'>
+              <FontAwesomeIcon icon={faQuestionCircle} className={'link-to-technique'}
+                               color={AttackReport.getComponentClass(tech_id, this.state.techniques) === 'collapse-default' ? '#ffffff' : '#000000'}/>
             </a>
               <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>
           </span>
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/Collapse.scss b/monkey/monkey_island/cc/ui/src/styles/components/Collapse.scss
index b74088a77..3e578d45c 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/Collapse.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/components/Collapse.scss
@@ -1,9 +1,9 @@
 $transition: 300ms cubic-bezier(0.6, 0.3, 0.3, 0.6);
 
 $danger-color: #ebbcba;
-$disabled-color: #f4f4f4;
+$disabled-color: #f2f2f2;
 $info-color: #ade3eb;
-$default-color: #cbcbcb;
+$default-color: #8c8c8c;
 $warning-color: #ffe28d;
 
 .collapse-item button {
@@ -53,6 +53,7 @@ $warning-color: #ffe28d;
 
 .collapse-default {
   background-color: $default-color !important;
+  color: #ffffff;
 }
 
 .collapse-disabled {
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportAttackMatrix.scss b/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportAttackMatrix.scss
index 7cfa62157..edacf9672 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportAttackMatrix.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/report/ReportAttackMatrix.scss
@@ -1,13 +1,13 @@
 // colors
-$disabled: #f4f4f4;
-$not-attempted: #cbcbcb;
+$disabled: #f2f2f2;
+$not-attempted: #8c8c8c;
 $attempted: #ffe28d;
 $used: #ebbcba;
 $black: #3a3a3a;
 
 .attack-matrix .status-0 {
   background-color: $not-attempted !important;
-  color: $black;
+  color: #ffffff;
 }
 
 .attack-matrix .status-1 {
@@ -23,6 +23,7 @@ $black: #3a3a3a;
 .attack-matrix .status-3 {
   background-color: $disabled !important;
   color: $black;
+  text-decoration: line-through;
 }
 
 .attack-matrix div.rt-td:hover {