UI fixes for registration and login pages and zero trust report

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 {

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 {
             <Row>
               <Col lg={8} md={8} sm={8}>
                 <h1 className='reg-title'>First time?</h1>
-                <h3 className='reg-subtitle'>Let's secure your island!</h3>
+                <h3 className='reg-subtitle'>Let's secure your Monkey Island!</h3>
                 <div>
                   <Form className={'auth-form'}>
                     <Form.Control onChange={evt => this.updateUsername(evt)} type='text' placeholder='Username'/>
@@ -95,7 +95,7 @@ class RegisterPageComponent extends React.Component {
                     <Button id={'auth-button'} onClick={() => {
                       this.register()
                     }}>
-                      Lets Go!
+                      Lets go!
                     </Button>
                     <Row>
                       <Col>

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}/>
       <div className="text-center" style={{'display': 'grid'}}>
-        <Button variant={'monkey-alt'} size={'lg'} onClick={this.show}>
+        <Button variant={'monkey-info'} size={'lg'} onClick={this.show}>
           <FontAwesomeIcon icon={faList}/> Events {this.createEventsAmountBadge()}
         </Button>
       </div>
@@ -41,7 +41,7 @@ export default class EventsButton extends Component {
 
   createEventsAmountBadge() {
     const eventsAmountBadgeContent = this.props.event_count > 9 ? '9+' : this.props.event_count;
-    return <Badge variant={'alt-light'}>{eventsAmountBadgeContent}</Badge>;
+    return <Badge variant={'monkey-info-light'}>{eventsAmountBadgeContent}</Badge>;
   }
 }
 

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 <div className="text-center">
-      <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
+      <button type="button" className="btn btn-monkey-info btn-lg" style={{margin: '5px'}}
               onClick={this.props.onClickClose}>
         Close
       </button>

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
       },

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 {

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;

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;

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: {