From 468bd7db2c3dfe832d34223bcdb8521452e7bd8e Mon Sep 17 00:00:00 2001 From: VakarisZ Date: Thu, 25 Jun 2020 10:00:43 +0300 Subject: [PATCH] UI fixes for registration and login pages and zero trust report --- .../monkey_island/cc/ui/src/components/pages/LoginPage.js | 2 +- .../cc/ui/src/components/pages/RegisterPage.js | 6 +++--- .../components/report-components/zerotrust/EventsButton.js | 4 ++-- .../report-components/zerotrust/EventsModalButtons.js | 2 +- .../components/report-components/zerotrust/FindingsTable.js | 2 +- monkey/monkey_island/cc/ui/src/styles/AuthPage.scss | 4 +++- monkey/monkey_island/cc/ui/src/styles/Main.scss | 6 ++++++ monkey/monkey_island/cc/ui/src/styles/_variables.scss | 6 ++++-- .../{RegistrationPageParams.js => AuthPageParams.js} | 4 ++-- 9 files changed, 23 insertions(+), 13 deletions(-) rename monkey/monkey_island/cc/ui/src/styles/particle-component/{RegistrationPageParams.js => AuthPageParams.js} (81%) diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js b/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js index bd045d271..44e9dc595 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js @@ -3,7 +3,7 @@ import {Button, Col, Container, Form, Row} from 'react-bootstrap'; import AuthService from '../../services/AuthService'; import Particles from "react-particles-js"; -import {particleParams} from "../../styles/particle-component/RegistrationPageParams"; +import {particleParams} from "../../styles/particle-component/AuthPageParams"; import monkeyDetective from "../../images/militant-monkey.svg"; class LoginPageComponent extends React.Component { diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js index 8c978a63c..4706ff819 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/RegisterPage.js @@ -3,7 +3,7 @@ import {Row, Col, Container, Form, Button} from 'react-bootstrap'; import Particles from 'react-particles-js'; import AuthService from '../../services/AuthService'; -import {particleParams} from '../../styles/particle-component/RegistrationPageParams'; +import {particleParams} from '../../styles/particle-component/AuthPageParams'; import monkeyDetective from '../../images/detective-monkey.svg'; class RegisterPageComponent extends React.Component { @@ -87,7 +87,7 @@ class RegisterPageComponent extends React.Component {

First time?

-

Let's secure your island!

+

Let's secure your Monkey Island!

this.updateUsername(evt)} type='text' placeholder='Username'/> @@ -95,7 +95,7 @@ class RegisterPageComponent extends React.Component { diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js index 2fdfe5f00..95fe93c4d 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js @@ -32,7 +32,7 @@ export default class EventsButton extends Component { hideCallback={this.hide} exportFilename={this.props.exportFilename}/>
-
@@ -41,7 +41,7 @@ export default class EventsButton extends Component { createEventsAmountBadge() { const eventsAmountBadgeContent = this.props.event_count > 9 ? '9+' : this.props.event_count; - return {eventsAmountBadgeContent}; + return {eventsAmountBadgeContent}; } } diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js index 1e6169ebb..338ef5d48 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsModalButtons.js @@ -5,7 +5,7 @@ import * as PropTypes from 'prop-types'; export default class EventsModalButtons extends Component { render() { return
- diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js index 5b8c75be8..f83921dae 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js @@ -22,7 +22,7 @@ const columns = [ latest_events={x.latest_events} oldest_events={x.oldest_events} event_count={x.event_count} - exportFilename={'Events_' + x.test_key}/>; + exportFilename={'Events_' + x.test_key} />; }, maxWidth: EVENTS_COLUMN_MAX_WIDTH }, diff --git a/monkey/monkey_island/cc/ui/src/styles/AuthPage.scss b/monkey/monkey_island/cc/ui/src/styles/AuthPage.scss index 16a202599..edca2cfb1 100644 --- a/monkey/monkey_island/cc/ui/src/styles/AuthPage.scss +++ b/monkey/monkey_island/cc/ui/src/styles/AuthPage.scss @@ -43,7 +43,7 @@ z-index: -100; width: 100%; height: 100%; - background-color: #1a1a1a; + background-color: $gray-300; } .auth-block { @@ -55,10 +55,12 @@ .auth-block h1 { font-size: 4.5em; margin-bottom: 10px; + text-align: center; } .auth-block h3 { margin-bottom: 20px; + text-align: center; } .no-auth-link { diff --git a/monkey/monkey_island/cc/ui/src/styles/Main.scss b/monkey/monkey_island/cc/ui/src/styles/Main.scss index 1a3fe6229..1f06392e0 100644 --- a/monkey/monkey_island/cc/ui/src/styles/Main.scss +++ b/monkey/monkey_island/cc/ui/src/styles/Main.scss @@ -46,6 +46,12 @@ border-radius: 10px; } +.badge-monkey-info-light { + color: $monkey-info; + background-color: $monkey-white; + border-radius: 10px; +} + .btn-link:active, .btn-link:hover, .btn-link:focus { color: $monkey-alt !important; background-color: transparent !important; diff --git a/monkey/monkey_island/cc/ui/src/styles/_variables.scss b/monkey/monkey_island/cc/ui/src/styles/_variables.scss index a3f5fc782..3867ab845 100644 --- a/monkey/monkey_island/cc/ui/src/styles/_variables.scss +++ b/monkey/monkey_island/cc/ui/src/styles/_variables.scss @@ -1,14 +1,16 @@ $monkey-alt: #28a745; $monkey-yellow: #ffc107; $monkey-black: #000000; +$monkey-info: #17a2b8; $monkey-white: #ffffff; $light-gray: #ececec; + // Define colours before bootstrap import so it generates elements with those colours $theme-colors: ( "monkey-alt": $monkey-alt, - "alt-light": $monkey-alt, - "primary": $monkey-yellow + "primary": $monkey-yellow, + "monkey-info": $monkey-info, ); $nav-pills-link-active-bg: $monkey-alt; diff --git a/monkey/monkey_island/cc/ui/src/styles/particle-component/RegistrationPageParams.js b/monkey/monkey_island/cc/ui/src/styles/particle-component/AuthPageParams.js similarity index 81% rename from monkey/monkey_island/cc/ui/src/styles/particle-component/RegistrationPageParams.js rename to monkey/monkey_island/cc/ui/src/styles/particle-component/AuthPageParams.js index b1256d547..525f1cb71 100644 --- a/monkey/monkey_island/cc/ui/src/styles/particle-component/RegistrationPageParams.js +++ b/monkey/monkey_island/cc/ui/src/styles/particle-component/AuthPageParams.js @@ -1,11 +1,11 @@ export const particleParams = { particles: { color: { - value: '#ffcc00' + value: '#2b2b2b' }, line_linked: { color: { - value: '#a08100' + value: '#555555' } }, number: {