diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index a3fcd76c5fa64844b93750e3b8a422112fb8bba9..12e1a9a94db35e3eff061b9893655f897c30ca3c 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { get, isEmpty } from 'lodash'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
import { Button, Icon } from '@pubsweet/ui'
import { compose, getContext } from 'recompose'
@@ -118,15 +118,19 @@ const DashboardCard = ({
export default compose(getContext({ journal: PropTypes.object }))(DashboardCard)
// #region styled-components
+const defaultText = css`
+ color: ${({ theme }) => theme.colorText};
+ font-family: ${({ theme }) => theme.fontReading};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+`
+
const PreviewContainer = styled.div`
display: flex;
margin-top: 18px;
`
const AuthorList = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
@@ -143,9 +147,7 @@ const Authors = styled.div`
margin-top: 15px;
span:first-child {
- color: #667080;
- font-family: Helvetica;
- font-size: 12px;
+ ${defaultText};
margin-right: 8px;
text-align: left;
text-transform: uppercase;
@@ -153,15 +155,12 @@ const Authors = styled.div`
`
const ActionButtons = styled(Button)`
+ ${defaultText};
align-items: center;
- background-color: #667080;
+ background-color: #${({ theme }) => theme.colorPrimary};
display: flex;
- height: 20px;
padding: 4px 8px;
- font-family: Helvetica;
- font-size: 12px;
text-align: center;
- color: #ffffff;
`
const LeftDetails = styled.div`
@@ -186,26 +185,21 @@ const RightDetails = styled.div`
`
const Label = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 12px;
+ ${defaultText};
text-align: left;
text-transform: uppercase;
width: 150px;
`
const JournalTitle = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
+ font-size: ${({ theme }) => theme.fontSizeHeading6};
font-weight: bold;
text-align: left;
`
const Issue = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
text-align: left;
`
@@ -227,9 +221,7 @@ const ListView = styled.div`
`
const ManuscriptId = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 12px;
+ ${defaultText};
margin-left: 8px;
text-align: left;
text-decoration: underline;
@@ -237,18 +229,14 @@ const ManuscriptId = styled.span`
`
const Version = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 13px;
+ ${defaultText};
text-align: left;
`
const Details = styled.div`
align-items: center;
- color: #667080;
cursor: pointer;
display: flex;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
margin-left: 8px;
text-decoration: underline;
text-align: center;
@@ -259,13 +247,14 @@ const ClickableIcon = styled.div`
margin: 0 7px;
svg {
- stroke: ${({ disabled }) => (disabled ? '#eee' : '#667080')};
+ stroke: ${({ disabled, theme }) =>
+ disabled ? theme.colorBackgroundHue : theme.colorPrimary};
}
`
const Card = styled.div`
align-items: center;
- border: 1px solid #667080;
+ border: ${({ theme }) => theme.borderDefault};
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -282,7 +271,7 @@ const Right = styled.div`
`
const Left = styled.div`
- border-right: 1px solid #667080;
+ border-right: ${({ theme }) => theme.borderDefault};
display: flex;
flex-direction: column;
flex: 5;
@@ -304,10 +293,8 @@ const ManuscriptInfo = styled.div`
`
const ManuscriptType = styled.div`
- border: 1px solid #667080;
- color: #667080;
- font-family: Helvetica;
- font-size: 12px;
+ border: ${({ theme }) => theme.borderDefault};
+ ${defaultText};
font-weight: bold;
padding: 6px 4px;
margin-left: 10px;
@@ -316,28 +303,23 @@ const ManuscriptType = styled.div`
`
const Title = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 18px;
+ ${defaultText};
+ font-size: ${({ theme }) => theme.fontSizeHeading5};
text-align: left;
`
const Status = styled.div`
- border: 1px solid #667080;
- color: #667080;
- font-family: Helvetica;
- font-size: 12px;
+ border: ${({ theme }) => theme.borderDefault};
+ ${defaultText};
font-weight: bold;
- text-align: left;
margin: 0.5em 0;
padding: 0.2em 0.5em;
+ text-align: left;
text-transform: uppercase;
`
const DateField = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 13px;
+ ${defaultText};
margin: 0 8px;
text-align: left;
`
@@ -349,9 +331,7 @@ const ClickableIconContainer = styled.div`
margin-right: 8px;
span:last-child {
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
margin-left: 8px;
text-align: left;
text-decoration: underline;
diff --git a/packages/xpub-faraday/app/theme.js b/packages/xpub-faraday/app/theme.js
index 3692e4300448b60bcf0da8976645121a53019285..767092b519efd992f8215074c90a565f88235414 100644
--- a/packages/xpub-faraday/app/theme.js
+++ b/packages/xpub-faraday/app/theme.js
@@ -2,7 +2,7 @@ const theme = {
colorPrimary: '#667080', // Indicates a primary call to action
colorSecondary: '#d8d8d8', // Default color for non-primary actions
colorFurniture: '#cccccc', // Meant to be applied to elements that indicate content division
- colorBorder: '#aaaaaa', // For borders around form elements
+ colorBorder: '#667080', // For borders around form elements
colorBackgroundHue: '#f1f1f1', // Used to create a discrete contrast the default background color
colorSuccess: '#005500', // Used to indicate a successful validation state
colorError: '#b50000', // Used to indicate an error in validation
@@ -26,6 +26,7 @@ const theme = {
gridUnit: '32px', // Base interface space measurement used by elements and typography
+ borderDefault: '1px solid #667080',
borderRadius: '2px', // Radius value applied to borders throughout the user interface
borderWidth: '1px', // Width value applied to borders
borderStyle: 'solid', // Style applied to borders (eg. solid, dashed)
diff --git a/yarn.lock b/yarn.lock
index 17a9872bc795a46e40d990c3e2a83bfadcf21904..964401cf4e4874bfecc76562fad486f9554c2f66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11717,10 +11717,22 @@ typeface-fira-sans@^0.0.43:
version "0.0.43"
resolved "https://registry.yarnpkg.com/typeface-fira-sans/-/typeface-fira-sans-0.0.43.tgz#f9c026ae5b7ad5f1fb727f9947bd1e10e13702e6"
+typeface-noto-sans@0.0.54:
+ version "0.0.54"
+ resolved "https://registry.yarnpkg.com/typeface-noto-sans/-/typeface-noto-sans-0.0.54.tgz#16989ef56a5220b0503495ab8c1036f66b517b55"
+
+typeface-noto-serif@0.0.54:
+ version "0.0.54"
+ resolved "https://registry.yarnpkg.com/typeface-noto-serif/-/typeface-noto-serif-0.0.54.tgz#26a552df3557c54f2f0c7f9bdbd28a95c9aab06b"
+
typeface-open-sans@0.0.35:
version "0.0.35"
resolved "https://registry.yarnpkg.com/typeface-open-sans/-/typeface-open-sans-0.0.35.tgz#170dc36bbbd63829c9ea64b991c2b0fd65017708"
+typeface-ubuntu-mono@0.0.54:
+ version "0.0.54"
+ resolved "https://registry.yarnpkg.com/typeface-ubuntu-mono/-/typeface-ubuntu-mono-0.0.54.tgz#773582617ff60dc252acbaaeb22880ba7f559fe6"
+
typeface-vollkorn@^0.0.43:
version "0.0.43"
resolved "https://registry.yarnpkg.com/typeface-vollkorn/-/typeface-vollkorn-0.0.43.tgz#4ee1a03f90000b0be3ebd8cac360ee777456465b"