Adding toolbar and checkBox style fixes

monkey/monkey_island/cc/ui/package.json

@@ -73,6 +73,7 @@
     "json-loader": "^0.5.7",
     "jwt-decode": "^2.2.0",
     "moment": "^2.22.2",
+    "node-sass": "^4.11.0",
     "normalize.css": "^8.0.0",
     "npm": "^6.4.1",
     "prop-types": "^15.6.2",
@@ -92,7 +93,9 @@
     "react-router-dom": "^4.3.1",
     "react-table": "^6.8.6",
     "react-toggle": "^4.0.1",
+    "react-tooltip-lite": "^1.9.1",
     "redux": "^4.0.0",
+    "sass-loader": "^7.1.0",
     "sha3": "^2.0.0"
   }
 }

monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js

@@ -12,7 +12,7 @@ let renderTechnique = function (technique) {
   if (technique == null){
     return (<div></div>)
   } else {
-    return (<div>{technique.title}</div>)
+    return (<CheckBox>{technique.title}</CheckBox>)
   }
 };
 
@@ -59,7 +59,8 @@ class MatrixComponent extends AuthComponent {
       return {
         Header: key,
         id: key,
-        accessor: x => renderTechnique(x[key].technique)
+        accessor: x => renderTechnique(x[key].technique),
+        style: { 'white-space': 'unset' }
       };
     });
   }

monkey/monkey_island/cc/ui/src/components/ui-components/checkBox.js

@@ -1,11 +1,11 @@
 import '../../styles/CheckBox.scss'
 import React from 'react';
-import MatrixComponent from "../attck/MatrixComponent";
+import Tooltip from 'react-tooltip-lite';
 
 class Checkbox extends React.PureComponent {
 
 	constructor() {
-		super();
+		super(props);
 
 		this.state = {
 			checked: false,
@@ -46,17 +46,22 @@ class Checkbox extends React.PureComponent {
 	render() {
 
 		const cl = this.composeStateClasses('ui-checkbox-btn');
-
+		let tooltip = "";
+    if (this.props.hasOwnProperty("tooltipContent") && this.props.hasOwnProperty("tooltipDirection")){
+      tooltip = (<Tooltip content={this.props.tooltipContent} direction={this.props.tooltipDirection}
+                         className="tooltip" tipContentClassName="">)
+    }
+  }
 		return (
 			<div
 				className={ cl }
 				onClick={ this.toggleChecked }>
-
+          <Tooltip content={this.props.} direction="down" className="target" tipContentClassName="">
 					<input className="ui ui-checkbox" type="checkbox" checked={this.state.checked} />
 					{
 						this.state.checked &&
 							<i className="icon">
-								<svg width="24" height="24" viewBox="0 0 24 24">
+								<svg>
 									<path d="M21 5q0.43 0 0.715 0.285t0.285 0.715q0 0.422-0.289 0.711l-12 12q-0.289 0.289-0.711 0.289t-0.711-0.289l-6-6q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285q0.422 0 0.711 0.289l5.289 5.297 11.289-11.297q0.289-0.289 0.711-0.289z"></path>
 								</svg>
 							</i>
@@ -64,7 +69,7 @@ class Checkbox extends React.PureComponent {
 					{
 						!this.state.checked &&
 							<i className="icon">
-								<svg width="24" height="24" viewBox="0 0 24 24">
+								<svg>
 									<path d="M19 4q0.43 0 0.715 0.285t0.285 0.715q0 0.422-0.289 0.711l-6.297 6.289 6.297 6.289q0.289 0.289 0.289 0.711 0 0.43-0.285 0.715t-0.715 0.285q-0.422 0-0.711-0.289l-6.289-6.297-6.289 6.297q-0.289 0.289-0.711 0.289-0.43 0-0.715-0.285t-0.285-0.715q0-0.422 0.289-0.711l6.297-6.289-6.297-6.289q-0.289-0.289-0.289-0.711 0-0.43 0.285-0.715t0.715-0.285q0.422 0 0.711 0.289l6.289 6.297 6.289-6.297q0.289-0.289 0.711-0.289z"></path>
 								</svg>
 							</i>

monkey/monkey_island/cc/ui/src/styles/CheckBox.scss

@@ -1,6 +1,6 @@
 // readable
-$desired-line-height: 24px;
+$desired-line-height: 100%;
-$desired-height: 36px;
+$desired-height: 100%;
 $text-offset: 2px;
 
 // usable
@@ -13,14 +13,15 @@ $light-grey: #EAF4F4;
 $medium-grey: #7B9EA8;
 $dark-grey: #7B9EA8;
 $green: #44CF6C;
+$black: #000000;
 
 .ui-checkbox-btn {
 	position: relative;
 	display: inline-block;
-
-	padding: (($dh - $dlh) / 2) ($dlh / 2);
-	border-radius: $dh / 2; // overcompensate
 	background-color: rgba(red, .6);
+  text-align: center;
+  width: 100%;
+  height: 100%;
 
 	input { display: none; } // turn off, but not forgotten
 
@@ -33,17 +34,13 @@ $green: #44CF6C;
 
 	.text {
 		font-size: 14px;
-		line-height: $dlh - $to;
-		padding-top: $to;
-		padding-left: 4px;
 	}
 
 	// color states
 	&.is-unchecked {
-		border: 1px solid $medium-grey;
 		background-color: transparent;
-		color: $dark-grey;
+		color: $black;
-		fill: $dark-grey;
+		fill: $black;
 	}
 
 	&.is-checked {
@@ -57,8 +54,6 @@ $green: #44CF6C;
 .icon {
 	position: relative;
 	display: inline-block;
-	width: $dlh - 4;
-	height: $dlh;
 
 	svg {
 		position: absolute;

monkey/monkey_island/cc/ui/webpack.config.js

@@ -18,6 +18,14 @@ module.exports = {
           'css-loader'
         ]
       },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
       {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         use: {