Changed icons and fixed typo

monkey/monkey_island/cc/ui/src/components/report-components/common/PaginatedTable.js

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import ReactTable from "react-table";
 
-class PagenatedTable extends Component {
+class PaginatedTable extends Component {
   render() {
     if (this.props.data.length > 0) {
       let defaultPageSize = this.props.data.length > this.props.pageSize ? this.props.pageSize : this.props.data.length;
@@ -26,4 +26,4 @@ class PagenatedTable extends Component {
   }
 }
 
-export default PagenatedTable;
+export default PaginatedTable;

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/DirectivesStatusTable.js

@@ -1,12 +1,13 @@
 import React from "react";
-import PagenatedTable from "../common/PagenatedTable";
+import PaginatedTable from "../common/PaginatedTable";
 import AuthComponent from "../../AuthComponent";
+import 'styles/ZeroTrustPillars.css'
 
 const statusToIcon = {
-  "Positive": "fa-shield alert-success",
-  "Inconclusive": "fa-question alert-info",
-  "Conclusive": "fa-unlock-alt alert-danger",
-  "Unexecuted": "fa-toggle-off",
+  "Positive": "fa-clipboard-check status-success",
+  "Inconclusive": "fa-exclamation-triangle status-warning",
+  "Conclusive": "fa-bomb status-danger",
+  "Unexecuted": "fa-question status-default",
 };
 
 const columns = [
@@ -65,7 +66,7 @@ class TestsStatus extends AuthComponent {
 
 export class DirectivesStatusTable extends AuthComponent {
   render() {
-    return <PagenatedTable data={this.props.directivesStatus} columns={columns} pageSize={5}/>;
+    return <PaginatedTable data={this.props.directivesStatus} columns={columns} pageSize={5}/>;
   }
 }
 

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js

@@ -3,7 +3,7 @@ import {Button} from "react-bootstrap";
 import {EventsModal} from "./EventsModal";
 import FileSaver from "file-saver";
 import {PillarLabel} from "./PillarLabel";
-import PagenatedTable from "../common/PagenatedTable";
+import PaginatedTable from "../common/PaginatedTable";
 
 
 class EventsAndButtonComponent extends Component {
@@ -75,7 +75,7 @@ const columns = [
 class FindingsTable extends Component {
   render() {
     return (
-      <PagenatedTable data={this.props.findings} pageSize={10} columns={columns}/>
+      <PaginatedTable data={this.props.findings} pageSize={10} columns={columns}/>
     );
   }
 }

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarGrades.js

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {PillarLabel} from "./PillarLabel";
-import PagenatedTable from "../common/PagenatedTable";
+import PaginatedTable from "../common/PaginatedTable";
 
 const columns = [
   {
@@ -19,7 +19,7 @@ const columns = [
 
 class PillarGrades extends Component {
   render() {
-    return <PagenatedTable data={this.props.pillars} columns={columns} pageSize={10}/>;
+    return <PaginatedTable data={this.props.pillars} columns={columns} pageSize={10}/>;
   }
 }
 

monkey/monkey_island/cc/ui/src/styles/App.css

@@ -541,6 +541,22 @@ body {
   color: #e0ddde !important;
 }
 
+.status-success {
+  color: #24b716 !important;
+}
+
+.status-warning {
+  color: #b1a91c !important;
+}
+
+.status-danger {
+  color: #d91016 !important;
+}
+
+.status-default {
+  color: #575556 !important;
+}
+
 .attack-legend {
   text-align: center;
   margin-bottom: 20px;