diff --git a/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js b/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js
index ff674fbc1..98ce1604d 100644
--- a/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js
+++ b/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js
@@ -1,10 +1,12 @@
import React from 'react';
import Form from 'react-jsonschema-form';
import {Col, Nav, NavItem} from 'react-bootstrap';
-import CheckBox from '../ui-components/checkBox'
+import Checkbox from '../ui-components/checkbox'
+import Tooltip from 'react-tooltip-lite'
import AuthComponent from '../AuthComponent';
-import 'filepond/dist/filepond.min.css';
import ReactTable from "react-table";
+import 'filepond/dist/filepond.min.css';
+import '../../styles/Tooltip.scss';
let renderTechnique = function (technique) {
@@ -12,7 +14,8 @@ let renderTechnique = function (technique) {
if (technique == null){
return (
)
} else {
- return ({technique.title})
+ return (
+ {technique.title} )
}
};
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
new file mode 100644
index 000000000..1d3754036
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js
@@ -0,0 +1,61 @@
+import '../../styles/Checkbox.scss'
+import React from 'react';
+
+class Checkbox extends React.PureComponent {
+
+ constructor() {
+ super();
+
+ this.state = {
+ checked: false,
+ isAnimating: false,
+ };
+
+ this.toggleChecked = this.toggleChecked.bind(this);
+ this.ping = this.ping.bind(this);
+ this.composeStateClasses = this.composeStateClasses.bind(this);
+ }
+
+ //
+ toggleChecked() {
+ if (this.state.isAnimating) return false;
+ this.setState({
+ checked: !this.state.checked,
+ isAnimating: true,
+ });
+ }
+
+ //
+ ping() {
+ this.setState({ isAnimating: false })
+ }
+
+ //
+ composeStateClasses(core) {
+ let result = core;
+
+ if (this.state.checked) { result += ' is-checked'; }
+ else { result += ' is-unchecked' }
+
+ if (this.state.isAnimating) { result += ' do-ping'; }
+ return result;
+ }
+
+ //
+ render() {
+
+ const cl = this.composeStateClasses('ui-checkbox-btn');
+
+ return (
+
+
+
+
+
+ )
+ }
+}
+
+export default Checkbox;
diff --git a/monkey/monkey_island/cc/ui/src/styles/CheckBox.scss b/monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
similarity index 84%
rename from monkey/monkey_island/cc/ui/src/styles/CheckBox.scss
rename to monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
index fc325edf2..cb24563f7 100644
--- a/monkey/monkey_island/cc/ui/src/styles/CheckBox.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
@@ -1,14 +1,4 @@
-// readable
-$desired-line-height: 100%;
-$desired-height: 100%;
-$text-offset: 2px;
-
-// usable
-$dlh: $desired-line-height;
-$dh: $desired-height;
-$to: $text-offset;
-
-// coooolors
+// colors
$light-grey: #EAF4F4;
$medium-grey: #7B9EA8;
$dark-grey: #7B9EA8;
@@ -23,16 +13,16 @@ $black: #000000;
width: 100%;
height: 100%;
- input { display: none; } // turn off, but not forgotten
+ input { display: none; }
.icon,
.text {
display: inline-block;
- vertical-align: top;
color: inherit;
}
.text {
+ padding-top: 4px;
font-size: 14px;
}
diff --git a/monkey/monkey_island/cc/ui/src/styles/Tooltip.scss b/monkey/monkey_island/cc/ui/src/styles/Tooltip.scss
new file mode 100644
index 000000000..7d2ff9d35
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/Tooltip.scss
@@ -0,0 +1,8 @@
+$background: #000000;
+$font: #fff;
+
+.react-tooltip-lite {
+ background: $background;
+ color: $font;
+ max-width: 400px !important;
+}