Merge pull request #82 from guardicore/feature/update-island-theme

Feature/update island theme

monkey_island/cc/ui/src/components/Main.js

@@ -69,7 +69,7 @@ class AppComponent extends React.Component {
           <Row>
             <Col sm={3} md={2} className="sidebar">
               <div className="header">
-                <img src={logoImage} style={{width: '10vw'}}/>
+                <img src={logoImage} style={{width: '5vw', margin: '15px'}}/>
                 <img src={infectionMonkeyImage} style={{width: '15vw'}} alt="Infection Monkey"/>
               </div>
 

monkey_island/cc/ui/src/components/pages/ReportPage.js

@@ -122,6 +122,7 @@ class ReportPageComponent extends React.Component {
         </div>
         <div className="report-page">
           {this.generateReportHeader()}
+          <hr/>
           {this.generateReportOverviewSection()}
           {this.generateReportFindingsSection()}
           {this.generateReportRecommendationsSection()}
@@ -139,19 +140,20 @@ class ReportPageComponent extends React.Component {
 
   generateReportHeader() {
     return (
-      <div id="header">
+      <div id="header" className="row justify-content-between">
+        <Col xs={8}>
           <div>
+            <h1 style={{marginTop: '0px', marginBottom: '5px', color: '#666666', fontFamily: 'Alegreya'}}>Security Report</h1>
+            <h1 style={{marginTop: '0px', marginBottom: '0px', color: '#ffcc00', fontFamily: 'Alegreya'}}>Infection <b>Monkey</b></h1>
+          </div>
+        </Col>
+        <Col xs={4}>
           <img src={monkeyLogoImage}
                style={{
-                 width: '100px',
+                 float: 'right',
-                 position: 'absolute',
+                 width: '80px'
-                 marginLeft: '-30px',
-                 marginTop: '-60px',
                }}/>
-        </div>
+        </Col>
-        <h1 className="text-center">
-          Infection Monkey Report
-        </h1>
       </div>
     );
   }
@@ -159,9 +161,9 @@ class ReportPageComponent extends React.Component {
   generateReportOverviewSection() {
     return (
       <div id="overview">
-        <h1>
+        <h2>
           Overview
-        </h1>
+        </h2>
         {
           this.state.report.glance.exploited.length > 0 ?
             (<p className="alert alert-danger">
@@ -271,9 +273,9 @@ class ReportPageComponent extends React.Component {
   generateReportFindingsSection() {
     return (
       <div id="findings">
-        <h1>
+        <h3>
           Security Findings
-        </h1>
+        </h3>
         <div>
           <h3>
             Immediate Threats
@@ -350,9 +352,9 @@ class ReportPageComponent extends React.Component {
   generateReportRecommendationsSection() {
     return (
       <div id="recommendations">
-        <h1>
+        <h3>
           Recommendations
-        </h1>
+        </h3>
         <div>
           {this.generateIssues(this.state.report.recommendations.issues)}
         </div>
@@ -365,9 +367,9 @@ class ReportPageComponent extends React.Component {
       (100 * this.state.report.glance.exploited.length) / this.state.report.glance.scanned.length;
     return (
       <div id="glance">
-        <h1>
+        <h3>
           The Network from the Monkey's Eyes
-        </h1>
+        </h3>
         <div>
           <p>
             The Monkey discovered <span

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

@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css?family=Alegreya');
 
 /* Base Application Styles */
+
 body {
   color: #fff;
   background: #222;
@@ -23,7 +24,7 @@ body {
     left: 0;
     z-index: 1000;
     display: block;
-    padding: 1em;
+    padding: 0px !important;
     overflow-x: hidden;
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
     background-color: #f5f5f5;
@@ -34,6 +35,8 @@ body {
     text-align: center;
     font-weight: bold;
     font-size: 1.2em;
+    background-color: #ffcc00;
+    padding: 15px;
   }
 
   .header img {
@@ -42,6 +45,7 @@ body {
 
   .navigation {
     margin-top: 1em;
+    padding: 15px;
   }
 
   ul {
@@ -54,14 +58,12 @@ body {
   }
 
   li .number {
-    color: #666;
     display: inline-block;
     width: 1.1em;
   }
 
   li a {
-    /*color: #d30d09;*/
+    color: #333333;
-    color: #666;
     display: block;
     padding: 0.5em 1em;
     margin: 0.1em 0;
@@ -73,12 +75,12 @@ body {
     text-decoration: none;
   }
   li a.active {
-    background: #fff;
+    background: #333333;
     text-decoration: none;
-    color: #d30d09;
+    color: #ffcc00;
   }
   li a.active:hover {
-    color: #d30d09;
+    color: #ffcc00;
   }
   li a.disabled {
     color: #666;
@@ -93,6 +95,7 @@ body {
   li .checkmark {
     font-size: 1.3em;
     margin-right: -10px;
+    color: #ffcc00;
   }
 
   hr {
@@ -123,9 +126,9 @@ body {
   margin-top: 0;
   margin-bottom: 1em;
   padding-bottom: 0.5em;
-  border-bottom: 2px dotted #d30d09;
+  border-bottom: 2px dotted #ffcc00;
   font-size: 2.5em;
-  color: #d30d09;
+  color: #ffcc00;
   font-family: 'Alegreya', serif;
 }