diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js index 8090c87170cd556126d4269f6e3bbc5ceb69177c..cc85137e49d1131c7b3c3b39f14cce002308812e 100644 --- a/packages/component-faraday-ui/src/ManuscriptCard.js +++ b/packages/component-faraday-ui/src/ManuscriptCard.js @@ -1,18 +1,16 @@ 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; diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md index 5be191d9d51a1e74905c95513e93eef6f6859ce9..9d44a5bd5c546db121d1b66ec2b0c958406acfc8 100644 --- a/packages/component-faraday-ui/src/ManuscriptCard.md +++ b/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', diff --git a/packages/component-faraday-ui/src/Tag.js b/packages/component-faraday-ui/src/Tag.js index b1fae817f37176842e97e75b3b24000684507c82..e2d279938b7451c3ca20d9d959a13f0fea9ffffe 100644 --- a/packages/component-faraday-ui/src/Tag.js +++ b/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; ` diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js index 9ad6f1386f0d8e79cbfc167162c191b8408f4875..1bfd33538855e2e5c48d8e2b2999684782252e1e 100644 --- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js +++ b/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' || diff --git a/packages/hindawi-theme/src/elements/Menu.js b/packages/hindawi-theme/src/elements/Menu.js index 101824db4f87b97bc0f89821e6698e6960fbfc9b..c4ee0b0a4152e02e6ba403eb924be36b08337c11 100644 --- a/packages/hindawi-theme/src/elements/Menu.js +++ b/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` diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js index 9654adbf9c513417a76cc6f079cfe4852e4e206a..f75511bd162e6c6e47c5ed80825cd6029e128a5d 100644 --- a/packages/hindawi-theme/src/index.js +++ b/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: {