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 a83bb91c2..ee65de59b 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
@@ -1,7 +1,7 @@
import React from 'react';
import Collapse from '@kunukn/react-collapse';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuestionCircle, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { faQuestionCircle, faChevronUp, faChevronDown, faToggleOn } from '@fortawesome/free-solid-svg-icons'
import {Button} from 'react-bootstrap';
import AttackReport from '../AttackReport';
@@ -80,13 +80,19 @@ class TechniqueDropdowns extends React.Component{
});
}
return (
-
+
+ List of all techniques
-
+
);
}
}
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 39ac8b59c..5c508213b 100644
--- a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
@@ -12,7 +12,7 @@
display: none;
}
-.attack-report .dropdown-list .btn-lg {
+.attack-technique-list-component .dropdown-list .btn-lg {
margin-top: 30px;
margin-bottom: 20px;
padding: 0;
@@ -44,3 +44,40 @@
.attack-link{
padding: 0 7px 3px 7px !important;
}
+
+.attack-report .toggle-btn{
+ position:relative;
+ height:30px;
+ width:30px;
+}
+
+.attack-report .toggle-btn {
+ padding: 0;
+ margin-bottom: 33px;
+ margin-left: 6px;
+ outline: none !important;
+ font-size: 15px;
+}
+
+.attack-report .toggle-btn svg {
+ position:absolute;
+ left:0;
+ -webkit-transition: opacity 0.15s ease-in-out;
+ -moz-transition: opacity 0.15s ease-in-out;
+ -o-transition: opacity 0.15s ease-in-out;
+ transition: opacity 0.15s ease-in-out;
+}
+
+.attack-report .toggle-btn.toggled-on .switch-off{
+ opacity:0;
+}
+
+.attack-report .toggle-btn.toggled-off .switch-on{
+ opacity:0;
+}
+
+.attack-report .switch-off {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ color: gray;
+}