Merge pull request #1379 from guardicore/landing-page-banner

Landing page banner

monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx

@@ -3,7 +3,6 @@ import {NavLink} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
 import {faUndo} from '@fortawesome/free-solid-svg-icons/faUndo';
-import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';
 import '../styles/components/SideNav.scss';
 import {CompletedSteps} from "./side-menu/CompletedSteps";
 import {isReportRoute, Routes} from "./Main";

monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Container,Col, Row} from 'react-bootstrap';
+import {Col, Row} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons';
@@ -9,6 +9,9 @@ import IslandHttpClient from "../IslandHttpClient";
 import ParticleBackground from '../ui-components/ParticleBackground';
 import Logo from "../logo/LogoComponent";
 
+const monkeyIcon = require('../../images/monkey-icon.svg')
+const infectionMonkey = require('../../images/infection-monkey.svg')
+
 const LandingPageComponent = (props) => {
 
   return (
@@ -17,8 +20,8 @@ const LandingPageComponent = (props) => {
     <Col sm={{offset: 1, span: 10}} md={{offset: 1, span: 10}}
          lg={{offset: 2, span: 8}} xl={{offset: 3, span: 6}}
          className={'landing-page'}>
-       <h1 className="page-title">Breach & Attack Simulation</h1>
+       <MonkeyBanner />
-       <div style={{'fontSize': '1.2em'}}>
+       <div className={'scenario-header'}>
          <ScenarioButtons/>
        <br/>
        </div>
@@ -101,4 +104,13 @@ function ScenarioInfo() {
     );
 }
 
+function MonkeyBanner(props) {
+  return (
+    <div className={'landing-page-banner'}>
+      <img className={'landing-banner-component landing-banner-monkey-icon'} src={monkeyIcon} />
+      <img className={'landing-banner-component landing-banner-title'} src={infectionMonkey} />
+    </div>
+  );
+}
+
 export default LandingPageComponent;

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

@@ -21,7 +21,7 @@ body {
  * Sidebar
  */
 
-@media (min-width: 768px) {
+@media (min-width: 575px) {
   .sidebar {
     position: fixed !important;
     top: 0;
@@ -126,6 +126,15 @@ body {
   }
 }
 
+@media (max-width: 575px) {
+  .guardicore-link img {
+    height: 28px;
+    padding-left: 4px;
+    padding-right: 4px;
+    vertical-align: middle;
+  }
+}
+
 /*
  * Main content
  */

monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss

@@ -29,7 +29,7 @@
 
 .landing-page .guardicore-logo {
   position: absolute;
-  bottom: 0;
+  bottom: 10px;
   left: 0 !important;
 }
 
@@ -40,3 +40,33 @@
 .guardicore-logo .version-text {
   position: relative;
 }
+
+.landing-page-banner {
+    display: block;
+    background-color: #ffcc00;
+    height:200px;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+.landing-banner-component {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 10px;
+}
+
+.landing-banner-monkey-icon {
+    max-height: 65%;
+}
+
+.landing-banner-title {
+    padding-bottom: 10px;
+    max-height: 35%;
+}
+
+.landing-page .scenario-header {
+  font-size: 1.2em;
+  margin-top: 30px;
+  margin-left: 20px;
+}