add custom appbar

packages/components-faraday/src/components/Admin/Admin.js

@@ -124,11 +124,12 @@ const Admin = ({
   decrementPage,
   page,
   itemsPerPage,
+  history,
 }) => (
   <div>
     <Header>
       <span>Users</span>
-      <AddButton>
+      <AddButton onClick={() => history.push('/')}>
         <Icon color="#667080">plus-circle</Icon>
         Add User
       </AddButton>

packages/components-faraday/src/components/AppBar/AppBar.js

+import React from 'react'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { withRouter } from 'react-router-dom'
+import { withState, withHandlers, compose } from 'recompose'
+
+const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => (
+  <Root>
+    {brand}
+    {user && (
+      <User>
+        <div onClick={toggleMenu}>
+          <Icon color="#667080">user</Icon>
+          <span>{user.username}</span>
+          <Icon color="#667080">chevron-down</Icon>
+        </div>
+        {expanded && (
+          <Dropdown>
+            <DropdownOption>Settings</DropdownOption>
+            <DropdownOption onClick={goTo('admin')}>
+              Admin dashboard
+            </DropdownOption>
+            <DropdownOption>Logout</DropdownOption>
+          </Dropdown>
+        )}
+      </User>
+    )}
+  </Root>
+)
+
+const Root = styled.div`
+  align-items: center;
+  box-shadow: 0 1px 0 0 #667080;
+  display: flex;
+  justify-content: space-between;
+  height: 60px;
+  padding: 10px 20px;
+`
+
+const User = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  height: 80px;
+  position: relative;
+
+  > div:first-child {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+  }
+
+  & span {
+    color: #667080;
+    font-family: Helvetica;
+    font-size: 16px;
+    margin-left: 10px;
+  }
+`
+
+const Dropdown = styled.div`
+  background-color: #fff;
+  border: 1px solid #667080;
+  position: absolute;
+  min-width: 150px;
+  right: 0;
+  top: 80px;
+  z-index: 10;
+`
+
+const DropdownOption = styled.div`
+  align-items: center;
+  color: #667080;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  height: 34px;
+  font-family: Helvetica;
+  font-size: 14px;
+  line-height: 2.43;
+  padding-left: 15px;
+
+  &:hover {
+    background-color: #d8d8d8;
+  }
+`
+
+export default compose(
+  withRouter,
+  withState('expanded', 'setExpanded', false),
+  withHandlers({
+    toggleMenu: ({ setExpanded }) => () => {
+      setExpanded(v => !v)
+    },
+    goTo: ({ setExpanded, history }) => path => () => {
+      history.push(path)
+      setExpanded(v => false)
+    },
+  }),
+)(AppBar)

packages/components-faraday/src/components/index.js

 export { default as Steps } from './Steps/Steps'
 export { default as Files } from './Files/Files'
+export { default as AppBar } from './AppBar/AppBar'
 export { default as AuthorList } from './AuthorList/AuthorList'
 export { default as SortableList } from './SortableList/SortableList'
 

packages/xpub-faraday/app/FaradayApp.js

+import React from 'react'
+import 'xpub-bootstrap'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import { withJournal } from 'xpub-journal'
+import { AppBar } from 'pubsweet-components-faraday/src/components'
+
+const App = ({ children, currentUser, journal }) => (
+  <Root>
+    <AppBar brand={journal.metadata.name} user={currentUser} />
+    {/* <AppBar
+      brandLink="/"
+      brandName={journal.metadata.name}
+      loginLink="/login"
+      logo={journal.metadata.logo}
+      logoutLink="/logout"
+      userName={currentUser ? currentUser.username : null}
+    /> */}
+
+    <MainContainer>{children}</MainContainer>
+  </Root>
+)
+
+const Root = styled.div`
+  font-family: 'Fira Sans', sans-serif;
+`
+
+const MainContainer = styled.div`
+  padding: 8px;
+  margin-top: 50px;
+`
+
+export default compose(
+  connect(state => ({
+    currentUser: state.currentUser.user,
+  })),
+  withJournal,
+)(App)

packages/xpub-faraday/app/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title> Faraday </title>
 </head>
-<body>
+<body style="margin: 0;">
   <div id="root"></div>
   <script src="/assets/app.js"></script>
 </body>

packages/xpub-faraday/app/routes.js

 import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
-import App from 'pubsweet-component-xpub-app/src/components'
-
 import {
   PrivateRoute,
   SignupPage,
@@ -18,8 +16,10 @@ import ConfirmationPage from 'pubsweet-components-faraday/src/components/UICompo
 import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound'
 import AdminPage from 'pubsweet-components-faraday/src/components/Admin'
 
+import FaradayApp from './FaradayApp'
+
 const Routes = () => (
-  <App>
+  <FaradayApp>
     <Switch>
       <Route component={LoginPage} exact path="/login" />
       <Route component={SignupPage} exact path="/signup" />
@@ -43,7 +43,7 @@ const Routes = () => (
       />
       <Route component={NotFound} />
     </Switch>
-  </App>
+  </FaradayApp>
 )
 
 export default Routes