From a197f241091676e63bd0e82a3d2533d8c4fe401a Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Fri, 1 Feb 2019 11:12:25 -0700
Subject: [PATCH] keep material themeing within Mirador, do not leak out
external styles/classes
---
__tests__/src/components/App.test.js | 4 ++--
src/components/App.js | 24 ++++++++++++++++++------
src/styles/index.scss | 5 -----
3 files changed, 20 insertions(+), 13 deletions(-)
diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js
index 049550d33..145241c5e 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 05a4532b4..05b03c507 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 505643700..c7932e0ad 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;
--
GitLab