feat(dashboard): add appbar from hindawi ui

packages/component-faraday-ui/package.json

 {
-  "name": "component-faraday-ui",
-  "version": "1.0.0",
-  "main": "index.js",
+  "name": "pubsweet-component-faraday-ui",
+  "version": "0.0.1",
+  "main": "src",
   "license": "MIT",
   "dependencies": {
     "@pubsweet/ui": "^8.3.0",

packages/component-faraday-ui/src/AppBar.js

@@ -9,14 +9,14 @@ const AppBar = ({
   menu: Menu,
   fixed = true,
   autosave: Autosave,
-  journal: { backgroundImage, name },
+  journal: { metadata: { backgroundImage, nameText } },
 }) => (
   <Root fixed={fixed}>
     {backgroundImage && <JournalBackground img={backgroundImage} />}
     <LogoContainer>
       <Logo />
     </LogoContainer>
-    <H2>{name}</H2>
+    <H2>{nameText}</H2>
     <RightContainer>
       <Autosave />
       <Menu />

packages/component-faraday-ui/src/AppBar.md

@@ -2,8 +2,8 @@ A sticky app bar. For demo purposes it's not fixed to the top at the moment.
 
 ```js
 const currentUser = {
-  admin: true,
   user: {
+    admin: true,
     username: 'cocojambo',
     firstName: 'Alex',
     lastName: 'Munteanu'
@@ -36,8 +36,10 @@ const AutosaveComponent = () => <AutosaveIndicator
   logo={HindawiLogo}
   menu={MenuComponent}
   journal={{
-    name:'Chemistry Awesomeness', 
+    metadata: {
+      nameText:'Chemistry Awesomeness', 
     backgroundImage: 'https://images.hindawi.com/journals/jchem/jchem.banner.jpg'
+    },
   }}
   fixed={false}
   />
@@ -47,8 +49,8 @@ Without a journal background.
 
 ```js
 const currentUser = {
-  admin: true,
   user: {
+    admin: true,
     username: 'cocojambo',
     firstName: 'Alex',
     lastName: 'Munteanu'
@@ -82,7 +84,9 @@ const AutosaveComponent = () => <AutosaveIndicator
   logo={HindawiLogo}
   menu={MenuComponent}
   journal={{
-    name:'Chemistry Awesomeness',
+    metadata: {
+      nameText:'Chemistry Awesomeness',
+    },
   }}
   fixed={false}
   />

packages/component-faraday-ui/src/AppBarMenu.js

@@ -32,7 +32,7 @@ const AppBarMenu = ({
       {expanded && (
         <Dropdown>
           <DropdownOption onClick={goTo('/profile')}>My profile</DropdownOption>
-          {currentUser.admin && (
+          {currentUser.user.admin && (
             <DropdownOption onClick={goTo('/admin')}>
               Admin dashboard
             </DropdownOption>
@@ -97,7 +97,7 @@ const DropdownOption = styled.div`
   font-size: ${th('fontSizeBase')};
   line-height: ${th('lineHeightBase')};
 
-  height: calc(${th('gridUnit')} * 2);
+  height: calc(${th('gridUnit')} * 3);
   padding: ${th('gridUnit')};
 
   &:hover {

packages/component-faraday-ui/src/index.js

+export { default as AppBar } from './AppBar'
+export { default as AppBarMenu } from './AppBarMenu'
+export { default as AuthorCard } from './AuthorCard'
+export { default as AuthorTag } from './AuthorTag'
+export { default as AuthorTagList } from './AuthorTagList'
+export { default as AutosaveIndicator } from './AutosaveIndicator'
+export { default as ContextualBox } from './ContextualBox'
+export { default as File } from './File'
+export { default as IconButton } from './IconButton'
+export { default as Label } from './Label'
+export { default as Logo } from './Logo'
+export { default as ManuscriptCard } from './ManuscriptCard'
+export { default as PersonInfo } from './PersonInfo'
+export { default as Tag } from './Tag'
+export { default as Text } from './Text'
+
+// modals
+export * from './modals'

packages/component-faraday-ui/src/modals/index.js

+export { default as MultiAction } from './MultiAction'
+export { default as SingleActionModal } from './SingleActionModal'

packages/hindawi-theme/src/index.js

@@ -42,7 +42,7 @@ const hindawiTheme = {
   appBar: {
     colorBackground: '#ffffff',
     height: '60px',
-    boxShadow: '0 1px 2px 1px #dbdbdb',
+    boxShadow: '0 2px 3px 0 rgba(25, 102, 141, 0.19)',
   },
 
   accordion: {

packages/xpub-faraday/app/FaradayApp.js

 import React from 'react'
-import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { actions } from 'pubsweet-client'
 import { withJournal } from 'xpub-journal'
-import { AppBar } from 'pubsweet-components-faraday/src/components'
+import { withRouter } from 'react-router-dom'
+import { compose, withHandlers } from 'recompose'
+import { AppBar, Logo, AppBarMenu } from 'pubsweet-component-faraday-ui'
 
-const App = ({
-  journal,
-  children,
-  logoutUser,
-  currentUser,
-  isAuthenticated,
-}) => (
+const App = ({ journal, goTo, children, logout, currentUser }) => (
   <Root className="faraday-root">
     <AppBar
-      brand={journal.metadata.name}
-      isAuthenticated={isAuthenticated}
-      onLogoutClick={logoutUser}
-      user={currentUser}
+      journal={journal}
+      logo={() => (
+        <Logo
+          onClick={() => goTo('/')}
+          src={journal.metadata.logo}
+          title="Hindawi"
+        />
+      )}
+      menu={() => (
+        <AppBarMenu currentUser={currentUser} goTo={goTo} logout={logout} />
+      )}
     />
     <MainContainer className="faraday-main">{children}</MainContainer>
   </Root>
@@ -27,12 +29,17 @@ const App = ({
 export default compose(
   connect(
     state => ({
-      currentUser: state.currentUser.user,
-      isAuthenticated: state.currentUser.isAuthenticated,
+      currentUser: state.currentUser,
     }),
-    { logoutUser: actions.logoutUser },
+    { logout: actions.logoutUser },
   ),
   withJournal,
+  withRouter,
+  withHandlers({
+    goTo: ({ history }) => path => {
+      history.push(path)
+    },
+  }),
 )(App)
 
 const Root = styled.div`