diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js index 049550d337b924f4ba6b26f8cc44113faa1def0d..145241c5e9499b3ffb0a7aac8a51a78e22fd59a0 100644 --- a/__tests__/src/components/App.test.js +++ b/__tests__/src/components/App.test.js @@ -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); }); }); }); diff --git a/src/components/App.js b/src/components/App.js index 05a4532b4c9ad7aadfd923034c0075a9147f4d2c..05b03c507cdb06412824ea44fb36eab0c445973e 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,7 +1,7 @@ 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); diff --git a/src/styles/index.scss b/src/styles/index.scss index 5056437008e94385d19f50f23e3284cd8a90ceee..c7932e0ad740fb41574ea3cab8fa01bfc4cff5ba 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,10 +1,5 @@ @import 'variables'; -body { - background: $white; - height: 100%; -} - .mirador { &-workspace { bottom: 0;