From 4dbd7b41f540c5e6a98a220f1e35bbf40c27d75d Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Fri, 3 Sep 2021 15:27:04 +0300
Subject: [PATCH] Fix the Guardicore logo which is overlaping the landing page
 buttons on smaller screens

---
 .../ui/src/components/pages/LandingPage.tsx   | 61 ++++++++++---------
 .../cc/ui/src/styles/pages/LandingPage.scss   |  7 ---
 2 files changed, 31 insertions(+), 37 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 156489c22..cc1741b20 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
@@ -15,24 +15,24 @@ const infectionMonkey = require('../../images/infection-monkey.svg')
 const LandingPageComponent = (props) => {
 
   return (
-  <>
-    <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'}>
-       <MonkeyBanner />
-       <div className={'scenario-header'}>
-         <ScenarioButtons/>
-       <br/>
-       </div>
-       <br/>
-       <br/>
-       <Col className={'guardicore-logo'}>
-        <Logo/>
+    <>
+      <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'}>
+        <MonkeyBanner/>
+        <div className={'scenario-header'}>
+          <ScenarioButtons/>
+          <br/>
+          <Col className={'guardicore-logo'}>
+            <Logo/>
+          </Col>
+        </div>
+        <br/>
+        <br/>
       </Col>
-    </Col>
 
-  </>
+    </>
   );
 
 
@@ -72,8 +72,8 @@ const LandingPageComponent = (props) => {
 
   function setScenario(scenario: string) {
     IslandHttpClient.post('/api/island-mode', {'mode': scenario})
-    .then(() => {
-      props.onStatusChange();
+      .then(() => {
+        props.onStatusChange();
       });
   }
 }
@@ -91,23 +91,24 @@ function MonkeyInfo() {
 }
 
 function ScenarioInfo() {
-    return (
-      <>
-        <div className={'scenario-info'}>
-          Check the Infection Monkey documentation hub for more information
-          on <a href='https://www.guardicore.com/infectionmonkey/docs/usage/scenarios/' rel="noopener noreferrer" target="_blank">
-           scenarios
-          </a>.
-        </div>
-      </>
-    );
+  return (
+    <>
+      <div className={'scenario-info'}>
+        Check the Infection Monkey documentation hub for more information
+        on <a href='https://www.guardicore.com/infectionmonkey/docs/usage/scenarios/' rel="noopener noreferrer"
+              target="_blank">
+        scenarios
+      </a>.
+      </div>
+    </>
+  );
 }
 
 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} />
+      <img className={'landing-banner-component landing-banner-monkey-icon'} src={monkeyIcon}/>
+      <img className={'landing-banner-component landing-banner-title'} src={infectionMonkey}/>
     </div>
   );
 }
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 fe9e3657b..a4c16536e 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
@@ -1,6 +1,5 @@
 .landing-page {
   background-color: rgba(255, 255, 255, 0.89);
-  position: absolute !important;
   height: 100%;
   bottom: 0;
 }
@@ -27,12 +26,6 @@
   height: 100%;
 }
 
-.landing-page .guardicore-logo {
-  position: absolute;
-  bottom: 10px;
-  left: 0 !important;
-}
-
 .guardicore-logo .license-text {
   position: relative;
 }