Merge branch 'layout' into 'master'

feat: add margins to content

See merge request !36

app/app.js

@@ -11,13 +11,14 @@ import theme from '@pubsweet/elife-theme'
 import Routes from './routes'
 import * as AuthorDetailsSchema from './components/submission/AuthorDetails/AuthorDetailsSchema'
 
+const pixelGridUnit = parseInt(theme.gridUnit, 10)
 theme.space = [
   0,
-  theme.gridUnit / 4,
-  theme.gridUnit / 2,
-  theme.gridUnit,
-  theme.gridUnit * 2,
-  theme.gridUnit * 4,
+  pixelGridUnit / 4,
+  pixelGridUnit / 2,
+  pixelGridUnit,
+  pixelGridUnit * 2,
+  pixelGridUnit * 4,
 ]
 
 const history = createHistory()

app/components/global/AppBar.js

@@ -7,7 +7,7 @@ import { CURRENT_USER } from './queries'
 
 const ElifeAppBar = ({ history, currentUser }) => (
   <AppBar
-    brand="eLife"
+    brand={<img alt="eLife" src="/assets/elife-logo.png" />}
     navLinkComponents={[<Link to="/">Dashboard</Link>]}
     onLogoutClick={() => {
       window.localStorage.removeItem('token')

app/components/global/Layout.js

+import React from 'react'
+import { Box } from 'grid-styled'
+import AppBar from './AppBar'
+
+const Layout = ({ children }) => (
+  <React.Fragment>
+    <AppBar />
+    <Box mx={[1, 3]}>{children}</Box>
+  </React.Fragment>
+)
+
+export default Layout

app/routes.js

 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
-import {
-  AppBar,
-  AuthenticatedComponent,
-  Dashboard,
-  LoginPage,
-} from './components'
+import { AuthenticatedComponent, Dashboard, LoginPage } from './components'
+import Layout from './components/global/Layout'
 import SubmissionPage from './components/submission/SubmissionPage'
 import ManuscriptPage from './components/manuscript/ManuscriptPage'
 
@@ -14,12 +10,13 @@ const Routes = () => (
   <Switch>
     <Route component={LoginPage} path="/login" />
     <AuthenticatedComponent>
-      <AppBar />
-      <Switch>
-        <Route component={SubmissionPage} path="/submit" />
-        <Route component={ManuscriptPage} path="/manuscript" />
-        <Route component={Dashboard} />
-      </Switch>
+      <Layout>
+        <Switch>
+          <Route component={SubmissionPage} path="/submit" />
+          <Route component={ManuscriptPage} path="/manuscript" />
+          <Route component={Dashboard} />
+        </Switch>
+      </Layout>
     </AuthenticatedComponent>
   </Switch>
 )