add admin dashboard with users roles and config

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

@@ -4,102 +4,6 @@ import { Icon, Menu } from '@pubsweet/ui'
 
 import { Pagination } from './'
 
-const AddButton = styled.button`
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  font-family: Helvetica;
-  font-size: 12px;
-  text-align: left;
-  color: #667080;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-`
-
-const Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  & span {
-    font-family: Helvetica;
-    font-size: 24px;
-    font-weight: bold;
-    text-align: left;
-    color: #667080;
-  }
-`
-
-const SubHeader = styled.div`
-  align-items: center;
-  border-bottom: 1px solid #667080;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 20px;
-  padding-bottom: 10px;
-
-  > div:first-child {
-    display: flex;
-    align-items: center;
-  }
-
-  span {
-    font-family: Helvetica;
-    font-size: 14px;
-    text-align: left;
-    color: #667080;
-  }
-`
-
-const Table = styled.table`
-  border-spacing: 0;
-  border-collapse: collapse;
-  margin-top: 10px;
-  width: 100vw;
-
-  & thead tr {
-    height: 40px;
-    border-bottom: 1px solid #667080;
-    font-family: Helvetica;
-    font-size: 14px;
-    font-weight: bold;
-    text-align: left;
-    color: #667080;
-  }
-`
-
-const Row = styled.tr`
-  border-bottom: 1px solid #667080;
-  color: #667080;
-  font-family: Helvetica;
-  font-size: 14px;
-  height: 40px;
-  text-align: left;
-`
-
-const Status = styled.td`
-  & span {
-    border: solid 1px #667080;
-    text-transform: uppercase;
-    font-family: Helvetica;
-    font-size: 12px;
-    font-weight: bold;
-    text-align: left;
-    color: #667080;
-    padding: 2px 10px;
-  }
-`
-
-const Input = styled.input`
-  height: 20px;
-  width: 20px;
-`
-
 const TableRow = ({ toggleUser, selected, email, username, type }) => (
   <Row>
     <td>
@@ -196,9 +100,98 @@ const Admin = ({
 
 export default Admin
 
-const Root = styled.div`
+const AddButton = styled.button`
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  font-family: Helvetica;
+  font-size: 12px;
+  text-align: left;
+  color: #667080;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+`
+
+const Header = styled.div`
   display: flex;
-  flex-direction: column;
-  margin: auto;
-  max-width: 60em;
+  flex-direction: row;
+  align-items: center;
+
+  & span {
+    font-family: Helvetica;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: left;
+    color: #667080;
+  }
+`
+
+const SubHeader = styled.div`
+  align-items: center;
+  border-bottom: 1px solid #667080;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-bottom: 10px;
+
+  > div:first-child {
+    display: flex;
+    align-items: center;
+  }
+
+  span {
+    font-family: Helvetica;
+    font-size: 14px;
+    text-align: left;
+    color: #667080;
+  }
+`
+
+const Table = styled.table`
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin-top: 10px;
+  width: 100vw;
+
+  & thead tr {
+    height: 40px;
+    border-bottom: 1px solid #667080;
+    font-family: Helvetica;
+    font-size: 14px;
+    font-weight: bold;
+    text-align: left;
+    color: #667080;
+  }
+`
+
+const Row = styled.tr`
+  border-bottom: 1px solid #667080;
+  color: #667080;
+  font-family: Helvetica;
+  font-size: 14px;
+  height: 40px;
+  text-align: left;
+`
+
+const Status = styled.td`
+  & span {
+    border: solid 1px #667080;
+    text-transform: uppercase;
+    font-family: Helvetica;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: left;
+    color: #667080;
+    padding: 2px 10px;
+  }
+`
+
+const Input = styled.input`
+  height: 20px;
+  width: 20px;
 `

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

+import React from 'react'
+import { Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { withRouter } from 'react-router-dom'
+
+const AdminDashboard = ({ history }) => (
+  <Root>
+    <Title>Admin Dashboard</Title>
+    <CardContainer>
+      <Card>
+        <Icon color="#667080" size={32}>
+          edit
+        </Icon>
+        <span>Journal configuration</span>
+      </Card>
+      <Card onClick={() => history.push('/admin/users')}>
+        <Icon color="#667080" size={32}>
+          users
+        </Icon>
+        <span>Users</span>
+      </Card>
+      <Card>
+        <Icon color="#667080" size={32}>
+          settings
+        </Icon>
+        <span>Roles</span>
+      </Card>
+    </CardContainer>
+  </Root>
+)
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px;
+`
+
+const Title = styled.span`
+  color: #667080;
+  font-family: Helvetica;
+  font-size: 24px;
+  font-weight: bold;
+  text-align: left;
+`
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 24px;
+`
+
+const Card = styled.div`
+  align-items: center;
+  border: 1px solid #979797;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 160px;
+  margin: 0 25px 25px 0;
+  width: 210px;
+
+  &:hover {
+    background-color: #ddd;
+  }
+
+  > span {
+    color: #667080;
+    font-family: Helvetica;
+    font-size: 18px;
+    margin-top: 10px;
+    text-align: center;
+  }
+`
+
+export default withRouter(AdminDashboard)

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

-import AdminPage from './AdminPage'
-
-export default AdminPage
+export { default as AdminUsers } from './AdminPage'
 export { default as Pagination } from './Pagination'
+export { default as AdminDashboard } from './AdminDashboard'

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

@@ -6,7 +6,9 @@ import { withState, withHandlers, compose } from 'recompose'
 
 const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => (
   <Root>
-    {brand}
+    {React.cloneElement(brand, {
+      onClick: goTo('/'),
+    })}
     {user && (
       <User>
         <div onClick={toggleMenu}>

packages/components-faraday/src/components/UIComponents/Logo.js

 import React from 'react'
 
-const Logo = ({ srcUrl }) => (
-  <img alt="Hindawi" height="36" src={srcUrl} title="Hindawi" />
+const Logo = ({ srcUrl, onClick }) => (
+  <div onClick={onClick}>
+    <img alt="Hindawi" height="36" src={srcUrl} title="Hindawi" />
+  </div>
 )
 
 export default Logo

packages/xpub-faraday/app/FaradayApp.js

@@ -9,15 +9,6 @@ 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>
 )
@@ -28,7 +19,7 @@ const Root = styled.div`
 
 const MainContainer = styled.div`
   padding: 8px;
-  margin-top: 50px;
+  margin-top: 20px;
 `
 
 export default compose(

packages/xpub-faraday/app/routes.js

@@ -14,7 +14,10 @@ import { Wizard } from 'pubsweet-component-wizard/src/components'
 import ManuscriptPage from 'pubsweet-component-xpub-manuscript/src/components/ManuscriptPage'
 import ConfirmationPage from 'pubsweet-components-faraday/src/components/UIComponents/ConfirmationPage'
 import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound'
-import AdminPage from 'pubsweet-components-faraday/src/components/Admin'
+import {
+  AdminDashboard,
+  AdminUsers,
+} from 'pubsweet-components-faraday/src/components/Admin'
 import AddEditUser from 'pubsweet-components-faraday/src/components/Admin/AddEditUser'
 
 import FaradayApp from './FaradayApp'
@@ -30,7 +33,8 @@ const Routes = () => (
         exact
         path="/confirmation-page"
       />
-      <PrivateRoute component={AdminPage} exact path="/admin" />
+      <PrivateRoute component={AdminDashboard} exact path="/admin" />
+      <PrivateRoute component={AdminUsers} exact path="/admin/users" />
       <PrivateRoute component={AddEditUser} exact path="/admin/users/add" />
       <PrivateRoute
         component={AddEditUser}