Merge pull request #1359 from guardicore/1349/landing-page-face-lift

Landing page face lift

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

@@ -221,6 +221,7 @@ class AppComponent extends AuthComponent {
             <Route path={Routes.RegisterPage} render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
             {this.renderRoute(Routes.LandingPage,
               <SidebarLayoutComponent component={LandingPage}
+                                      sideNavShow={false}
                                       sideNavDisabled={true}
                                       completedSteps={new CompletedSteps()}
                                       onStatusChange={this.updateStatus}/>)}

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

@@ -4,16 +4,15 @@ 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 VersionComponent from './side-menu/VersionComponent';
 import '../styles/components/SideNav.scss';
 import {CompletedSteps} from "./side-menu/CompletedSteps";
 import {isReportRoute, Routes} from "./Main";
 
 
-const guardicoreLogoImage = require('../images/guardicore-logo.png');
 const logoImage = require('../images/monkey-icon.svg');
 const infectionMonkeyImage = require('../images/infection-monkey.svg');
 
+import Logo from "./logo/LogoComponent";
 
 type Props = {
   disabled?: boolean,
@@ -97,21 +96,7 @@ const SideNavComponent = ({disabled,
         </NavLink></li>
       </ul>
 
-      <hr/>
+      <Logo/>
-      <div className='guardicore-link text-center' style={{'marginBottom': '0.5em'}}>
-        <span>Powered by</span>
-        <a href='http://www.guardicore.com' rel='noopener noreferrer' target='_blank'>
-          <img src={guardicoreLogoImage} alt='GuardiCore'/>
-        </a>
-      </div>
-      <div className='license-link text-center'>
-        <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
-          <FontAwesomeIcon icon={faExternalLinkAlt} /> Documentation
-        </a>
-        <br/>
-        <NavLink to={Routes.LicensePage}>License</NavLink>
-      </div>
-      <VersionComponent/>
     </>);
 
   function getNavLinkClass() {

monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx

@@ -4,6 +4,7 @@ import SideNavComponent from '../SideNavComponent.tsx';
 import {Col, Row} from 'react-bootstrap';
 
 const SidebarLayoutComponent = ({component: Component,
+                                  sideNavShow = true,
                                   sideNavDisabled = false,
                                   completedSteps = null,
                                   defaultReport = '',
@@ -13,12 +14,12 @@ const SidebarLayoutComponent = ({component: Component,
   <Route {...other} render={() => {
     return (
       <Row>
-        <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
+        {sideNavShow &&<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
           <SideNavComponent disabled={sideNavDisabled}
                             completedSteps={completedSteps}
                             defaultReport={defaultReport}
                             header={sideNavHeader}/>
-        </Col>
+        </Col>}
         <Component {...other} />
       </Row>)
   }}/>

monkey/monkey_island/cc/ui/src/components/logo/LogoComponent.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';
+import {Routes} from '../Main';
+import VersionComponent from './VersionComponent';
+
+const guardicoreLogoImage = require('../../images/guardicore-logo.png');
+
+function Logo() {
+  return (
+    <>
+      <hr/>
+      <div className='guardicore-link text-center' style={{'marginBottom': '0.5em'}}>
+        <span>Powered by</span>
+        <a href='http://www.guardicore.com' rel='noopener noreferrer' target='_blank'>
+          <img src={guardicoreLogoImage} alt='GuardiCore'/>
+        </a>
+      </div>
+      <div className='license-link text-center'>
+        <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
+          <FontAwesomeIcon icon={faExternalLinkAlt} /> Documentation
+        </a>
+        <br/>
+        <Link to={Routes.LicensePage}>License</Link>
+      </div>
+      <VersionComponent/>
+    </>
+  );
+}
+
+export default Logo;

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

@@ -1,31 +1,44 @@
 import React from 'react';
-import {Col, Row} from 'react-bootstrap';
+import {Container,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';
 import '../../styles/pages/LandingPage.scss';
 import IslandHttpClient from "../IslandHttpClient";
 
+import ParticleBackground from '../ui-components/ParticleBackground';
+import Logo from "../logo/LogoComponent";
 
 const LandingPageComponent = (props) => {
 
   return (
-    <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
+  <>
-         lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
+    <ParticleBackground/>
+    <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">Welcome to the Monkey Island Server</h1>
+       <h1 className="page-title">Breach & Attack Simulation</h1>
-      <div style={{'fontSize': '1.2em'}}>
+       <div style={{'fontSize': '1.2em'}}>
-        <ScenarioButtons/>
+         <ScenarioButtons/>
-        <br/>
+       <br/>
-      </div>
+       </div>
+       <br/>
+       <br/>
+       <Col className={'guardicore-logo'}>
+        <Logo/>
+      </Col>
     </Col>
+
+  </>
   );
 
+
   function ScenarioButtons() {
     return (
       <section>
         <h2 className={'scenario-choice-title'}>Choose a scenario:</h2>
         <div className="container">
+          <ScenarioInfo/>
           <Row className="justify-content-center">
             <div className="col-lg-6 col-sm-6">
               <Link to="/run-monkey"
@@ -74,4 +87,18 @@ function MonkeyInfo() {
   );
 }
 
+function ScenarioInfo() {
+    // TODO change link when scenarios are added to documentation
+    return (
+      <>
+        <div className={'scenario-info'}>
+          Check the Infection Monkey documentation hub for more information
+          on <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
+           scenarios
+          </a>.
+        </div>
+      </>
+    );
+}
+
 export default LandingPageComponent;

monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss

@@ -1,5 +1,5 @@
 .particle-background {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   z-index: -100;

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

@@ -1,4 +1,12 @@
+.landing-page {
+  background-color: rgba(255, 255, 255, 0.89);
+  position: absolute !important;
+  height: 100%;
+  bottom: 0;
+}
+
 .landing-page h1.page-title {
+  margin-top: 20px;
   margin-bottom: 20px;
 }
 
@@ -7,6 +15,10 @@
   margin-left: 12px;
 }
 
+.landing-page .scenario-info {
+  margin-bottom: 20px;
+}
+
 .landing-page .monkey-description-title {
   margin-top: 30px;
 }
@@ -14,3 +26,17 @@
 .landing-page .d-block {
   height: 100%;
 }
+
+.landing-page .guardicore-logo {
+  position: absolute;
+  bottom: 0;
+  left: 0 !important;
+}
+
+.guardicore-logo .license-text {
+  position: relative;
+}
+
+.guardicore-logo .version-text {
+  position: relative;
+}