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 -
{content}
+
{content}
); } } 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; +}