use colors of theme where possible o2r-project#197

njakuschona · Jul 17, 2021 · 18e4d00 · 18e4d00
1 parent 8f84d16
commit 18e4d00
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 26 deletions.
diff --git a/ui/src/components/app/App.css b/ui/src/components/app/App.css
@@ -24,7 +24,7 @@
   }
 
   #header {
-    background-color: #004286;
+    background-color: #904286;
   }
 
   #links {

diff --git a/ui/src/components/app/App.js b/ui/src/components/app/App.js
@@ -19,7 +19,7 @@ import ERC from '../erc/ERC';
 
 const Header = ( props ) => {
   return (
-    <AppBar id="header">
+    <AppBar style={{backgroundColor : o2rTheme.palette.primary.main}} id="header">
       <Toolbar>
       <a href="/"><img src={logo} alt="o2r" id="headerLogo"/></a>
         <Typography variant="h4" color="inherit" style={{ flex: 1 }}>
@@ -57,7 +57,7 @@ const Header = ( props ) => {
 
 const Footer = () => {
   return(
-    <div className="mui-container mui--text-center" id="footer">
+    <div style={{backgroundColor : o2rTheme.palette.primary.main}} className="mui-container mui--text-center" id="footer">
       <BrowserRouter forceRefresh>
       <div id="links">
           <NavLink id="link" to="/">Home</NavLink> |&nbsp;

diff --git a/ui/src/components/createERC/requiredMetadata/Form.js b/ui/src/components/createERC/requiredMetadata/Form.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import { Card, TextField, Button, MenuItem, CardContent, Grid, Paper } from "@material-ui/core";
 import Authors from './Authors/Authors';
+import { useTheme } from '@material-ui/core/styles';
+
 import './form.css'
 export let valid2;
 
 export const Form = props => {
 
+    const theme = useTheme();
+
     const {
         values: { title, abstract, publicationDate, displayFile, mainFile, textLicense, dataLicense, codeLicense },
         errors,
@@ -228,17 +232,17 @@ export const Form = props => {
                                 }}
                             >
                                 {(Array.from(props.textLicenses, x => x.id).includes(props.originalMetadata.textLicense) || props.originalMetadata.textLicense === "") ? "" :
-                                    <MenuItem id={"licenseItem"}   key={props.originalMetadata.textLicense} value={props.originalMetadata.textLicense}>
+                                    <MenuItem style={{borderColor : theme.palette.warning.main, color:  theme.palette.warning.main}} id={"licenseItem"}   key={props.originalMetadata.textLicense} value={props.originalMetadata.textLicense}>
                                         {props.originalMetadata.textLicense}
                                     </MenuItem>}
-                                <MenuItem id={"menuItem"} key={props.leastRestrictiveData[0]} value={props.leastRestrictiveData[0]}>
+                                <MenuItem style={{backgroundColor : theme.palette.primary.main}} id={"menuItem"} key={props.leastRestrictiveData[0]} value={props.leastRestrictiveData[0]}>
                                     Least Restrictive
                                     </MenuItem>
-                                <MenuItem id={"menuItem"} key={props.mostRestrictiveData[0]} value={props.mostRestrictiveData[0]}>
+                                <MenuItem style={{backgroundColor : theme.palette.primary.main}} id={"menuItem"} key={props.mostRestrictiveData[0]} value={props.mostRestrictiveData[0]}>
                                     Most Restrictive
                                     </MenuItem>
                                 {props.textLicenses.map(option => (
-                                    <MenuItem key={option.id} value={option.id}>
+                                    <MenuItem  key={option.id} value={option.id}>
                                         {option.title}
                                     </MenuItem>
                                 ))}
@@ -261,13 +265,13 @@ export const Form = props => {
                                 }}
                             >
                                 {(Array.from(props.codeLicenses, x => x.id).includes(props.originalMetadata.codeLicense) || props.originalMetadata.codeLicense === "") ? "" :
-                                    <MenuItem id={"licenseItem"} key={props.originalMetadata.codeLicense} value={props.originalMetadata.codeLicense}>
+                                    <MenuItem id={"licenseItem"} style={{borderColor : theme.palette.warning.main, color:  theme.palette.warning.main}}  key={props.originalMetadata.codeLicense} value={props.originalMetadata.codeLicense}>
                                         {props.originalMetadata.codeLicense}
                                     </MenuItem>}
-                                <MenuItem id={"menuItem"} key={props.leastRestrictiveData[1]} value={props.leastRestrictiveData[1]}>
+                                <MenuItem id={"menuItem"} style={{backgroundColor : theme.palette.primary.main}} key={props.leastRestrictiveData[1]} value={props.leastRestrictiveData[1]}>
                                     Least Restrictive
                                     </MenuItem>
-                                <MenuItem id={"menuItem"} key={props.mostRestrictiveData[1]} value={props.mostRestrictiveData[1]}>
+                                <MenuItem id={"menuItem"} style={{backgroundColor : theme.palette.primary.main}} key={props.mostRestrictiveData[1]} value={props.mostRestrictiveData[1]}>
                                     Most Restrictive
                                     </MenuItem>
                                 {props.codeLicenses.map(option => (
@@ -295,14 +299,14 @@ export const Form = props => {
                                 }}
                             >
                                 {(Array.from(props.dataLicenses, x => x.id).includes(props.originalMetadata.dataLicense) || props.originalMetadata.dataLicense === "") ? "" :
-                                    <MenuItem id={"licenseItem"}  key={props.originalMetadata.dataLicense} value={props.originalMetadata.dataLicense}>
+                                    <MenuItem id={"licenseItem"}  style={{borderColor : theme.palette.warning.main, color:  theme.palette.warning.main}}  key={props.originalMetadata.dataLicense} value={props.originalMetadata.dataLicense}>
                                         {props.originalMetadata.dataLicense}
                                     </MenuItem>
                                 }
-                                <MenuItem id={"menuItem"} key={props.leastRestrictiveData[2]} value={props.leastRestrictiveData[2]}>
+                                <MenuItem id={"menuItem"} style={{backgroundColor : theme.palette.primary.main}} key={props.leastRestrictiveData[2]} value={props.leastRestrictiveData[2]}>
                                     Least Restrictive
                                     </MenuItem>
-                                <MenuItem id={"menuItem"} key={props.mostRestrictiveData[2]} value={props.mostRestrictiveData[2]}>
+                                <MenuItem id={"menuItem"} style={{backgroundColor : theme.palette.primary.main}} key={props.mostRestrictiveData[2]} value={props.mostRestrictiveData[2]}>
                                     Most Restrictive
                                     </MenuItem>
                                 {props.dataLicenses.map(option => (
@@ -353,7 +357,7 @@ export const Form = props => {
                             </Button>
                        }
                     </Paper>
-                    <div id={"errorMessage"}>
+                    <div id={"errorMessage"} style={{color:  theme.palette.failure.main}} >
                         {errors.title ? errors.title : ""}
                         {errors.title ? <br /> : ""}
                         {errors.abstract ? errors.abstract : ""}

diff --git a/ui/src/components/createERC/spatioTemporalMetadata/SpatioTemporalMetadata.js b/ui/src/components/createERC/spatioTemporalMetadata/SpatioTemporalMetadata.js
@@ -324,7 +324,7 @@ class SpatioTemporalMetadata extends React.Component {
                     Go To ERC
                   </Button>}
             </Card>
-            <div id={"errorMessage"}>
+            <div color="failure" id={"errorMessage"}>
               {!valid2 ? "Required Metadata is not valid" : ""} <br />
               {this.state.editing ? "Please stop or cancel the editing of the bbox" : ""}
               {this.state.drawing ? "Please finish drawing a new bbox" : ""}

diff --git a/ui/src/components/erc/Check/Check.js b/ui/src/components/erc/Check/Check.js
@@ -22,11 +22,11 @@ function Status(status) {
                 return <span style={{ "color": theme.palette.failure.main }}>Reproduction Failed (click on "Show Result" for details)</span>
             }
         case 'running':
-            return <span className="running">Running <CircularProgress size={15} /></span>
+            return <span className="running" style={{ color:  theme.palette.primary.main}} >Running <CircularProgress size={15} /></span>
         case 'skipped':
-            return <span className="skipped">Skipped</span>
+            return <span className="skipped" >Skipped</span>
         case 'queued':
-            return <span className="queued">Queued</span>
+            return <span className="queued" style={{ color:  theme.palette.warning.main}} >Queued</span>
         default:
             return <span>No Status</span>
     };

diff --git a/ui/src/components/erc/Check/Comparison/Comparison.js b/ui/src/components/erc/Check/Comparison/Comparison.js
@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
 import './comparison.css';
 import * as $ from 'jquery';
 
+
 const Transition = React.forwardRef(function Transition(props, ref) {
     return <Slide direction="up" ref={ref} {...props} />;
 });
@@ -94,18 +95,18 @@ class Comparison extends Component {
                     </AppBar>
                     {this.props.job.status === 'success' ?
                         <div className="compare_">
-                            <h4 className="title" style={{ marginLeft: "1%" }}> Original results </h4>
-                            <h4 className="title"> Reproduced results </h4>
+                            <h4 className="title"  color="primary"> Original results </h4>
+                            <h4 className="title" color="primary"  > Reproduced results </h4>
 
                             <Iframe className="display" id={'frame1'} url={config.baseUrl + "job/" + this.props.job.id + "/data/" + this.props.displayfile // eslint-disable-line
                             }></Iframe> 
                             <Iframe className="check" id={'frame2'} url={config.baseUrl + "job/" + this.props.job.id + "/data/check.html" // eslint-disable-line
                             }></Iframe>
                         </div> :
                         <div className="compare_">
-                            <h4 className="title_" > Original results </h4>
-                            <h4 className="title_"> Reproduced results </h4>
-                            <h4 className="title_" id="diffCaption"> Differences between original and reproduced results </h4>
+                            <h4 className="title_" color="primary" > Original results </h4>
+                            <h4 className="title_" color="primary"> Reproduced results </h4>
+                            <h4 className="title_" color="primary" id="diffCaption"> Differences between original and reproduced results </h4>
 
                             <Iframe className="display_" id={'frame1'} url={config.baseUrl + "compendium/" + this.props.job.compendium_id + "/data/" + this.props.displayfile // eslint-disable-line
                             }></Iframe>

diff --git a/ui/src/helpers/theme.js b/ui/src/helpers/theme.js
@@ -1,9 +1,9 @@
-import {createMuiTheme} from '@material-ui/core/styles';
+import {createTheme} from '@material-ui/core/styles';
 
-const o2rTheme = createMuiTheme({
+const o2rTheme = createTheme({
     palette: {
         primary : {
-            main: '#004286'
+            main: '#004286',
         },
         secondary: {
             main: '#220086'