Adopted the web-sites new theme.

gui/public/index.html

@@ -30,8 +30,9 @@
     -->
 
     <!-- fonts needed by material-ui -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500">
+    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500"> -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600">
     <!-- icon fonts for the meta-info browser -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 

gui/public/pace.css

@@ -36,7 +36,7 @@ img.bg {
 }
 
 .pace .pace-progress {
-  background: #ffb300;
+  background: #00CED1;
   position: fixed;
   z-index: 2000;
   top: 0;

gui/src/components/App.js

@@ -73,13 +73,8 @@ function ReloadSnack() {
 }
 
 const useMainMenuItemStyles = makeStyles(theme => ({
-  itemText: {
-    color: 'black',
-    paddingRight: theme.spacing(2),
-    paddingLeft: theme.spacing(2)
-  },
-  itemIcon: {
-    minWidth: 0
+  button: {
+    margin: theme.spacing(1)
   }
 }))
 
@@ -88,12 +83,16 @@ function MainMenuItem({tooltip, title, path, icon}) {
   const classes = useMainMenuItemStyles()
   const selected = path === pathname || (path !== '/' && pathname.startsWith(path))
   return <Tooltip title={tooltip}>
-    <MenuItem component={Link} to={path} selected={selected} dense>
-      <ListItemIcon className={classes.itemIcon}>
-        {icon}
-      </ListItemIcon>
-      <ListItemText className={classes.itemText} primary={title}/>
-    </MenuItem>
+    <Button
+      className={classes.button}
+      component={Link}
+      to={path}
+      color={selected ? 'primary' : 'default'}
+      size="small"
+      startIcon={icon}
+    >
+      {title}
+    </Button>
   </Tooltip>
 }
 
@@ -121,7 +120,8 @@ class NavigationUnstyled extends React.Component {
       flexGrow: 1,
       display: 'flex',
       alignItems: 'center',
-      alignContent: 'flex-start'
+      alignContent: 'flex-start',
+      color: theme.palette.primary.main
     },
     appFrame: {
       zIndex: 1,
@@ -133,7 +133,7 @@ class NavigationUnstyled extends React.Component {
     },
     appBar: {
       zIndex: theme.zIndex.drawer + 1,
-      backgroundColor: '#20335D'
+      backgroundColor: 'white'
     },
     menuButton: {
       marginLeft: theme.spacing(1)
@@ -279,7 +279,7 @@ class NavigationUnstyled extends React.Component {
                   {help ? <HelpDialog color="inherit" maxWidth="md" classes={{root: classes.helpButton}} {...help}/> : ''}
                 </div>
                 <div className={classes.barActions}>
-                  <LoginLogout variant="outlined" color="inherit" classes={{button: classes.barButton}} />
+                  <LoginLogout color="primary" classes={{button: classes.barButton}} />
                 </div>
               </Toolbar>
               <MenuList classes={{root: classes.menu}}>

gui/src/components/LoginLogout.js

@@ -6,6 +6,7 @@ import { compose } from 'recompose'
 import { Button, Link } from '@material-ui/core'
 import { withApi } from './api'
 import { keycloakBase, keycloakRealm } from '../config'
+import LoginIcon from '@material-ui/icons/AccountCircle'
 
 class LoginLogout extends React.Component {
   static propTypes = {
@@ -25,7 +26,6 @@ class LoginLogout extends React.Component {
       }
     },
     link: {
-      color: 'white',
       textDecoration: 'underline'
     },
     button: {} // to allow overrides
@@ -37,7 +37,7 @@ class LoginLogout extends React.Component {
     if (keycloak.authenticated) {
       return (
         <div className={classes.root}>
-          <Typography color="inherit" variant="body1">
+          <Typography color="primary" variant="body1">
             Welcome <Link
               className={classes.link}
               href={`${keycloakBase.replace(/\/$/, '')}/realms/${keycloakRealm}/account/`}>
@@ -48,6 +48,7 @@ class LoginLogout extends React.Component {
             className={classes.button} style={{marginLeft: 8}}
             variant={variant} color={color}
             onClick={() => keycloak.logout()}
+            startIcon={<LoginIcon/>}
           >Logout</Button>
         </div>
       )
@@ -55,7 +56,9 @@ class LoginLogout extends React.Component {
       return (
         <div className={classes.root}>
           <Button
-            className={classes.button} variant={variant} color={color} onClick={() => keycloak.login()}
+            className={classes.button} variant={variant} color={color}
+            startIcon={<LoginIcon/>}
+            onClick={() => keycloak.login()}
           >Login / Register</Button>
         </div>
       )

gui/src/components/Markdown.js

@@ -24,7 +24,7 @@ var styles = theme => {
       '& pre, & pre[class*="language-"]': {
         margin: '24px 0',
         padding: '12px 18px',
-        backgroundColor: theme.palette.primary.veryLight,
+        backgroundColor: theme.palette.secondary.veryLight,
         borderRadius: theme.shape.borderRadius,
         overflow: 'auto',
         WebkitOverflowScrolling: 'touch' // iOS momentum scrolling.
@@ -36,7 +36,7 @@ var styles = theme => {
         fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
         padding: '3px 6px',
         color: theme.palette.text.primary,
-        backgroundColor: theme.palette.primary.veryLight,
+        backgroundColor: theme.palette.secondary.veryLight,
         fontSize: 14
       },
       '& p code, & ul code, & pre code': {

gui/src/components/api.js

@@ -684,14 +684,16 @@ class LoginRequiredUnstyled extends React.Component {
     let loginMessage = ''
     if (message) {
       loginMessage = <Typography>
-        {this.props.message} If you do not have a NOMAD Repository account, you can register.
+        {this.props.message}
       </Typography>
     }
 
     return (
       <div className={classes.root}>
-        {loginMessage}
-        <LoginLogout variant="outlined" color="primary" />
+        <div>
+          {loginMessage}
+        </div>
+        <LoginLogout color="primary" />
       </div>
     )
   }

gui/src/components/search/PeriodicTable.js

@@ -45,7 +45,8 @@ class ElementUnstyled extends React.Component {
       boxShadow: 'none'
     },
     containedPrimary: {
-      backgroundColor: theme.palette.primary.main
+      backgroundColor: theme.palette.primary.dark,
+      color: 'white'
     },
     number: {
       position: 'absolute',

gui/src/components/search/QuantityHistogram.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Select, MenuItem, Card, CardContent, CardHeader, makeStyles } from '@material-ui/core'
 import * as d3 from 'd3'
 import { scaleBand, scalePow } from 'd3-scale'
-import { formatQuantity, nomadPrimaryColor, nomadSecondaryColor } from '../../config.js'
+import { formatQuantity, nomadPrimaryColor, nomadSecondaryColor, nomadFontFamily } from '../../config.js'
 import { searchContext } from './SearchContext.js'
 import * as searchQuantities from '../../searchQuantities.json'
 
@@ -38,7 +38,6 @@ const useStyles = makeStyles(theme => ({
     color: '#fff',
     padding: '4px 8px',
     fontSize: '0.625rem',
-    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
     lineHeight: '1.4em',
     borderRadius: '4px',
     backgroundColor: '#616161'
@@ -111,7 +110,7 @@ export default function QuantityHistogram({
     const max = d3.max(data, d => d.value) || 1
     x.domain([0, max])
 
-    const rectColor = d => selected === d.key ? nomadPrimaryColor.main : nomadSecondaryColor.light
+    const rectColor = d => selected === d.key ? nomadPrimaryColor.dark : nomadSecondaryColor.light
     const textColor = d => selected === d.key ? '#FFF' : '#000'
 
     const container = d3.select(containerRef.current)
@@ -182,6 +181,7 @@ export default function QuantityHistogram({
         .attr('y', d => y(d.key) + 4)
         .attr('text-anchor', 'start')
         .style('fill', textColor)
+        .style('font-family', nomadFontFamily)
         .text(d => d.name)
 
       item
@@ -192,6 +192,7 @@ export default function QuantityHistogram({
         .attr('x', d => width - 4)
         .attr('text-anchor', 'end')
         .style('fill', textColor)
+        .style('font-family', nomadFontFamily)
         .text(d => formatQuantity(d.value))
 
       item

gui/src/components/search/Search.js

@@ -15,7 +15,7 @@ import UploadList from './UploadsList'
 import GroupList from './GroupList'
 import ApiDialogButton from '../ApiDialogButton'
 import SearchIcon from '@material-ui/icons/Search'
-import UploadsHistogram from './UploadsChart'
+import UploadsHistogram from './UploadsHistogram'
 import QuantityHistogram from './QuantityHistogram'
 import SearchContext, { searchContext } from './SearchContext'
 import {objectFilter} from '../../utils'
@@ -222,7 +222,7 @@ function UsersVisualization() {
     setStatistics(['uploader'])
   }, [])
   return <div>
-    <UploadsHistogram />
+    <UploadsHistogram tooltips />
     <QuantityHistogram quantity="uploader" title="Uploaders" />
   </div>
 }

gui/src/config.js

@@ -2,8 +2,8 @@ import { createMuiTheme } from '@material-ui/core'
 
 window.nomadEnv = window.nomadEnv || {}
 export const appBase = window.nomadEnv.appBase.replace(/\/$/, '')
-// export const apiBase = 'http://labdev-nomad.esc.rzg.mpg.de/fairdi/nomad/testing-major/api'
-export const apiBase = `${appBase}/api`
+export const apiBase = 'http://labdev-nomad.esc.rzg.mpg.de/fairdi/nomad/testing-major/api'
+// export const apiBase = `${appBase}/api`
 export const optimadeBase = `${appBase}/optimade`
 export const guiBase = process.env.PUBLIC_URL
 export const matomoUrl = window.nomadEnv.matomoUrl
@@ -31,22 +31,30 @@ This web-site uses *cookies*. By using this web-site you agree to our use
 of *cookies*. [Learn more](https://www.cookiesandyou.com/).
 `
 export const nomadPrimaryColor = {
-  main: '#294277',
-  light: '#596da6',
-  dark: '#001c4b',
-  veryLight: '#cfdeff'
+  main: '#008DC3',
+  light: '#03B9FF',
+  dark: '#005271',
+  veryLight: '#10BAFB'
 }
 
 export const nomadSecondaryColor = {
-  main: '#ffa000',
-  light: '#ffc046',
-  veryLight: '#ffecb5',
-  dark: '#c56000'
+  main: '#00CED1',
+  light: '#54DCDC',
+  veryLight: '#B5F0F0',
+  dark: '#007C7C'
 }
 
+export const nomadFontFamily = [
+  'Titillium Web',
+  'sans-serif'
+].join(',')
+
 export const nomadTheme = createMuiTheme({
   typography: {
-    useNextVariants: true
+    useNextVariants: true,
+    fontFamily: nomadFontFamily,
+    fontWeightRegular: 400,
+    fontWeightMedium: 600
   },
   palette: {
     primary: nomadPrimaryColor,