diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js index c2ce38e434d3b048401e3043dd47d87bd3635a91..2e4f431e56e347bb41d96338afd6e088c9ac9e73 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/AntennaErrorDetails.js @@ -56,15 +56,15 @@ class ModalPicture extends Component { this.clearTimeouts(); return ( <React.Fragment> - <img src={this.props.url} onClick={this.toggleModal} onError={this.onImgError} title="Click to enlarge" alt="Not present"/> - <Modal isOpen={this.state.modal} fade={false} size="lg" toggle={this.toggle} className={this.props.className}> - <ModalHeader toggle={this.toggleModal}></ModalHeader> - <ModalBody> - <img style={{width: '100%'}} src={this.state.modalUrl} alt="Not present" /> - </ModalBody> - </Modal> </React.Fragment> - - ); + <img src={this.props.url} onClick={this.toggleModal} onError={this.onImgError} title="Click to enlarge" alt="Not present"/> + <Modal isOpen={this.state.modal} fade={false} size="lg" toggle={this.toggle} className={this.props.className}> + <ModalHeader toggle={this.toggleModal}></ModalHeader> + <ModalBody> + <img style={{width: '100%'}} src={this.state.modalUrl} alt="Not present" /> + </ModalBody> + </Modal> + </React.Fragment> + ); } } diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js index 0f6fb0e3959592e791a13b087baf41a0b61bb356..053baf6efa4b7eac5b9f47cdeddd09ae4c953311 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js @@ -28,6 +28,8 @@ class StationTestChildViewC extends Component { modal_url: "" }; + imgLoadTimeout = {} + toggleModal = (e) => { this.setState({ modal: !this.state.modal, diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css index 7af89cd86a7cd3bcc2903f84a096f640893668b3..52ded037cab6a66b1085627d31e449f51a76ed66 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.css @@ -3,11 +3,16 @@ /* font color */ /* font color */ /* Data colors */ -.header { +.header-navbar { background-color: #773b6f; padding: 20px; color: white; } -.lofar { +.header-brand em { font-weight: bold; font-style: normal; } + +.header-brand span { + color: #8d8d8d; + font-size: 1.5rem; + font-style: italic; } diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js index 33aa07d52c2a20e68c69e6978e155e3ddca1ae7b..a1526a3a761209fbe2d11b3458b78df7b63254a5 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import './header.css' import { Link } from 'react-router-dom'; import { Collapse, Nav, @@ -9,6 +8,9 @@ import { Collapse, NavItem, NavLink } from 'reactstrap'; +// CSS +import './header.scss' + class Header extends Component { constructor(props){ @@ -33,8 +35,8 @@ class Header extends Component { render() { return ( - <Navbar className="header" dark expand="lg"> - <NavbarBrand><h1><em className='lofar'>LOFAR</em> Station monitor</h1></NavbarBrand> + <Navbar className="header-navbar" dark expand="lg"> + <NavbarBrand className='header-brand'><h1><em>LOFAR</em> Station monitor <span>v0.1</span></h1></NavbarBrand> <NavbarToggler onClick={() => this.toggle()} /> <Collapse isOpen={this.state.isOpen} navbar> <Nav className="ml-auto" navbar> diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss index 941c3a6d21574df1e2cbd90638a11f6e56c4d66f..e9ebe4bf37c348e833eab7a7d3a913415cb937b8 100644 --- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss +++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/header.scss @@ -1,12 +1,18 @@ @import '../themes/lofar-variables.scss'; -.header { +.header-navbar { background-color: $primary; padding: 20px; color: white; } -.lofar { +.header-brand em { font-weight: bold; font-style: normal; } + +.header-brand span { + color: $secondary-dark; + font-size: 1.5rem; + font-style: italic; +}