p17860254
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix the Guardicore logo which is overlaping the landing page buttons on smaller screens

This commit is contained in:
VakarisZ 2021-09-03 15:27:04 +03:00
parent 0ecbfdea38
commit 4dbd7b41f5
2 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx
View File

@ -15,24 +15,24 @@ const infectionMonkey = require('../../images/infection-monkey.svg')
const LandingPageComponent = (props) => { const LandingPageComponent = (props) => {
return ( return (
<> <>
<ParticleBackground/> <ParticleBackground/>
<Col sm={{offset: 1, span: 10}} md={{offset: 1, span: 10}} <Col sm={{offset: 1, span: 10}} md={{offset: 1, span: 10}}
lg={{offset: 2, span: 8}} xl={{offset: 3, span: 6}} lg={{offset: 2, span: 8}} xl={{offset: 3, span: 6}}
className={'landing-page'}> className={'landing-page'}>
<MonkeyBanner /> <MonkeyBanner/>
<div className={'scenario-header'}> <div className={'scenario-header'}>
<ScenarioButtons/> <ScenarioButtons/>
<br/> <br/>
</div> <Col className={'guardicore-logo'}>
<br/> <Logo/>
<br/> </Col>
<Col className={'guardicore-logo'}> </div>
<Logo/> <br/>
<br/>
</Col> </Col>
</Col>
</> </>
); );
@ -72,8 +72,8 @@ const LandingPageComponent = (props) => {
function setScenario(scenario: string) { function setScenario(scenario: string) {
IslandHttpClient.post('/api/island-mode', {'mode': scenario}) IslandHttpClient.post('/api/island-mode', {'mode': scenario})
.then(() => { .then(() => {
props.onStatusChange(); props.onStatusChange();
}); });
} }
} }
@ -91,23 +91,24 @@ function MonkeyInfo() {
} }
function ScenarioInfo() { function ScenarioInfo() {
return ( return (
<> <>
<div className={'scenario-info'}> <div className={'scenario-info'}>
Check the Infection Monkey documentation hub for more information 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"> on <a href='https://www.guardicore.com/infectionmonkey/docs/usage/scenarios/' rel="noopener noreferrer"
scenarios target="_blank">
</a>. scenarios
</div> </a>.
</> </div>
); </>
);
} }
function MonkeyBanner(props) { function MonkeyBanner(props) {
return ( return (
<div className={'landing-page-banner'}> <div className={'landing-page-banner'}>
<img className={'landing-banner-component landing-banner-monkey-icon'} src={monkeyIcon} /> <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-title'} src={infectionMonkey}/>
</div> </div>
); );
} }

7
monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss
View File

@ -1,6 +1,5 @@
.landing-page { .landing-page {
background-color: rgba(255, 255, 255, 0.89); background-color: rgba(255, 255, 255, 0.89);
position: absolute !important;
height: 100%; height: 100%;
bottom: 0; bottom: 0;
} }
@ -27,12 +26,6 @@
height: 100%; height: 100%;
} }
.landing-page .guardicore-logo {
position: absolute;
bottom: 10px;
left: 0 !important;
}
.guardicore-logo .license-text { .guardicore-logo .license-text {
position: relative; position: relative;
} }