Most theme updates

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>
+            <h2 style={{marginTop: '0px', marginBottom: '5px', color: '#666666'}}>Security Report</h2>
+            <h2 style={{marginTop: '0px', marginBottom: '0px', color: '#ffcc00'}}>Infection <b>Monkey</b></h2>
+          </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>
     );
   }

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;
 }