From 61229f259b2fcf7ef83f486a430940e71e2c1026 Mon Sep 17 00:00:00 2001
From: Ilija Lazoroski <ilija.la@live.com>
Date: Tue, 27 Jul 2021 11:52:25 +0200
Subject: [PATCH] UI: Add tsparticles to landing-page. Stretched the landing
 page main screen

---
 .../ui/src/components/pages/LandingPage.tsx   | 28 ++++++++++---------
 .../ParticleBackground.scss                   |  2 +-
 .../cc/ui/src/styles/pages/LandingPage.scss   | 13 +++++++--
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
index c6e845aa1..66e6f39ca 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
@@ -1,32 +1,34 @@
 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 (
   <>
+    <ParticleBackground/>
     <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
          lg={{offset: 3, span: 9}} xl={{offset: 3, span: 6}}
          className={'landing-page'}>
-        <h1 className="page-title">Breach & Attack Simulation</h1>
-        <div style={{'fontSize': '1.2em'}}>
-          <ScenarioButtons/>
-        <br/>
-      </div>
+       <h1 className="page-title">Breach & Attack Simulation</h1>
+       <div style={{'fontSize': '1.2em'}}>
+         <ScenarioButtons/>
+       <br/>
+       </div>
+       <br/>
+       <br/>
+       <Col className={'guardicore-logo'}>
+        <Logo/>
+      </Col>
     </Col>
 
-    <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
-         lg={{offset: 3, span: 9}} xl={{offset: 3, span: 6}}
-         className={'guardicore-logo'}>
-      <Logo/>
-    </Col>
   </>
   );
 
@@ -86,13 +88,13 @@ function MonkeyInfo() {
 }
 
 function ScenarioInfo() {
-    // TODO change links when added to documentation
+    // 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">
-           simulations
+           scenarios
           </a>.
         </div>
       </>
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss b/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss
index 0aeec94b2..4aca4d4a8 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss
+++ b/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;
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
index 1651c887a..14a77725f 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
@@ -1,3 +1,10 @@
+.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;
@@ -20,10 +27,10 @@
   height: 100%;
 }
 
-.guardicore-logo {
-  margin-bottom: 0.5em;
-  position: absolute !important;
+.landing-page .guardicore-logo {
+  position: absolute;
   bottom: 0;
+  left: 0 !important;
 }
 
 .guardicore-logo .license-text {