fix(styles): removed unneeded transition declarations

and switched to the emotion approach to application. finally got peer dependency compatibility
issues worked out, so improved enforcement

src/molecules/header/presentational-test.js

@@ -3,7 +3,7 @@ import {AppBar, IconButton, Toolbar, Typography} from '@material-ui/core';
 import {Menu as MenuIcon} from '@material-ui/icons';
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import {Header} from './presentational';
+import Header from './presentational';
 
 suite('header', () => {
   test('that the app-bar from material-ui is used', () => {

src/molecules/header/presentational.js

@@ -1,34 +1,13 @@
 import React from 'react';
-import {func, shape, string} from 'prop-types';
-import {AppBar, IconButton, Toolbar, Typography, withStyles} from '@material-ui/core';
+import {func} from 'prop-types';
+import {AppBar, IconButton, Toolbar, Typography} from '@material-ui/core';
 import {Menu as MenuIcon} from '@material-ui/icons';
 import travi from 'travi';
-import classNames from 'classnames';
 import Logo from '../../atoms/logo';
-import {drawerWidth} from '../navigation/styles';
 
-function styles(theme) {
-  return ({
-    appBar: {
-      transition: theme.transitions.create(['margin', 'width'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      })
-    },
-    appBarShift: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-      transition: theme.transitions.create(['margin', 'width'], {
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen
-      })
-    }
-  });
-}
-
-export function Header({onNavigationDrawerToggle, classes}) {
+export default function Header({onNavigationDrawerToggle}) {
   return (
-    <AppBar position="fixed" className={classNames(classes.appBar/* , {[classes.appBarShift]: navigationOpen} */)}>
+    <AppBar position="fixed">
       <Toolbar disableGutters>
         <IconButton
           color="inherit"
@@ -50,9 +29,5 @@ export function Header({onNavigationDrawerToggle, classes}) {
 
 Header.displayName = 'Header';
 Header.propTypes = {
-  onNavigationDrawerToggle: func.isRequired,
-  classes: shape({appBar: string, appBarShift: string})
+  onNavigationDrawerToggle: func.isRequired
 };
-Header.defaultProps = {classes: {}};
-
-export default withStyles(styles, {withTheme: true})(Header);

src/molecules/navigation/styles.js

@@ -1,9 +1,7 @@
 /* eslint import/prefer-default-export: off */
-export const drawerWidth = 240;
-
 export function styles(theme) {
   return ({
-    paper: {width: drawerWidth},
+    paper: {width: 240},
     drawerHeader: {
       display: 'flex',
       alignItems: 'center',

src/organisms/layout/presentational-test.js

@@ -5,7 +5,7 @@ import {assert} from 'chai';
 import any from '@travi/any';
 import sinon from 'sinon';
 import * as wrappedMaterial from '../../../thirdparty-wrappers/material-ui';
-import {Layout} from './presentational';
+import Layout from './presentational';
 import Header from '../../molecules/header';
 import NavigationDrawer from '../../molecules/navigation';
 import * as themeCreator from '../../theme';

src/organisms/layout/presentational.js

@@ -1,36 +1,13 @@
 import React from 'react';
-import {bool, func, node, shape, string} from 'prop-types';
-import {CssBaseline, withStyles} from '@material-ui/core';
+import {bool, func, node} from 'prop-types';
+import {CssBaseline} from '@material-ui/core';
 import {ThemeProvider} from '@material-ui/styles';
-import classNames from 'classnames';
 import {useMediaQuery} from '../../../thirdparty-wrappers/material-ui';
 import Header from '../../molecules/header';
 import NavigationDrawer from '../../molecules/navigation';
 import createTheme from '../../theme';
-import {styles as drawerStyles} from '../../molecules/navigation/styles';
 
-function styles(theme) {
-  return ({
-    ...drawerStyles(theme),
-    content: {
-      flexGrow: 1,
-      transition: theme.transitions.create('margin', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      }),
-      //   marginLeft: -drawerWidth
-      // },
-      // contentShift: {
-      //   transition: theme.transitions.create('margin', {
-      //     easing: theme.transitions.easing.easeOut,
-      //     duration: theme.transitions.duration.enteringScreen
-      //   }),
-      marginLeft: 0
-    }
-  });
-}
-
-export function Layout({children, navigationOpen, onNavigationDrawerToggle, classes}) {
+export default function Layout({children, navigationOpen, onNavigationDrawerToggle}) {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
   return (
@@ -39,8 +16,7 @@ export function Layout({children, navigationOpen, onNavigationDrawerToggle, clas
       <div css={{display: 'flex'}}>
         <Header onNavigationDrawerToggle={onNavigationDrawerToggle} />
         <NavigationDrawer open={navigationOpen} onToggle={onNavigationDrawerToggle} />
-        <main id="main-content" className={classNames(classes.content/* , {[classes.contentShift]: navigationOpen} */)}>
-          <div className={classes.drawerHeader} />
+        <main id="main-content" css={{marginLeft: 0}}>
           {children}
         </main>
       </div>
@@ -51,9 +27,5 @@ export function Layout({children, navigationOpen, onNavigationDrawerToggle, clas
 Layout.propTypes = {
   children: node.isRequired,
   navigationOpen: bool,
-  onNavigationDrawerToggle: func.isRequired,
-  classes: shape({content: string, contentShift: string})
+  onNavigationDrawerToggle: func.isRequired
 };
-Layout.defaultProps = {classes: {}};
-
-export default withStyles(styles, {withTheme: true})(Layout);