From 0f156b7effdb9b3e43f36c2aec36867d5fdcf674 Mon Sep 17 00:00:00 2001
From: Christopher Hanna Johnson <chjohnson39@gmail.com>
Date: Fri, 22 Feb 2019 15:47:24 +0100
Subject: [PATCH] moves withStyles to containers (#1949)

* moves withStyles to containers
removes dive where applied and modifies tests
closes #1948

* adds jsdoc to styles
---
 __tests__/src/components/App.test.js          |  4 +--
 .../src/components/CompanionWindow.test.js    |  2 +-
 .../src/components/ManifestListItem.test.js   |  2 +-
 .../components/ManifestListItemError.test.js  |  3 +-
 .../src/components/WindowSideBar.test.js      |  2 +-
 .../WindowSideBarCanvasPanel.test.js          |  2 +-
 .../components/WindowSideBarInfoPanel.test.js |  4 +--
 __tests__/src/components/WindowTopBar.test.js |  2 +-
 .../components/WindowTopMenuButton.test.js    |  2 +-
 __tests__/src/components/WorkspaceAdd.test.js | 14 ++++----
 .../src/components/WorkspaceAddButton.test.js |  2 +-
 .../components/WorkspaceControlPanel.test.js  |  7 +++-
 .../WorkspaceFullScreenButton.test.js         |  2 +-
 .../components/WorkspaceMenuButton.test.js    |  2 +-
 __tests__/src/components/ZoomControls.test.js |  6 ++--
 src/components/App.js                         | 16 +++------
 src/components/CompanionWindow.js             | 19 +---------
 src/components/ManifestListItem.js            | 14 +-------
 src/components/ManifestListItemError.js       | 18 +---------
 src/components/WindowSideBar.js               | 21 +----------
 src/components/WindowSideBarCanvasPanel.js    | 18 +---------
 src/components/WindowSideBarInfoPanel.js      | 11 +-----
 src/components/WindowTopBar.js                | 14 +-------
 src/components/WindowTopMenuButton.js         | 12 +------
 src/components/WorkspaceAdd.js                | 26 +-------------
 src/components/WorkspaceAddButton.js          | 12 +------
 src/components/WorkspaceControlPanel.js       | 16 +--------
 src/components/WorkspaceFullScreenButton.js   | 12 +------
 src/components/WorkspaceMenuButton.js         | 12 +------
 src/components/ZoomControls.js                | 17 +--------
 src/containers/App.js                         | 14 +++++++-
 src/containers/CompanionWindow.js             | 24 +++++++++++--
 src/containers/ManifestForm.js                |  3 +-
 src/containers/ManifestListItem.js            | 20 +++++++++--
 src/containers/ManifestListItemError.js       | 22 ++++++++++--
 src/containers/WindowIcon.js                  | 16 ++++++++-
 src/containers/WindowList.js                  |  3 +-
 src/containers/WindowSideBar.js               | 23 +++++++++++-
 src/containers/WindowSideBarButtons.js        |  3 +-
 src/containers/WindowSideBarCanvasPanel.js    | 21 ++++++++++-
 src/containers/WindowSideBarInfoPanel.js      | 15 ++++++--
 src/containers/WindowSideBarPanel.js          |  3 +-
 src/containers/WindowThumbnailSettings.js     |  2 +-
 src/containers/WindowTopBar.js                | 17 +++++++--
 src/containers/WindowTopMenuButton.js         | 14 +++++++-
 src/containers/WindowViewSettings.js          |  3 +-
 src/containers/WorkspaceAdd.js                | 35 +++++++++++++++++--
 src/containers/WorkspaceAddButton.js          | 15 +++++++-
 src/containers/WorkspaceControlPanel.js       | 20 +++++++++++
 src/containers/WorkspaceExport.js             |  3 +-
 src/containers/WorkspaceFullScreenButton.js   | 16 +++++++--
 src/containers/WorkspaceMenu.js               |  3 +-
 src/containers/WorkspaceMenuButton.js         | 13 +++++++
 src/containers/WorkspaceSettings.js           |  3 +-
 src/containers/ZoomControls.js                | 23 ++++++++++--
 55 files changed, 345 insertions(+), 283 deletions(-)
 create mode 100644 src/containers/WorkspaceControlPanel.js

diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js
index b992db59b..0a84c0f45 100644
--- a/__tests__/src/components/App.test.js
+++ b/__tests__/src/components/App.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import Fullscreen from 'react-fullscreen-crossbrowser';
-import WorkspaceControlPanel from '../../../src/components/WorkspaceControlPanel';
+import WorkspaceControlPanel from '../../../src/containers/WorkspaceControlPanel';
 import Workspace from '../../../src/containers/Workspace';
 import WorkspaceAdd from '../../../src/containers/WorkspaceAdd';
 import App from '../../../src/components/App';
@@ -21,7 +21,7 @@ function createWrapper(props) {
       classes={{}}
       {...props}
     />,
-  ).dive(); // to unwrapp HOC created by withStyle()
+  );
 }
 
 describe('App', () => {
diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js
index f155abd8e..13ba8c1de 100644
--- a/__tests__/src/components/CompanionWindow.test.js
+++ b/__tests__/src/components/CompanionWindow.test.js
@@ -14,7 +14,7 @@ function createWrapper(props) {
       position="right"
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('CompanionWindow', () => {
diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js
index f3c85f267..142af43e4 100644
--- a/__tests__/src/components/ManifestListItem.test.js
+++ b/__tests__/src/components/ManifestListItem.test.js
@@ -15,7 +15,7 @@ function createWrapper(props) {
       t={t => t}
       {...props}
     />,
-  ).dive(); // to unwrapp HOC created by withStyle()
+  );
 }
 
 describe('ManifestListItem', () => {
diff --git a/__tests__/src/components/ManifestListItemError.test.js b/__tests__/src/components/ManifestListItemError.test.js
index 9606b3de0..5d84fd79a 100644
--- a/__tests__/src/components/ManifestListItemError.test.js
+++ b/__tests__/src/components/ManifestListItemError.test.js
@@ -9,13 +9,14 @@ import ManifestListItemError from '../../../src/components/ManifestListItemError
 function createWrapper(props) {
   return shallow(
     <ManifestListItemError
+      classes={{}}
       manifestId="http://example.com"
       onDismissClick={() => {}}
       onTryAgainClick={() => {}}
       t={key => key}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('ManifestListItemError', () => {
diff --git a/__tests__/src/components/WindowSideBar.test.js b/__tests__/src/components/WindowSideBar.test.js
index 74d0d0150..be0694041 100644
--- a/__tests__/src/components/WindowSideBar.test.js
+++ b/__tests__/src/components/WindowSideBar.test.js
@@ -5,7 +5,7 @@ import WindowSideBar from '../../../src/components/WindowSideBar';
 describe('WindowSideBar', () => {
   let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<WindowSideBar windowId="1" classes={{}} />).dive();
+    wrapper = shallow(<WindowSideBar windowId="1" classes={{}} />);
   });
 
   it('renders without an error', () => {
diff --git a/__tests__/src/components/WindowSideBarCanvasPanel.test.js b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
index 8f1de0a17..3ca22f646 100644
--- a/__tests__/src/components/WindowSideBarCanvasPanel.test.js
+++ b/__tests__/src/components/WindowSideBarCanvasPanel.test.js
@@ -27,7 +27,7 @@ describe('WindowSideBarCanvasPanel', () => {
         setCanvas={setCanvas}
         config={{ canvasNavigation: { height: 100 } }}
       />,
-    ).dive();
+    );
   });
 
   it('renders all needed elements', () => {
diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js
index c9cbc2cb7..ec625de88 100644
--- a/__tests__/src/components/WindowSideBarInfoPanel.test.js
+++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js
@@ -21,7 +21,7 @@ describe('WindowSideBarInfoPanel', () => {
           manifestMetadata={metadata}
           t={str => str}
         />,
-      ).dive();
+      );
     });
 
     it('renders header', () => {
@@ -89,7 +89,7 @@ describe('WindowSideBarInfoPanel', () => {
     beforeEach(() => {
       wrapper = shallow(
         <WindowSideBarInfoPanel />,
-      ).dive();
+      );
     });
 
     it('does render header', () => {
diff --git a/__tests__/src/components/WindowTopBar.test.js b/__tests__/src/components/WindowTopBar.test.js
index 4fe237023..94c0c0f2d 100644
--- a/__tests__/src/components/WindowTopBar.test.js
+++ b/__tests__/src/components/WindowTopBar.test.js
@@ -24,7 +24,7 @@ function createWrapper(props) {
       toggleWindowSideBar={() => {}}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('WindowTopBar', () => {
diff --git a/__tests__/src/components/WindowTopMenuButton.test.js b/__tests__/src/components/WindowTopMenuButton.test.js
index 4a0dea265..7da21e820 100644
--- a/__tests__/src/components/WindowTopMenuButton.test.js
+++ b/__tests__/src/components/WindowTopMenuButton.test.js
@@ -14,7 +14,7 @@ function createWrapper(props) {
       t={str => str}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('WindowTopMenuButton', () => {
diff --git a/__tests__/src/components/WorkspaceAdd.test.js b/__tests__/src/components/WorkspaceAdd.test.js
index 91a63ca19..cd0c32b0e 100644
--- a/__tests__/src/components/WorkspaceAdd.test.js
+++ b/__tests__/src/components/WorkspaceAdd.test.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import WorkspaceAdd from '../../../src/components/WorkspaceAdd';
+import ManifestListItem from '../../../src/containers/ManifestListItem';
 import fixture from '../../fixtures/version-2/002.json';
+import ManifestForm from '../../../src/containers/ManifestForm';
 
 /** create wrapper */
 function createWrapper(props) {
@@ -13,20 +15,20 @@ function createWrapper(props) {
       t={str => str}
       {...props}
     />,
-  ).dive();
+  );
 }
 
-describe('WorkspaceAddButton', () => {
+describe('WorkspaceAdd', () => {
   it('renders a list item for each manifest in the state', () => {
     const wrapper = createWrapper();
-    expect(wrapper.find('Connect(LoadNamespace(WithStyles(ManifestListItem)))').length).toBe(2);
+    expect(wrapper.find(ManifestListItem).length).toBe(2);
   });
 
   it('toggles the workspace visibility', () => {
     const setWorkspaceAddVisibility = jest.fn();
     const wrapper = createWrapper({ setWorkspaceAddVisibility });
 
-    wrapper.find('Connect(LoadNamespace(WithStyles(ManifestListItem)))').first().props().handleClose();
+    wrapper.find(ManifestListItem).first().props().handleClose();
     expect(setWorkspaceAddVisibility).toHaveBeenCalledWith(false);
   });
 
@@ -54,8 +56,8 @@ describe('WorkspaceAddButton', () => {
     const wrapper = createWrapper();
     wrapper.setState({ addResourcesOpen: true });
 
-    expect(wrapper.find('WithStyles(Drawer) Connect(LoadNamespace(ManifestForm))').length).toBe(1);
-    wrapper.find('WithStyles(Drawer) Connect(LoadNamespace(ManifestForm))').props().onCancel();
+    expect(wrapper.find('WithStyles(Drawer)').find(ManifestForm).length).toBe(1);
+    wrapper.find('WithStyles(Drawer)').find(ManifestForm).props().onCancel();
     expect(wrapper.find('WithStyles(Drawer)').props().open).toBe(false);
   });
 });
diff --git a/__tests__/src/components/WorkspaceAddButton.test.js b/__tests__/src/components/WorkspaceAddButton.test.js
index 7ab45d043..9c1fea083 100644
--- a/__tests__/src/components/WorkspaceAddButton.test.js
+++ b/__tests__/src/components/WorkspaceAddButton.test.js
@@ -13,7 +13,7 @@ function createWrapper(props) {
       t={str => str}
       {...props}
     />,
-  ).dive(); // unwrap HOC created by withStyles()
+  );
 }
 
 describe('WorkspaceAddButton', () => {
diff --git a/__tests__/src/components/WorkspaceControlPanel.test.js b/__tests__/src/components/WorkspaceControlPanel.test.js
index 8da2654d1..31e59d0a4 100644
--- a/__tests__/src/components/WorkspaceControlPanel.test.js
+++ b/__tests__/src/components/WorkspaceControlPanel.test.js
@@ -11,7 +11,12 @@ describe('WorkspaceControlPanel', () => {
   beforeEach(() => {
     store.dispatch(actions.receiveManifest('foo', fixture));
     store.dispatch(actions.receiveManifest('bar', fixture));
-    wrapper = shallow(<WorkspaceControlPanel store={store} />).dive();
+    wrapper = shallow(
+      <WorkspaceControlPanel
+        classes={{}}
+        store={store}
+      />,
+    );
   });
 
   it('renders without an error', () => {
diff --git a/__tests__/src/components/WorkspaceFullScreenButton.test.js b/__tests__/src/components/WorkspaceFullScreenButton.test.js
index 4fcb48a6b..88598ae50 100644
--- a/__tests__/src/components/WorkspaceFullScreenButton.test.js
+++ b/__tests__/src/components/WorkspaceFullScreenButton.test.js
@@ -12,7 +12,7 @@ describe('WorkspaceFullScreenButton', () => {
         classes={{}}
         setWorkspaceFullscreen={setWorkspaceFullscreen}
       />,
-    ).dive();
+    );
   });
 
   it('renders without an error', () => {
diff --git a/__tests__/src/components/WorkspaceMenuButton.test.js b/__tests__/src/components/WorkspaceMenuButton.test.js
index 9d127c5c7..ba48a869e 100644
--- a/__tests__/src/components/WorkspaceMenuButton.test.js
+++ b/__tests__/src/components/WorkspaceMenuButton.test.js
@@ -7,7 +7,7 @@ describe('WorkspaceMenuButton', () => {
   beforeEach(() => {
     wrapper = shallow(
       <WorkspaceMenuButton classes={{}} />,
-    ).dive();
+    );
   });
 
   it('renders without an error', () => {
diff --git a/__tests__/src/components/ZoomControls.test.js b/__tests__/src/components/ZoomControls.test.js
index ad3cc9910..1b8efb89d 100644
--- a/__tests__/src/components/ZoomControls.test.js
+++ b/__tests__/src/components/ZoomControls.test.js
@@ -12,12 +12,13 @@ describe('ZoomControls', () => {
     updateViewport = jest.fn();
     wrapper = shallow(
       <ZoomControls
+        classes={{}}
         windowId="xyz"
         viewer={viewer}
         showZoomControls={showZoomControls}
         updateViewport={updateViewport}
       />,
-    ).dive();
+    );
   });
 
   describe('with showZoomControls=false', () => {
@@ -32,12 +33,13 @@ describe('ZoomControls', () => {
       updateViewport = jest.fn();
       wrapper = shallow(
         <ZoomControls
+          classes={{}}
           windowId="xyz"
           viewer={viewer}
           showZoomControls
           updateViewport={updateViewport}
         />,
-      ).dive();
+      );
     });
 
     it('renders a couple buttons', () => {
diff --git a/src/components/App.js b/src/components/App.js
index e4b236f02..cee00e4bc 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Fullscreen from 'react-fullscreen-crossbrowser';
 import { I18nextProvider } from 'react-i18next';
-import WorkspaceControlPanel from './WorkspaceControlPanel';
+import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
 import Workspace from '../containers/Workspace';
 import WorkspaceAdd from '../containers/WorkspaceAdd';
 import ns from '../config/css-ns';
@@ -68,14 +68,6 @@ App.defaultProps = {
   isFullscreenEnabled: false,
   isWorkspaceAddVisible: false,
 };
-/**
- Material UI style overrides
- @private
- */
-const styles = theme => ({
-  background: {
-    background: theme.palette.background.default,
-  },
-});
 
-export default withStyles(styles)(App);
+
+export default App;
diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index b26f2f84c..4e373821a 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import CloseIcon from '@material-ui/icons/Close';
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
 import ns from '../config/css-ns';
 import WindowSideBarInfoPanel from '../containers/WindowSideBarInfoPanel';
 import WindowSideBarCanvasPanel from '../containers/WindowSideBarCanvasPanel';
@@ -76,20 +75,4 @@ CompanionWindow.defaultProps = {
   t: key => key,
 };
 
-/**
- * Styles for Material-UI HOC
- */
-const styles = theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  root: {
-    ...theme.mixins.gutters(),
-    width: '200px',
-    overflowY: 'scroll',
-  },
-});
-
-export default withStyles(styles)(CompanionWindow);
+export default CompanionWindow;
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index 6f91563f5..c827ef8c5 100644
--- a/src/components/ManifestListItem.js
+++ b/src/components/ManifestListItem.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Grid from '@material-ui/core/Grid';
@@ -161,15 +160,4 @@ ManifestListItem.defaultProps = {
   isFetching: false,
 };
 
-/** */
-const styles = theme => ({
-  root: {
-    ...theme.mixins.gutters(),
-  },
-  label: {
-    textTransform: 'initial',
-    textAlign: 'left',
-  },
-});
-
-export default withStyles(styles)(ManifestListItem);
+export default ManifestListItem;
diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js
index 2d4c82df3..24c1f419e 100644
--- a/src/components/ManifestListItemError.js
+++ b/src/components/ManifestListItemError.js
@@ -4,7 +4,6 @@ import Button from '@material-ui/core/Button';
 import ErrorIcon from '@material-ui/icons/ErrorOutline';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
 
 /**
  * ManifestListItemError renders a component displaying a
@@ -61,19 +60,4 @@ ManifestListItemError.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-/**
- Material UI styles
- @private
- */
-const styles = theme => ({
-  errorIcon: {
-    color: theme.palette.error.main,
-    height: '2rem',
-    width: '2rem',
-  },
-  manifestIdText: {
-    wordBreak: 'break-all',
-  },
-});
-
-export default withStyles(styles)(ManifestListItemError);
+export default ManifestListItemError;
diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js
index 5d6e00d7a..77dba007c 100644
--- a/src/components/WindowSideBar.js
+++ b/src/components/WindowSideBar.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Drawer from '@material-ui/core/Drawer';
-import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import WindowSideBarButtons from '../containers/WindowSideBarButtons';
 import WindowSideBarPanel from '../containers/WindowSideBarPanel';
@@ -74,22 +73,4 @@ WindowSideBar.defaultProps = {
   sideBarPanel: 'closed',
 };
 
-/**
- Material UI style overrides
- @private
- */
-const styles = theme => ({
-  toolbar: theme.mixins.toolbar,
-  drawer: {
-    overflowX: 'hidden',
-    left: 0,
-    width: 55,
-    flexShrink: 0,
-    height: '100%',
-  },
-  grow: {
-    flexGrow: 1,
-  },
-});
-
-export default withStyles(styles)(WindowSideBar);
+export default WindowSideBar;
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index e0e241f5c..b77714480 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import { withStyles } from '@material-ui/core/styles';
 import ValidationCanvas from './ValidationCanvas';
 import CanvasThumbnail from './CanvasThumbnail';
 import { getIdAndLabelOfCanvases } from '../state/selectors';
@@ -83,19 +82,4 @@ WindowSideBarCanvasPanel.propTypes = {
   windowId: PropTypes.string.isRequired,
 };
 
-/**
- * @private
- * custom style definitions
- */
-const styles = theme => ({
-  windowSideBarH2: theme.typography.h5,
-  clickable: {
-    cursor: 'pointer',
-  },
-  label: {
-    fontSize: '8pt',
-    paddingLeft: 8,
-  },
-});
-
-export default withStyles(styles)(WindowSideBarCanvasPanel);
+export default WindowSideBarCanvasPanel;
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index 0bdf0f6b5..a93dd6537 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
 import LabelValueMetadata from './LabelValueMetadata';
 import SanitizedHtml from './SanitizedHtml';
 import ns from '../config/css-ns';
@@ -96,12 +95,4 @@ WindowSideBarInfoPanel.defaultProps = {
   t: key => key,
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  windowSideBarH2: theme.typography.h5,
-  windowSideBarH3: theme.typography.h6,
-});
-
-export default withStyles(styles)(WindowSideBarInfoPanel);
+export default WindowSideBarInfoPanel;
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 846fe9578..61d1942c0 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -70,15 +69,4 @@ WindowTopBar.defaultProps = {
   t: key => key,
 };
 
-const styles = {
-  typographyBody: {
-    flexGrow: 1,
-    fontSize: '1em',
-  },
-  reallyDense: {
-    minHeight: 32,
-    paddingLeft: 4,
-  },
-};
-
-export default withStyles(styles)(WindowTopBar);
+export default WindowTopBar;
diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js
index a70bbb668..bbef7d000 100644
--- a/src/components/WindowTopMenuButton.js
+++ b/src/components/WindowTopMenuButton.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import WindowTopMenu from '../containers/WindowTopMenu';
 
@@ -78,13 +77,4 @@ WindowTopMenuButton.defaultProps = {
   t: key => key,
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  ctrlBtn: {
-    margin: theme.spacing.unit,
-  },
-});
-
-export default withStyles(styles)(WindowTopMenuButton);
+export default WindowTopMenuButton;
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index cd02c0766..256581132 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -9,7 +9,6 @@ import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core/styles';
 import ns from '../config/css-ns';
 import ManifestForm from '../containers/ManifestForm';
 import ManifestListItem from '../containers/ManifestListItem';
@@ -106,27 +105,4 @@ WorkspaceAdd.defaultProps = {
   t: key => key,
 };
 
-/** */
-const styles = theme => ({
-  form: {
-    ...theme.mixins.gutters(),
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
-    marginTop: 64,
-  },
-  fab: {
-    position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 2,
-  },
-  typographyBody: {
-    flexGrow: 1,
-    fontSize: '1em',
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-});
-
-export default withStyles(styles)(WorkspaceAdd);
+export default WorkspaceAdd;
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
index 00de5550d..027326832 100644
--- a/src/components/WorkspaceAddButton.js
+++ b/src/components/WorkspaceAddButton.js
@@ -4,7 +4,6 @@ import ListItem from '@material-ui/core/ListItem';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import ClearIcon from '@material-ui/icons/Clear';
-import { withStyles } from '@material-ui/core/styles';
 
 /**
  */
@@ -49,13 +48,4 @@ WorkspaceAddButton.defaultProps = {
   isWorkspaceAddVisible: false,
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  ctrlBtn: {
-    margin: theme.spacing.unit,
-  },
-});
-
-export default withStyles(styles)(WorkspaceAddButton);
+export default WorkspaceAddButton;
diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
index be919a78c..59a89b7d8 100644
--- a/src/components/WorkspaceControlPanel.js
+++ b/src/components/WorkspaceControlPanel.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import WorkspaceControlPanelButtons
   from '../containers/WorkspaceControlPanelButtons';
@@ -36,17 +35,4 @@ WorkspaceControlPanel.propTypes = {
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  ctrlBtn: {
-    margin: theme.spacing.unit,
-  },
-  drawer: {
-    overflowX: 'hidden',
-    height: '100%',
-  },
-});
-
-export default withStyles(styles)(WorkspaceControlPanel);
+export default WorkspaceControlPanel;
diff --git a/src/components/WorkspaceFullScreenButton.js b/src/components/WorkspaceFullScreenButton.js
index 96bac8ab1..66867963d 100644
--- a/src/components/WorkspaceFullScreenButton.js
+++ b/src/components/WorkspaceFullScreenButton.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import ListItem from '@material-ui/core/ListItem';
-import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 
 /**
@@ -34,13 +33,4 @@ WorkspaceFullScreenButton.defaultProps = {
   t: key => key,
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  ctrlBtn: {
-    margin: theme.spacing.unit,
-  },
-});
-
-export default withStyles(styles)(WorkspaceFullScreenButton);
+export default WorkspaceFullScreenButton;
diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js
index 913acac4a..3daaa8970 100644
--- a/src/components/WorkspaceMenuButton.js
+++ b/src/components/WorkspaceMenuButton.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import ListItem from '@material-ui/core/ListItem';
-import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import WorkspaceMenu from '../containers/WorkspaceMenu';
 
@@ -80,13 +79,4 @@ WorkspaceMenuButton.defaultProps = {
   t: key => key,
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  ctrlBtn: {
-    margin: theme.spacing.unit,
-  },
-});
-
-export default withStyles(styles)(WorkspaceMenuButton);
+export default WorkspaceMenuButton;
diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
index 779032290..1896c60ac 100644
--- a/src/components/ZoomControls.js
+++ b/src/components/ZoomControls.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -117,18 +116,4 @@ ZoomControls.defaultProps = {
   t: key => key,
 };
 
-/**
- * @private
- */
-const styles = theme => ({
-  zoom_controls: {
-    position: 'absolute',
-    right: 0,
-  },
-  ListItem: {
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-});
-
-export default withStyles(styles)(ZoomControls);
+export default ZoomControls;
diff --git a/src/containers/App.js b/src/containers/App.js
index 8b7f02d2e..87ebc50d9 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -1,5 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
 import * as actions from '../state/actions';
 import App from '../components/App';
 
@@ -27,9 +28,20 @@ const mapDispatchToProps = {
   setWorkspaceFullscreen: actions.setWorkspaceFullscreen,
 };
 
+/**
+ *
+ * @param theme
+ * @returns {{background: {background: string}}}
+ */
+const styles = theme => ({
+  background: {
+    background: theme.palette.background.default,
+  },
+});
+
 const enhance = compose(
+  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
-  // further HOC go here
 );
 
 export default enhance(App);
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index 0572435bf..6f67db4c4 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import * as actions from '../state/actions';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import CompanionWindow from '../components/CompanionWindow';
@@ -30,11 +31,30 @@ const mapDispatchToProps = {
   onCloseClick: actions.closeCompanionWindow,
 };
 
+/**
+ *
+ * @param theme
+ * @returns {{closeButton: {top: number, position: string, right: number},
+ * root: {overflowY: string, width: string}}}
+ */
+const styles = theme => ({
+  closeButton: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  root: {
+    ...theme.mixins.gutters(),
+    width: '200px',
+    overflowY: 'scroll',
+  },
+});
+
 const enhance = compose(
+  withNamespaces(),
+  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
-  withNamespaces(),
-  // further HOC
 );
 
 export default enhance(CompanionWindow);
diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js
index baae7e3c2..f8c68e390 100644
--- a/src/containers/ManifestForm.js
+++ b/src/containers/ManifestForm.js
@@ -12,9 +12,8 @@ import ManifestForm from '../components/ManifestForm';
 const mapDispatchToProps = { fetchManifest: actions.fetchManifest };
 
 const enhance = compose(
-  connect(null, mapDispatchToProps),
   withNamespaces(),
-  // further HOC go here
+  connect(null, mapDispatchToProps),
 );
 
 export default enhance(ManifestForm);
diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js
index bd49edaf0..da4d5bfd9 100644
--- a/src/containers/ManifestListItem.js
+++ b/src/containers/ManifestListItem.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import {
   getManifestTitle, getManifestLogo, getManifestThumbnail, getManifestCanvases, getManifestProvider,
 } from '../state/selectors';
@@ -30,10 +31,25 @@ const mapStateToProps = (state, { manifestId }) => {
  */
 const mapDispatchToProps = { addWindow: actions.addWindow, fetchManifest: actions.fetchManifest };
 
+/**
+ *
+ * @param theme
+ * @returns {{root: {}, label: {textAlign: string, textTransform: string}}}
+ */
+const styles = theme => ({
+  root: {
+    ...theme.mixins.gutters(),
+  },
+  label: {
+    textTransform: 'initial',
+    textAlign: 'left',
+  },
+});
+
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
-  // further HOC go here
+  withStyles(styles),
+  connect(mapStateToProps, mapDispatchToProps),
 );
 
 export default enhance(ManifestListItem);
diff --git a/src/containers/ManifestListItemError.js b/src/containers/ManifestListItemError.js
index 237c17f9b..5aa930fd4 100644
--- a/src/containers/ManifestListItemError.js
+++ b/src/containers/ManifestListItemError.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
 import { fetchManifest, removeManifest } from '../state/actions/manifest';
 import ManifestListItemError from '../components/ManifestListItemError';
 
@@ -10,10 +11,27 @@ const mapDispatchToProps = {
   onTryAgainClick: fetchManifest,
 };
 
+/**
+ *
+ * @param theme
+ * @returns {{manifestIdText: {wordBreak: string},
+ * errorIcon: {color: string, width: string, height: string}}}
+ */
+const styles = theme => ({
+  errorIcon: {
+    color: theme.palette.error.main,
+    height: '2rem',
+    width: '2rem',
+  },
+  manifestIdText: {
+    wordBreak: 'break-all',
+  },
+});
+
 const enhance = compose(
-  connect(null, mapDispatchToProps),
   withNamespaces(),
-  // further HOC
+  withStyles(styles),
+  connect(null, mapDispatchToProps),
 );
 
 export default enhance(ManifestListItemError);
diff --git a/src/containers/WindowIcon.js b/src/containers/WindowIcon.js
index 49e61e703..ac57448d9 100644
--- a/src/containers/WindowIcon.js
+++ b/src/containers/WindowIcon.js
@@ -1,4 +1,6 @@
 import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core';
+import { compose } from 'redux';
 import { getWindowManifest, getManifestLogo } from '../state/selectors';
 import WindowIcon from '../components/WindowIcon';
 
@@ -7,4 +9,16 @@ const mapStateToProps = (state, { windowId }) => ({
   manifestLogo: getManifestLogo(getWindowManifest(state, windowId)),
 });
 
-export default connect(mapStateToProps)(WindowIcon);
+const styles = {
+  logo: {
+    height: '2.5rem',
+    paddingRight: 8,
+  },
+};
+
+const enhance = compose(
+  withStyles(styles),
+  connect(mapStateToProps),
+);
+
+export default enhance(WindowIcon);
diff --git a/src/containers/WindowList.js b/src/containers/WindowList.js
index 86814d210..4679a79c7 100644
--- a/src/containers/WindowList.js
+++ b/src/containers/WindowList.js
@@ -26,9 +26,8 @@ const mapStateToProps = state => (
 );
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
-  // further HOC
+  connect(mapStateToProps, mapDispatchToProps),
 );
 
 export default enhance(WindowList);
diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js
index 0a7232205..ab74ea293 100644
--- a/src/containers/WindowSideBar.js
+++ b/src/containers/WindowSideBar.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { withStyles } from '@material-ui/core';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WindowSideBar from '../components/WindowSideBar';
 
@@ -15,10 +16,30 @@ const mapStateToProps = (state, props) => (
   }
 );
 
+/**
+ *
+ * @param theme
+ * @returns {{toolbar: CSSProperties | toolbar | {minHeight}, grow: {flexGrow: number},
+ * drawer: {overflowX: string, left: number, flexShrink: number, width: number, height: string}}}
+ */
+const styles = theme => ({
+  toolbar: theme.mixins.toolbar,
+  drawer: {
+    overflowX: 'hidden',
+    left: 0,
+    width: 55,
+    flexShrink: 0,
+    height: '100%',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+});
+
 const enhance = compose(
+  withStyles(styles),
   connect(mapStateToProps, null),
   miradorWithPlugins,
-  // further HOC
 );
 
 export default enhance(WindowSideBar);
diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js
index b95a16ffd..6347829f0 100644
--- a/src/containers/WindowSideBarButtons.js
+++ b/src/containers/WindowSideBarButtons.js
@@ -29,10 +29,9 @@ const mapStateToProps = (state, { windowId }) => ({
 
 
 const enhance = compose(
+  withNamespaces(),
   connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
-  withNamespaces(),
-  // further HOC go here
 );
 
 export default enhance(WindowSideBarButtons);
diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js
index 4eb503529..dddabb541 100644
--- a/src/containers/WindowSideBarCanvasPanel.js
+++ b/src/containers/WindowSideBarCanvasPanel.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
 import * as actions from '../state/actions';
 import WindowSideBarCanvasPanel from '../components/WindowSideBarCanvasPanel';
 import {
@@ -23,9 +24,27 @@ const mapStateToProps = (state, { windowId }) => {
 
 const mapDispatchToProps = { setCanvas: actions.setCanvas };
 
+/**
+ *
+ * @param theme
+ * @returns {{clickable: {cursor: string},
+ * label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
+ */
+const styles = theme => ({
+  windowSideBarH2: theme.typography.h5,
+  clickable: {
+    cursor: 'pointer',
+  },
+  label: {
+    fontSize: '8pt',
+    paddingLeft: 8,
+  },
+});
+
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
+  withStyles(styles),
+  connect(mapStateToProps, mapDispatchToProps),
 );
 
 export default enhance(WindowSideBarCanvasPanel);
diff --git a/src/containers/WindowSideBarInfoPanel.js b/src/containers/WindowSideBarInfoPanel.js
index 8214fc347..13b272b5f 100644
--- a/src/containers/WindowSideBarInfoPanel.js
+++ b/src/containers/WindowSideBarInfoPanel.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import {
   getDestructuredMetadata,
@@ -30,11 +31,21 @@ const mapStateToProps = (state, { windowId }) => ({
   manifestMetadata: getDestructuredMetadata(getWindowManifest(state, windowId).manifestation),
 });
 
+/**
+ *
+ * @param theme
+ * @returns {{windowSideBarH2: *, windowSideBarH3: *}}
+ */
+const styles = theme => ({
+  windowSideBarH2: theme.typography.h5,
+  windowSideBarH3: theme.typography.h6,
+});
+
 const enhance = compose(
-  connect(mapStateToProps, null),
   withNamespaces(),
+  withStyles(styles),
+  connect(mapStateToProps, null),
   miradorWithPlugins,
-  // further HOC
 );
 
 export default enhance(WindowSideBarInfoPanel);
diff --git a/src/containers/WindowSideBarPanel.js b/src/containers/WindowSideBarPanel.js
index e35523329..8773ac5ae 100644
--- a/src/containers/WindowSideBarPanel.js
+++ b/src/containers/WindowSideBarPanel.js
@@ -16,8 +16,7 @@ const mapStateToProps = (state, { windowId }) => ({
 });
 
 export default compose(
+  withNamespaces(),
   connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
-  withNamespaces(),
-  // further HOC
 )(WindowSideBarPanel);
diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js
index a0463090f..2f721a632 100644
--- a/src/containers/WindowThumbnailSettings.js
+++ b/src/containers/WindowThumbnailSettings.js
@@ -25,8 +25,8 @@ const mapStateToProps = (state, props) => (
 );
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
+  connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
   // further HOC go here
 );
diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js
index 191ebb59c..245fca7d1 100644
--- a/src/containers/WindowTopBar.js
+++ b/src/containers/WindowTopBar.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import * as actions from '../state/actions';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import { getWindowManifest, getManifestTitle } from '../state/selectors';
@@ -21,11 +22,23 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
   toggleWindowSideBar: () => dispatch(actions.toggleWindowSideBar(windowId)),
 });
 
+
+const styles = {
+  typographyBody: {
+    flexGrow: 1,
+    fontSize: '1em',
+  },
+  reallyDense: {
+    minHeight: 32,
+    paddingLeft: 4,
+  },
+};
+
 const enhance = compose(
+  withNamespaces(),
+  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
-  withNamespaces(),
-  // further HOC go here
 );
 
 export default enhance(WindowTopBar);
diff --git a/src/containers/WindowTopMenuButton.js b/src/containers/WindowTopMenuButton.js
index ebfedfeb3..c3ea20eca 100644
--- a/src/containers/WindowTopMenuButton.js
+++ b/src/containers/WindowTopMenuButton.js
@@ -1,12 +1,24 @@
 import { compose } from 'redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WindowTopMenuButton from '../components/WindowTopMenuButton';
 
+/**
+ *
+ * @param theme
+ * @returns {{ctrlBtn: {margin: (number|string)}}}
+ */
+const styles = theme => ({
+  ctrlBtn: {
+    margin: theme.spacing.unit,
+  },
+});
+
 const enhance = compose(
   withNamespaces(),
+  withStyles(styles),
   miradorWithPlugins,
-  // further HOC
 );
 
 export default enhance(WindowTopMenuButton);
diff --git a/src/containers/WindowViewSettings.js b/src/containers/WindowViewSettings.js
index 0b83fe4f2..b7e709397 100644
--- a/src/containers/WindowViewSettings.js
+++ b/src/containers/WindowViewSettings.js
@@ -25,10 +25,9 @@ const mapStateToProps = (state, props) => (
 );
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
+  connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
-  // further HOC go here
 );
 
 export default enhance(WindowViewSettings);
diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js
index 62fee859f..92a277f6f 100644
--- a/src/containers/WorkspaceAdd.js
+++ b/src/containers/WorkspaceAdd.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import * as actions from '../state/actions';
 import WorkspaceAdd from '../components/WorkspaceAdd';
 
@@ -18,10 +19,40 @@ const mapStateToProps = state => ({ manifests: state.manifests });
  */
 const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility };
 
+/**
+ *
+ * @param theme
+ * @returns {{typographyBody: {flexGrow: number, fontSize: string},
+ * form: {paddingBottom: number, paddingTop: number, marginTop: number},
+ * fab: {bottom: number, position: string, right: number},
+ * menuButton: {marginRight: number, marginLeft: number}}}
+ */
+const styles = theme => ({
+  form: {
+    ...theme.mixins.gutters(),
+    paddingTop: theme.spacing.unit * 2,
+    paddingBottom: theme.spacing.unit * 2,
+    marginTop: 64,
+  },
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing.unit * 2,
+    right: theme.spacing.unit * 2,
+  },
+  typographyBody: {
+    flexGrow: 1,
+    fontSize: '1em',
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+});
+
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
-  // further HOC go here
+  withStyles(styles),
+  connect(mapStateToProps, mapDispatchToProps),
 );
 
 export default enhance(WorkspaceAdd);
diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js
index b13dbd15f..a52d04d31 100644
--- a/src/containers/WorkspaceAddButton.js
+++ b/src/containers/WorkspaceAddButton.js
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import * as actions from '../state/actions';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WorkspaceAddButton from '../components/WorkspaceAddButton';
@@ -24,9 +25,21 @@ const mapStateToProps = state => (
  */
 const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddVisibility };
 
+/**
+ *
+ * @param theme
+ * @returns {{ctrlBtn: {margin: (number|string)}}}
+ */
+const styles = theme => ({
+  ctrlBtn: {
+    margin: theme.spacing.unit,
+  },
+});
+
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
+  withStyles(styles),
+  connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
 );
 
diff --git a/src/containers/WorkspaceControlPanel.js b/src/containers/WorkspaceControlPanel.js
new file mode 100644
index 000000000..d25f6a3e6
--- /dev/null
+++ b/src/containers/WorkspaceControlPanel.js
@@ -0,0 +1,20 @@
+import { withStyles } from '@material-ui/core/styles';
+import WorkspaceControlPanel from '../components/WorkspaceControlPanel';
+
+/**
+ *
+ * @param theme
+ * @returns {{ctrlBtn: {margin: (number|string)},
+ * drawer: {overflowX: string, height: string}}}
+ */
+const styles = theme => ({
+  ctrlBtn: {
+    margin: theme.spacing.unit,
+  },
+  drawer: {
+    overflowX: 'hidden',
+    height: '100%',
+  },
+});
+
+export default withStyles(styles)(WorkspaceControlPanel);
diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js
index 82dded070..5157cafc0 100644
--- a/src/containers/WorkspaceExport.js
+++ b/src/containers/WorkspaceExport.js
@@ -12,10 +12,9 @@ import WorkspaceExport from '../components/WorkspaceExport';
 const mapStateToProps = state => ({ state });
 
 const enhance = compose(
+  withNamespaces(),
   connect(mapStateToProps, {}),
   miradorWithPlugins,
-  withNamespaces(),
-  // further HOC go here
 );
 
 export default enhance(WorkspaceExport);
diff --git a/src/containers/WorkspaceFullScreenButton.js b/src/containers/WorkspaceFullScreenButton.js
index 64f9bd732..a274b21e2 100644
--- a/src/containers/WorkspaceFullScreenButton.js
+++ b/src/containers/WorkspaceFullScreenButton.js
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import * as actions from '../state/actions';
 import WorkspaceFullScreenButton
@@ -13,11 +14,22 @@ import WorkspaceFullScreenButton
  */
 const mapDispatchToProps = { setWorkspaceFullscreen: actions.setWorkspaceFullscreen };
 
+/**
+ *
+ * @param theme
+ * @returns {{ctrlBtn: {margin: (number|string)}}}
+ */
+const styles = theme => ({
+  ctrlBtn: {
+    margin: theme.spacing.unit,
+  },
+});
+
 const enhance = compose(
-  connect(null, mapDispatchToProps),
   withNamespaces(),
+  withStyles(styles),
+  connect(null, mapDispatchToProps),
   miradorWithPlugins,
-  // further HOC
 );
 
 export default enhance(WorkspaceFullScreenButton);
diff --git a/src/containers/WorkspaceMenu.js b/src/containers/WorkspaceMenu.js
index aa1bdd2e3..38e36d2bb 100644
--- a/src/containers/WorkspaceMenu.js
+++ b/src/containers/WorkspaceMenu.js
@@ -22,10 +22,9 @@ const mapStateToProps = state => (
 );
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
+  connect(mapStateToProps, mapDispatchToProps),
   miradorWithPlugins,
-  // further HOC
 );
 
 export default enhance(WorkspaceMenu);
diff --git a/src/containers/WorkspaceMenuButton.js b/src/containers/WorkspaceMenuButton.js
index 0ccd4218f..1273953f2 100644
--- a/src/containers/WorkspaceMenuButton.js
+++ b/src/containers/WorkspaceMenuButton.js
@@ -1,10 +1,23 @@
 import { compose } from 'redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import miradorWithPlugins from '../lib/miradorWithPlugins';
 import WorkspaceMenuButton from '../components/WorkspaceMenuButton';
 
+/**
+ *
+ * @param theme
+ * @returns {{ctrlBtn: {margin: (number|string)}}}
+ */
+const styles = theme => ({
+  ctrlBtn: {
+    margin: theme.spacing.unit,
+  },
+});
+
 const enhance = compose(
   withNamespaces(),
+  withStyles(styles),
   miradorWithPlugins,
   // further HOC
 );
diff --git a/src/containers/WorkspaceSettings.js b/src/containers/WorkspaceSettings.js
index 50b697135..1250a96fa 100644
--- a/src/containers/WorkspaceSettings.js
+++ b/src/containers/WorkspaceSettings.js
@@ -25,9 +25,8 @@ const mapStateToProps = state => (
 );
 
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
-  // further HOC go here
+  connect(mapStateToProps, mapDispatchToProps),
 );
 
 export default enhance(WorkspaceSettings);
diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js
index a7acfd982..a3640e2ff 100644
--- a/src/containers/ZoomControls.js
+++ b/src/containers/ZoomControls.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withNamespaces } from 'react-i18next';
+import { withStyles } from '@material-ui/core';
 import * as actions from '../state/actions';
 import ZoomControls from '../components/ZoomControls';
 
@@ -16,7 +17,6 @@ const mapStateToProps = (state, props) => (
   }
 );
 
-
 /**
  * mapDispatchToProps - used to hook up connect to action creators
  * @memberof Workspace
@@ -24,10 +24,27 @@ const mapStateToProps = (state, props) => (
  */
 const mapDispatchToProps = { updateViewport: actions.updateViewport };
 
+/**
+ *
+ * @param theme
+ * @returns {{zoom_controls: {position: string, right: number},
+ * ListItem: {paddingBottom: number, paddingTop: number}}}
+ */
+const styles = theme => ({
+  zoom_controls: {
+    position: 'absolute',
+    right: 0,
+  },
+  ListItem: {
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+});
+
 const enhance = compose(
-  connect(mapStateToProps, mapDispatchToProps),
   withNamespaces(),
-  // further HOC go here
+  withStyles(styles),
+  connect(mapStateToProps, mapDispatchToProps),
 );
 
 export default enhance(ZoomControls);
-- 
GitLab