Skip to content
Snippets Groups Projects
Commit a197f241 authored by Jack Reed's avatar Jack Reed Committed by Chris Beer
Browse files

keep material themeing within Mirador, do not leak out external styles/classes

parent 9eefe93d
Branches
Tags
No related merge requests found
......@@ -11,7 +11,7 @@ describe('App', () => {
config={{ theme: 'light' }}
/>,
);
expect(wrapper.find('div.mirador-app').length).toBe(1);
expect(wrapper.dive().find('div.mirador-app').length).toBe(1);
});
describe('FullScreen', () => {
......@@ -23,7 +23,7 @@ describe('App', () => {
config={{ theme: 'light' }}
/>,
);
expect(wrapper.find('FullScreen').first().prop('enabled')).toEqual(true);
expect(wrapper.dive().find('FullScreen').first().prop('enabled')).toEqual(true);
});
});
});
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CssBaseline from '@material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import classNames from 'classnames';
import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
import Fullscreen from 'react-fullscreen-crossbrowser';
import WorkspaceControlPanel from './WorkspaceControlPanel';
import Workspace from '../containers/Workspace';
......@@ -17,7 +17,9 @@ class App extends Component {
* @return {String} - HTML markup for the component
*/
render() {
const { workspace, setWorkspaceFullscreen, config } = this.props;
const {
workspace, setWorkspaceFullscreen, config, classes,
} = this.props;
const theme = createMuiTheme({
palette: {
type: config.theme,
......@@ -28,9 +30,8 @@ class App extends Component {
});
return (
<div className={ns('app')}>
<div className={classNames(classes.background, ns('app'))}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Fullscreen
enabled={workspace.isFullscreenEnabled}
onChange={isFullscreenEnabled => setWorkspaceFullscreen(isFullscreenEnabled)}
......@@ -47,6 +48,7 @@ class App extends Component {
App.propTypes = {
config: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
workspace: PropTypes.object, // eslint-disable-line react/forbid-prop-types
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
setWorkspaceFullscreen: PropTypes.func,
};
......@@ -55,4 +57,14 @@ App.defaultProps = {
setWorkspaceFullscreen: () => {},
};
export default App;
/**
Material UI style overrides
@private
*/
const styles = theme => ({
background: {
background: theme.palette.background.default,
},
});
export default withStyles(styles)(App);
@import 'variables';
body {
background: $white;
height: 100%;
}
.mirador {
&-workspace {
bottom: 0;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment