Commit 259c2019 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Adopted the web-sites new theme.

parent a8816bb5
Pipeline #74112 failed with stages
in 26 minutes and 51 seconds
...@@ -30,8 +30,9 @@ ...@@ -30,8 +30,9 @@
--> -->
<!-- fonts needed by material-ui --> <!-- 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: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+Mono:400,500"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600">
<!-- icon fonts for the meta-info browser --> <!-- icon fonts for the meta-info browser -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
......
...@@ -36,7 +36,7 @@ img.bg { ...@@ -36,7 +36,7 @@ img.bg {
} }
.pace .pace-progress { .pace .pace-progress {
background: #ffb300; background: #00CED1;
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
......
...@@ -73,13 +73,8 @@ function ReloadSnack() { ...@@ -73,13 +73,8 @@ function ReloadSnack() {
} }
const useMainMenuItemStyles = makeStyles(theme => ({ const useMainMenuItemStyles = makeStyles(theme => ({
itemText: { button: {
color: 'black', margin: theme.spacing(1)
paddingRight: theme.spacing(2),
paddingLeft: theme.spacing(2)
},
itemIcon: {
minWidth: 0
} }
})) }))
...@@ -88,12 +83,16 @@ function MainMenuItem({tooltip, title, path, icon}) { ...@@ -88,12 +83,16 @@ function MainMenuItem({tooltip, title, path, icon}) {
const classes = useMainMenuItemStyles() const classes = useMainMenuItemStyles()
const selected = path === pathname || (path !== '/' && pathname.startsWith(path)) const selected = path === pathname || (path !== '/' && pathname.startsWith(path))
return <Tooltip title={tooltip}> return <Tooltip title={tooltip}>
<MenuItem component={Link} to={path} selected={selected} dense> <Button
<ListItemIcon className={classes.itemIcon}> className={classes.button}
{icon} component={Link}
</ListItemIcon> to={path}
<ListItemText className={classes.itemText} primary={title}/> color={selected ? 'primary' : 'default'}
</MenuItem> size="small"
startIcon={icon}
>
{title}
</Button>
</Tooltip> </Tooltip>
} }
...@@ -121,7 +120,8 @@ class NavigationUnstyled extends React.Component { ...@@ -121,7 +120,8 @@ class NavigationUnstyled extends React.Component {
flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
alignContent: 'flex-start' alignContent: 'flex-start',
color: theme.palette.primary.main
}, },
appFrame: { appFrame: {
zIndex: 1, zIndex: 1,
...@@ -133,7 +133,7 @@ class NavigationUnstyled extends React.Component { ...@@ -133,7 +133,7 @@ class NavigationUnstyled extends React.Component {
}, },
appBar: { appBar: {
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
backgroundColor: '#20335D' backgroundColor: 'white'
}, },
menuButton: { menuButton: {
marginLeft: theme.spacing(1) marginLeft: theme.spacing(1)
...@@ -279,7 +279,7 @@ class NavigationUnstyled extends React.Component { ...@@ -279,7 +279,7 @@ class NavigationUnstyled extends React.Component {
{help ? <HelpDialog color="inherit" maxWidth="md" classes={{root: classes.helpButton}} {...help}/> : ''} {help ? <HelpDialog color="inherit" maxWidth="md" classes={{root: classes.helpButton}} {...help}/> : ''}
</div> </div>
<div className={classes.barActions}> <div className={classes.barActions}>
<LoginLogout variant="outlined" color="inherit" classes={{button: classes.barButton}} /> <LoginLogout color="primary" classes={{button: classes.barButton}} />
</div> </div>
</Toolbar> </Toolbar>
<MenuList classes={{root: classes.menu}}> <MenuList classes={{root: classes.menu}}>
......
...@@ -6,6 +6,7 @@ import { compose } from 'recompose' ...@@ -6,6 +6,7 @@ import { compose } from 'recompose'
import { Button, Link } from '@material-ui/core' import { Button, Link } from '@material-ui/core'
import { withApi } from './api' import { withApi } from './api'
import { keycloakBase, keycloakRealm } from '../config' import { keycloakBase, keycloakRealm } from '../config'
import LoginIcon from '@material-ui/icons/AccountCircle'
class LoginLogout extends React.Component { class LoginLogout extends React.Component {
static propTypes = { static propTypes = {
...@@ -25,7 +26,6 @@ class LoginLogout extends React.Component { ...@@ -25,7 +26,6 @@ class LoginLogout extends React.Component {
} }
}, },
link: { link: {
color: 'white',
textDecoration: 'underline' textDecoration: 'underline'
}, },
button: {} // to allow overrides button: {} // to allow overrides
...@@ -37,7 +37,7 @@ class LoginLogout extends React.Component { ...@@ -37,7 +37,7 @@ class LoginLogout extends React.Component {
if (keycloak.authenticated) { if (keycloak.authenticated) {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Typography color="inherit" variant="body1"> <Typography color="primary" variant="body1">
Welcome <Link Welcome <Link
className={classes.link} className={classes.link}
href={`${keycloakBase.replace(/\/$/, '')}/realms/${keycloakRealm}/account/`}> href={`${keycloakBase.replace(/\/$/, '')}/realms/${keycloakRealm}/account/`}>
...@@ -48,6 +48,7 @@ class LoginLogout extends React.Component { ...@@ -48,6 +48,7 @@ class LoginLogout extends React.Component {
className={classes.button} style={{marginLeft: 8}} className={classes.button} style={{marginLeft: 8}}
variant={variant} color={color} variant={variant} color={color}
onClick={() => keycloak.logout()} onClick={() => keycloak.logout()}
startIcon={<LoginIcon/>}
>Logout</Button> >Logout</Button>
</div> </div>
) )
...@@ -55,7 +56,9 @@ class LoginLogout extends React.Component { ...@@ -55,7 +56,9 @@ class LoginLogout extends React.Component {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Button <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> >Login / Register</Button>
</div> </div>
) )
......
...@@ -24,7 +24,7 @@ var styles = theme => { ...@@ -24,7 +24,7 @@ var styles = theme => {
'& pre, & pre[class*="language-"]': { '& pre, & pre[class*="language-"]': {
margin: '24px 0', margin: '24px 0',
padding: '12px 18px', padding: '12px 18px',
backgroundColor: theme.palette.primary.veryLight, backgroundColor: theme.palette.secondary.veryLight,
borderRadius: theme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
overflow: 'auto', overflow: 'auto',
WebkitOverflowScrolling: 'touch' // iOS momentum scrolling. WebkitOverflowScrolling: 'touch' // iOS momentum scrolling.
...@@ -36,7 +36,7 @@ var styles = theme => { ...@@ -36,7 +36,7 @@ var styles = theme => {
fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
padding: '3px 6px', padding: '3px 6px',
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.veryLight, backgroundColor: theme.palette.secondary.veryLight,
fontSize: 14 fontSize: 14
}, },
'& p code, & ul code, & pre code': { '& p code, & ul code, & pre code': {
......
...@@ -684,14 +684,16 @@ class LoginRequiredUnstyled extends React.Component { ...@@ -684,14 +684,16 @@ class LoginRequiredUnstyled extends React.Component {
let loginMessage = '' let loginMessage = ''
if (message) { if (message) {
loginMessage = <Typography> loginMessage = <Typography>
{this.props.message} If you do not have a NOMAD Repository account, you can register. {this.props.message}
</Typography> </Typography>
} }
return ( return (
<div className={classes.root}> <div className={classes.root}>
{loginMessage} <div>
<LoginLogout variant="outlined" color="primary" /> {loginMessage}
</div>
<LoginLogout color="primary" />
</div> </div>
) )
} }
......
...@@ -45,7 +45,8 @@ class ElementUnstyled extends React.Component { ...@@ -45,7 +45,8 @@ class ElementUnstyled extends React.Component {
boxShadow: 'none' boxShadow: 'none'
}, },
containedPrimary: { containedPrimary: {
backgroundColor: theme.palette.primary.main backgroundColor: theme.palette.primary.dark,
color: 'white'
}, },
number: { number: {
position: 'absolute', position: 'absolute',
......
...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types' ...@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { Select, MenuItem, Card, CardContent, CardHeader, makeStyles } from '@material-ui/core' import { Select, MenuItem, Card, CardContent, CardHeader, makeStyles } from '@material-ui/core'
import * as d3 from 'd3' import * as d3 from 'd3'
import { scaleBand, scalePow } from 'd3-scale' 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 { searchContext } from './SearchContext.js'
import * as searchQuantities from '../../searchQuantities.json' import * as searchQuantities from '../../searchQuantities.json'
...@@ -38,7 +38,6 @@ const useStyles = makeStyles(theme => ({ ...@@ -38,7 +38,6 @@ const useStyles = makeStyles(theme => ({
color: '#fff', color: '#fff',
padding: '4px 8px', padding: '4px 8px',
fontSize: '0.625rem', fontSize: '0.625rem',
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
lineHeight: '1.4em', lineHeight: '1.4em',
borderRadius: '4px', borderRadius: '4px',
backgroundColor: '#616161' backgroundColor: '#616161'
...@@ -111,7 +110,7 @@ export default function QuantityHistogram({ ...@@ -111,7 +110,7 @@ export default function QuantityHistogram({
const max = d3.max(data, d => d.value) || 1 const max = d3.max(data, d => d.value) || 1
x.domain([0, max]) 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 textColor = d => selected === d.key ? '#FFF' : '#000'
const container = d3.select(containerRef.current) const container = d3.select(containerRef.current)
...@@ -182,6 +181,7 @@ export default function QuantityHistogram({ ...@@ -182,6 +181,7 @@ export default function QuantityHistogram({
.attr('y', d => y(d.key) + 4) .attr('y', d => y(d.key) + 4)
.attr('text-anchor', 'start') .attr('text-anchor', 'start')
.style('fill', textColor) .style('fill', textColor)
.style('font-family', nomadFontFamily)
.text(d => d.name) .text(d => d.name)
item item
...@@ -192,6 +192,7 @@ export default function QuantityHistogram({ ...@@ -192,6 +192,7 @@ export default function QuantityHistogram({
.attr('x', d => width - 4) .attr('x', d => width - 4)
.attr('text-anchor', 'end') .attr('text-anchor', 'end')
.style('fill', textColor) .style('fill', textColor)
.style('font-family', nomadFontFamily)
.text(d => formatQuantity(d.value)) .text(d => formatQuantity(d.value))
item item
......
...@@ -15,7 +15,7 @@ import UploadList from './UploadsList' ...@@ -15,7 +15,7 @@ import UploadList from './UploadsList'
import GroupList from './GroupList' import GroupList from './GroupList'
import ApiDialogButton from '../ApiDialogButton' import ApiDialogButton from '../ApiDialogButton'
import SearchIcon from '@material-ui/icons/Search' import SearchIcon from '@material-ui/icons/Search'
import UploadsHistogram from './UploadsChart' import UploadsHistogram from './UploadsHistogram'
import QuantityHistogram from './QuantityHistogram' import QuantityHistogram from './QuantityHistogram'
import SearchContext, { searchContext } from './SearchContext' import SearchContext, { searchContext } from './SearchContext'
import {objectFilter} from '../../utils' import {objectFilter} from '../../utils'
...@@ -222,7 +222,7 @@ function UsersVisualization() { ...@@ -222,7 +222,7 @@ function UsersVisualization() {
setStatistics(['uploader']) setStatistics(['uploader'])
}, []) }, [])
return <div> return <div>
<UploadsHistogram /> <UploadsHistogram tooltips />
<QuantityHistogram quantity="uploader" title="Uploaders" /> <QuantityHistogram quantity="uploader" title="Uploaders" />
</div> </div>
} }
......
...@@ -2,8 +2,8 @@ import { createMuiTheme } from '@material-ui/core' ...@@ -2,8 +2,8 @@ import { createMuiTheme } from '@material-ui/core'
window.nomadEnv = window.nomadEnv || {} window.nomadEnv = window.nomadEnv || {}
export const appBase = window.nomadEnv.appBase.replace(/\/$/, '') 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 = 'http://labdev-nomad.esc.rzg.mpg.de/fairdi/nomad/testing-major/api'
export const apiBase = `${appBase}/api` // export const apiBase = `${appBase}/api`
export const optimadeBase = `${appBase}/optimade` export const optimadeBase = `${appBase}/optimade`
export const guiBase = process.env.PUBLIC_URL export const guiBase = process.env.PUBLIC_URL
export const matomoUrl = window.nomadEnv.matomoUrl 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 ...@@ -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/). of *cookies*. [Learn more](https://www.cookiesandyou.com/).
` `
export const nomadPrimaryColor = { export const nomadPrimaryColor = {
main: '#294277', main: '#008DC3',
light: '#596da6', light: '#03B9FF',
dark: '#001c4b', dark: '#005271',
veryLight: '#cfdeff' veryLight: '#10BAFB'
} }
export const nomadSecondaryColor = { export const nomadSecondaryColor = {
main: '#ffa000', main: '#00CED1',
light: '#ffc046', light: '#54DCDC',
veryLight: '#ffecb5', veryLight: '#B5F0F0',
dark: '#c56000' dark: '#007C7C'
} }
export const nomadFontFamily = [
'Titillium Web',
'sans-serif'
].join(',')
export const nomadTheme = createMuiTheme({ export const nomadTheme = createMuiTheme({
typography: { typography: {
useNextVariants: true useNextVariants: true,
fontFamily: nomadFontFamily,
fontWeightRegular: 400,
fontWeightMedium: 600
}, },
palette: { palette: {
primary: nomadPrimaryColor, primary: nomadPrimaryColor,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment