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 @@
-->
<!-- 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">
......
......@@ -36,7 +36,7 @@ img.bg {
}
.pace .pace-progress {
background: #ffb300;
background: #00CED1;
position: fixed;
z-index: 2000;
top: 0;
......
......@@ -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}}>
......
......@@ -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>
)
......
......@@ -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': {
......
......@@ -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>
)
}
......
......@@ -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',
......
......@@ -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
......
......@@ -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>
}
......
......@@ -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,
......
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