exporting layout to a layout file

client/src/App.js

@@ -11,7 +11,7 @@ import { theme, globalStyles } from './styles'
 import { client } from './graphql/apollo'
 import Auth from './auth'
 
-import { Header, Footer, Home, Charts, Callback } from './views'
+import { Layout, Home, Charts, Callback } from './views'
 
 import Users from '@advancedalgos/users-client'
 import Teams from '@advancedalgos/teams-client'
@@ -28,8 +28,7 @@ export const MasterApp = (props) => (
     <ApolloProvider client={client}>
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
-        <Header auth={auth} />
-        <div className={props.classes.mainContainer}>
+        <Layout auth={auth}>
           <Switch>
             <Route exact path='/' component={Home} />
             <Route
@@ -60,8 +59,7 @@ export const MasterApp = (props) => (
               render={props => <KeyVault {...props} auth={auth} />}
             />
           </Switch>
-        </div>
-        <Footer />
+        </Layout>
       </MuiThemeProvider>
     </ApolloProvider>
   </BrowserRouter>

client/src/styles/index.js

@@ -66,9 +66,6 @@ export const globalStyles = theme => ({
     [theme.breakpoints.up('sm')]: {
       paddingBottom: theme.spacing.unit * 2
     }
-  },
-  mainContainer: {
-    minHeight: 'calc(100vh - 420px)'
   }
 })
 

client/src/views/index.js

@@ -3,5 +3,6 @@ import Footer from './footer'
 import Home from './home'
 import Charts from './charts'
 import Callback from './callback'
+import Layout from './layout'
 
-export { Header, Footer, Home, Charts, Callback }
+export { Layout, Header, Footer, Home, Charts, Callback }

client/src/views/layout/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Footer from '../footer'
+import Header from '../header'
+
+// styles
+import styles from './styles'
+
+class Index extends React.Component {
+  render () {
+    return (
+      <div className={this.props.classes.mainContainer}>
+        <Header auth={this.props.auth} />
+        {this.props.children}
+        <Footer />
+      </div>
+    )
+  }
+}
+
+export default withStyles(styles)(Index)

client/src/views/layout/styles.js

@@ -0,0 +1,7 @@
+const styles = theme => ({
+  mainContainer: {
+    minHeight: 1000
+  }
+})
+
+export default styles