diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
index 7aa210075b6b06c078e237855daadf4a841f88d6..4eb2c0eb39c34c6ad54e83de44ecdd50fef2f366 100644
--- a/src/components/ManifestForm.js
+++ b/src/components/ManifestForm.js
@@ -75,7 +75,7 @@ export class ManifestForm extends Component {
{t('cancel')}
</Button>
)}
- <Button id="fetchBtn" type="submit" variant="contained" color="primary">
+ <Button id="fetchBtn" type="submit" variant="contained" color="secondary">
{t('fetchManifest')}
</Button>
</Grid>
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index 8ebcad834d121a3754dc3309234b304ce9a51bc7..8e64be531fb9c9eb4dfd4fb7bc0f5a0513da01c2 100644
--- a/src/components/ManifestListItem.js
+++ b/src/components/ManifestListItem.js
@@ -107,7 +107,7 @@ export class ManifestListItem extends React.Component {
}
</Grid>
<Grid item xs={8} sm={9}>
- <Typography component="span" variant="subtitle1" color="primary">
+ <Typography component="span" variant="subtitle1" color="secondary">
{title || manifestId}
</Typography>
</Grid>
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 7ffc326f1cd10da672a6fb40e7f1e95f64816b39..d8faa976e5de8b5554bf9f137e30a98ad5623fc4 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -37,7 +37,7 @@ export class WindowSideBarButtons extends Component {
onClick={() => (toggleWindowSideBarPanel('info'))}
>
<InfoIcon
- color={this.sideBarPanelCurrentlySelected('info') ? 'primary' : 'inherit'}
+ color={this.sideBarPanelCurrentlySelected('info') ? 'secondary' : 'inherit'}
/>
</IconButton>
<IconButton
@@ -49,7 +49,7 @@ export class WindowSideBarButtons extends Component {
onClick={() => (toggleWindowSideBarPanel('canvas_navigation'))}
>
<CanvasIndexIcon
- color={this.sideBarPanelCurrentlySelected('canvas_navigation') ? 'primary' : 'inherit'}
+ color={this.sideBarPanelCurrentlySelected('canvas_navigation') ? 'secondary' : 'inherit'}
/>
</IconButton>
</>
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index 2575b83fbb0a715111b3d4d4fbf4cd67cafc0082..ed05c9d4a2b2ffe6c1820088d08d318dd70d51b0 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -60,6 +60,7 @@ export class WindowSideBarCanvasPanel extends Component {
className={classNames(classes.clickable, classes.label)}
onClick={onClick}
variant="body2"
+ color="secondary"
>
{canvas.label}
</Typography>
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index ff0a3c41940cecdf354178901b149edb2eb19255..942745f7a46a777eab8ae3637e7f61ecb78fedc1 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -42,19 +42,19 @@ export class WindowThumbnailSettings extends Component {
<RadioGroup aria-label={t('position')} name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
<FormControlLabel
value="off"
- control={<Radio color="primary" icon={<ThumbnailsOffIcon />} checkedIcon={<ThumbnailsOffIcon />} />}
+ control={<Radio color="secondary" icon={<ThumbnailsOffIcon />} checkedIcon={<ThumbnailsOffIcon />} />}
label={t('off')}
labelPlacement="bottom"
/>
<FormControlLabel
value="bottom"
- control={<Radio color="primary" icon={<ThumbnailNavigationBottomIcon />} checkedIcon={<ThumbnailNavigationBottomIcon />} />}
+ control={<Radio color="secondary" icon={<ThumbnailNavigationBottomIcon />} checkedIcon={<ThumbnailNavigationBottomIcon />} />}
label={t('bottom')}
labelPlacement="bottom"
/>
<FormControlLabel
value="right"
- control={<Radio color="primary" icon={<ThumbnailNavigationRightIcon />} checkedIcon={<ThumbnailNavigationRightIcon />} />}
+ control={<Radio color="secondary" icon={<ThumbnailNavigationRightIcon />} checkedIcon={<ThumbnailNavigationRightIcon />} />}
label={t('right')}
labelPlacement="bottom"
/>
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 1eb134694654b38970223baaa06f01a2ef3fb229..a36cd1dcc2ff569dd77d2705f3d9d59a08b58642 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -27,7 +27,7 @@ export class WindowTopBar extends Component {
} = this.props;
return (
<AppBar position="relative">
- <Toolbar disableGutters className={classNames(classes.reallyDense, ns('window-top-bar'))} variant="dense">
+ <Toolbar disableGutters className={classNames(classes.windowTopBarStyle, ns('window-top-bar'))} variant="dense">
<IconButton
aria-label={t('toggleWindowSideBar')}
color="inherit"
diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js
index 8b7d99a0d596830cd59da6de3e5e1b8e67bd9767..729b4ee0a232de4774e27430800f4c8028cf01af 100644
--- a/src/components/WindowViewSettings.js
+++ b/src/components/WindowViewSettings.js
@@ -42,13 +42,13 @@ export class WindowViewSettings extends Component {
<RadioGroup aria-label={t('position')} name="position" value={windowViewType} onChange={this.handleChange} row>
<FormControlLabel
value="single"
- control={<Radio color="primary" icon={<SingleIcon />} checkedIcon={<SingleIcon />} />}
+ control={<Radio color="secondary" icon={<SingleIcon />} checkedIcon={<SingleIcon />} />}
label={t('single')}
labelPlacement="bottom"
/>
<FormControlLabel
value="book"
- control={<Radio color="primary" icon={<BookViewIcon />} checkedIcon={<BookViewIcon />} />}
+ control={<Radio color="secondary" icon={<BookViewIcon />} checkedIcon={<BookViewIcon />} />}
label={t('book')}
labelPlacement="bottom"
/>
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index 20c8c96bfeaad837014c34216adf563ed2d05e64..5fa01594bc23c04bb818be9a7994d3313f5f8b71 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -56,7 +56,7 @@ export class WorkspaceAdd extends React.Component {
<div className={ns('workspace-add')}>
{manifestList}
- <Fab variant="extended" disabled={addResourcesOpen} className={classes.fab} color="primary" onClick={() => (this.setAddResourcesVisibility(true))}>
+ <Fab variant="extended" disabled={addResourcesOpen} className={classes.fab} color="secondary" onClick={() => (this.setAddResourcesVisibility(true))}>
<AddIcon />
{t('addResource')}
</Fab>
@@ -75,9 +75,9 @@ export class WorkspaceAdd extends React.Component {
<Paper
className={classes.form}
>
- <AppBar position="absolute" color="primary" onClick={() => (this.setAddResourcesVisibility(false))}>
+ <AppBar position="absolute" color="secondary" onClick={() => (this.setAddResourcesVisibility(false))}>
<Toolbar>
- <IconButton className={classes.menuButton} color="inherit" aria-label={t('closeMenu')}>
+ <IconButton className={classes.menuButton} color="secondary" aria-label={t('closeMenu')}>
<ExpandMoreIcon />
</IconButton>
<Typography variant="h2" noWrap color="inherit" className={classes.typographyBody}>
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
index 9fe12fef28889d93de10ceea74f270742390363f..c0d78eaf05b541f32a828c6cd2ab8fb5cb2834fb 100644
--- a/src/components/WorkspaceAddButton.js
+++ b/src/components/WorkspaceAddButton.js
@@ -19,7 +19,7 @@ export class WorkspaceAddButton extends Component {
return (
<ListItem>
<Fab
- color="primary"
+ color="secondary"
id="addBtn"
aria-label={isWorkspaceAddVisible ? t('closeWindow') : t('add')}
className={classes.fab}
diff --git a/src/config/settings.js b/src/config/settings.js
index f0bf81a995ccec574b25f759897917a37a897b43..24e7359328bd1a68dd5fc4d0b3d00a0d75fa6935 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -5,6 +5,19 @@ export default {
theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
palette: {
type: 'light', // dark also available
+ primary: {
+ main: '#f5f5f5',
+ light: '#ffffff',
+ dark: '#eeeeee',
+ },
+ secondary: {
+ main: '#1967d2',
+ light: '#64b5f6',
+ dark: '#0d47a1',
+ },
+ error: {
+ main: '#b00020',
+ },
},
typography: {
useNextVariants: true // set so that console deprecation warning is removed
diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js
index 26c912aea4274dc48190d1accc24009007cb7b37..871a76678d52e30c4d6a942fbc1f88b9b9c63639 100644
--- a/src/containers/WindowTopBar.js
+++ b/src/containers/WindowTopBar.js
@@ -22,17 +22,22 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
toggleWindowSideBar: () => dispatch(actions.toggleWindowSideBar(windowId)),
});
-
-const styles = {
+/**
+ * @param theme
+ * @returns {{typographyBody: {flexGrow: number, fontSize: number|string},
+ * windowTopBarStyle: {minHeight: number, paddingLeft: number, backgroundColor: string}}}
+ */
+const styles = theme => ({
typographyBody: {
flexGrow: 1,
fontSize: '1em',
},
- reallyDense: {
+ windowTopBarStyle: {
minHeight: 32,
paddingLeft: 4,
+ backgroundColor: theme.palette.primary.light,
},
-};
+});
const enhance = compose(
withNamespaces(),