style(theme): update ui on dashboard card

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

 import React from 'react'
+import moment from 'moment'
 import { get } from 'lodash'
 import { H3, H4 } from '@pubsweet/ui'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
-import { compose, withHandlers, setDisplayName } from 'recompose'
+import { compose, withHandlers, setDisplayName, withProps } from 'recompose'
 
-import Tag from './Tag'
-import Text from './Text'
-import Row from './gridItems/Row'
-import IconButton from './IconButton'
-import AuthorTagList from './AuthorTagList'
+import { Tag, Text, Row, IconButton, AuthorTagList } from './'
 
 const ManuscriptCard = ({
   onCardClick,
+  submitDate,
   fragment: {
     authors = [],
     id: fragmentId,
@@ -34,16 +32,24 @@ const ManuscriptCard = ({
         </Row>
       )}
       <Row alignItems="center" justify="flex-start" mb={1}>
-        <Text customId>{`ID ${customId}`}</Text>
-        <Text secondary>Submitted on 03.07.2018</Text>
+        <Text customId mr={1}>{`ID ${customId}`}</Text>
+        <Text mr={3} secondary>
+          {submitDate}
+        </Text>
         <H4>{type}</H4>
-        <Text secondary>{journal}</Text>
+        <Text ml={1} secondary>
+          {journal}
+        </Text>
       </Row>
       <Row alignItems="center" justify="flex-start" mb={1}>
         <H4>Handling editor</H4>
-        <Text>{get(handlingEditor, 'name', 'No HE')}</Text>
+        <Text ml={1} mr={3}>
+          {get(handlingEditor, 'name', 'Unassigned')}
+        </Text>
         <H4>Reviewer Reports</H4>
-        <Text>0 invited</Text>
+        <Text ml={1} secondary>
+          0 invited
+        </Text>
       </Row>
     </MainContainer>
     <SideNavigation>
@@ -54,10 +60,15 @@ const ManuscriptCard = ({
 
 export default compose(
   withHandlers({
-    onCardClick: ({ onClick, collection, fragment }) => () => {
+    onCardClick: ({ onClick, collection = {}, fragment = {} }) => () => {
       onClick(collection, fragment)
     },
   }),
+  withProps(({ fragment: { submitted } }) => ({
+    submitDate: submitted
+      ? `Submitted on ${moment(submitted).format('DD.MM.YYY')}`
+      : '',
+  })),
   setDisplayName('ManuscriptCard'),
 )(ManuscriptCard)
 
@@ -74,32 +85,14 @@ const MainContainer = styled.div`
     ${H3} {
       margin-bottom: 0;
     }
-
-    &:nth-child(3) {
-      ${Text} {
-        margin-right: ${th('gridUnit')};
-      }
-
-      ${H4} {
-        margin-right: ${th('gridUnit')};
-      }
-    }
-
-    &:last-child {
-      ${H4} {
-        margin-right: ${th('gridUnit')};
-      }
-
-      ${Text} {
-        margin-right: calc(${th('gridUnit')} * 5);
-      }
-    }
   }
 `
 
 const SideNavigation = styled.div`
   align-items: center;
-  background-color: ${th('colorBackgroundHue')};
+  background-color: ${th('colorBackgroundHue2')
+    ? th('colorBackgroundHue2')
+    : th('colorBackgroundHue')};
   border-top-right-radius: ${th('borderRadius')};
   border-bottom-right-radius: ${th('borderRadius')};
   display: flex;

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

@@ -94,6 +94,7 @@ const collection = {
 const fragment = {
   authors,
   created: new Date(),
+  submitted: new Date(),
   metadata: {
     journal: 'Awesomeness',
     title: 'A very ok title with many authors',

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

@@ -5,13 +5,15 @@ import { th } from '@pubsweet/ui-toolkit'
 export default styled.div`
   background-color: ${props =>
     props.status ? th('tag.statusBackgroundColor') : th('tag.backgroundColor')};
-  border-radius: ${th('borderRadius')};
+  border-radius: ${th('tag.borderRadius')
+    ? th('tag.borderRadius')
+    : th('borderRadius')};
   color: ${th('tag.color')};
-  font-family: ${th('fontInterface')};
+  font-family: ${th('fontHeading')};
   font-size: ${th('tag.fontSize')};
+  font-weight: ${th('tag.fontWeight')};
   padding: calc(${th('gridUnit')} / 4) calc(${th('gridUnit')} / 2);
   text-align: center;
   vertical-align: baseline;
-  text-transform: uppercase;
   width: fit-content;
 `

packages/components-faraday/src/components/Dashboard/DashboardItems.js

@@ -29,7 +29,7 @@ const DashboardItems = ({ onClick, list, deleteProject, listView = true }) => (
 
 export default compose(
   withRouter,
-  withProps(({ collection, fragment }) => ({
+  withProps(({ collection = {}, fragment = {} }) => ({
     hasDetails: get(collection, 'status', 'draft') !== 'draft',
     isNotSubmitted:
       get(collection, 'status', 'draft') === 'draft' ||

packages/hindawi-theme/src/elements/Menu.js

@@ -5,6 +5,7 @@ export default {
   Main: css`
     background: ${th('colorBackgroundHue')};
     height: calc(${th('gridUnit')} * 4);
+    border-radius: ${th('borderRadius')};
     min-width: 120px;
   `,
   Value: css`

packages/hindawi-theme/src/index.js

@@ -18,6 +18,8 @@ import {
 injectGlobal`
   body {
     height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   #root, #root > div {
@@ -33,6 +35,7 @@ const hindawiTheme = {
   colorFurniture: '#DBDBDB',
   colorBorder: '#DBDBDB',
   colorBackgroundHue: '#FFFFFF',
+  colorBackgroundHue2: '#F6F6F6',
   colorSuccess: '#63A945',
   colorError: '#FC6A4B',
   colorText: '#242424',
@@ -112,9 +115,10 @@ const hindawiTheme = {
   tag: {
     color: '#ffffff',
     fontSize: '12px',
-    fontWeight: 'bold',
+    fontWeight: '600',
     backgroundColor: '#586971',
     statusBackgroundColor: '#dbafc1',
+    borderRadius: '2px',
   },
 
   dashboardCard: {