diff --git a/packages/components-faraday/src/components/Admin/AddEditUser.js b/packages/components-faraday/src/components/Admin/AddEditUser.js
index b0ba223d6781fb31845e13bc89e476b8c911909e..fa5a61a9b74dcd7775b08038897a0cb894f07227 100644
--- a/packages/components-faraday/src/components/Admin/AddEditUser.js
+++ b/packages/components-faraday/src/components/Admin/AddEditUser.js
@@ -93,6 +93,8 @@ export default compose(
}),
)(AddEditUser)
+// #region styles
+
const Root = styled.div`
display: flex;
flex-direction: column;
@@ -101,10 +103,11 @@ const Root = styled.div`
`
const FormContainer = styled.form`
- border: 1px solid var(--color-pending);
+ border: ${({ theme }) => theme.borderDefault};
+ background-color: ${({ theme }) => theme.backgroundColorReverse};
margin: 0 auto;
min-width: 300px;
- padding: 20px;
+ padding: 20px 40px;
`
const Row = styled.div`
@@ -114,3 +117,4 @@ const Row = styled.div`
align-items: center;
justify-content: space-evenly;
`
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AddUserForm.js b/packages/components-faraday/src/components/Admin/AddUserForm.js
index 3edc3f9e500465e37401e0da299398894686b55b..4317c2c4fbd0d4444bc9be8d203c86726670a388 100644
--- a/packages/components-faraday/src/components/Admin/AddUserForm.js
+++ b/packages/components-faraday/src/components/Admin/AddUserForm.js
@@ -10,7 +10,7 @@ const AddUserForm = ({ roles, journal }) => {
)
return (
<div>
- <h3>Add user</h3>
+ <Title>Add user</Title>
<Row>
<RowItem>
<Label> Email*</Label>
@@ -58,6 +58,8 @@ const AddUserForm = ({ roles, journal }) => {
export default AddUserForm
+// #region styles
+
const Row = styled.div`
display: flex;
flex-direction: row;
@@ -69,7 +71,14 @@ const RowItem = styled.div`
margin-right: 20px;
`
+const Title = styled.h4`
+ font-size: ${({ theme }) => theme.fontSizeHeading4};
+ color: ${({ theme }) => theme.colorPrimary};
+ margin: 10px 0;
+`
+
const Label = styled.div`
- font-size: 14px;
+ font-size: ${({ theme }) => theme.fontSizeBase};
text-transform: uppercase;
`
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AdminDashboard.js b/packages/components-faraday/src/components/Admin/AdminDashboard.js
index bac4c83fcd2538137ecb5d3c88ef579b22025b6a..3b5fe553ffcc5299dd00bbef9ab37706dcbb362b 100644
--- a/packages/components-faraday/src/components/Admin/AdminDashboard.js
+++ b/packages/components-faraday/src/components/Admin/AdminDashboard.js
@@ -1,25 +1,25 @@
import React from 'react'
import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
-const AdminDashboard = ({ history }) => (
+const AdminDashboard = ({ history, theme }) => (
<Root>
<Title>Admin Dashboard</Title>
<CardContainer>
<Card>
- <Icon color="#667080" size={32}>
+ <Icon color={theme.colorPrimary} size={32}>
edit
</Icon>
<span>Journal configuration</span>
</Card>
<Card onClick={() => history.push('/admin/users')}>
- <Icon color="#667080" size={32}>
+ <Icon color={theme.colorPrimary} size={32}>
users
</Icon>
<span>Users</span>
</Card>
<Card>
- <Icon color="#667080" size={32}>
+ <Icon color={theme.colorPrimary} size={32}>
settings
</Icon>
<span>Roles</span>
@@ -28,7 +28,7 @@ const AdminDashboard = ({ history }) => (
</Root>
)
-export default AdminDashboard
+export default withTheme(AdminDashboard)
// #region Styled components
const Root = styled.div`
@@ -38,9 +38,9 @@ const Root = styled.div`
`
const Title = styled.span`
- color: #667080;
- font-family: Helvetica;
- font-size: 24px;
+ color: ${({ theme }) => theme.colorPrimary};
+ font-family: ${({ theme }) => theme.fontInterface};
+ font-size: ${({ theme }) => theme.fontSizeHeading5};
font-weight: bold;
text-align: left;
`
@@ -53,7 +53,8 @@ const CardContainer = styled.div`
const Card = styled.div`
align-items: center;
- border: 1px solid #979797;
+ border: ${({ theme }) => theme.borderDefault};
+ background-color: ${({ theme }) => theme.backgroundColorReverse};
cursor: pointer;
display: flex;
flex-direction: column;
@@ -63,12 +64,12 @@ const Card = styled.div`
width: 210px;
&:hover {
- background-color: #ddd;
+ background-color: ${({ theme }) => theme.backgroundColor};
}
> span {
- color: #667080;
- font-family: Helvetica;
+ color: ${({ theme }) => theme.colorPrimary};
+ font-family: ${({ theme }) => theme.fontInterface};
font-size: 18px;
margin-top: 10px;
text-align: center;
diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js
index 8a2a25d98605b2faa6dff7fd165908be19afc829..db9501af114f4c9c006fdeabed6743a2ca138db3 100644
--- a/packages/components-faraday/src/components/Admin/AdminUsers.js
+++ b/packages/components-faraday/src/components/Admin/AdminUsers.js
@@ -1,7 +1,7 @@
import React from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
import { Icon, Menu } from '@pubsweet/ui'
import { actions } from 'pubsweet-client'
import { ConnectPage } from 'xpub-connect'
@@ -59,6 +59,7 @@ const Users = ({
itemsPerPage,
history,
journal,
+ theme,
}) => {
const slicedUsers = users.slice(
page * itemsPerPage,
@@ -72,7 +73,7 @@ const Users = ({
<span>Users</span>
</BreadCrumbs>
<AddButton onClick={() => history.push('/admin/users/add')}>
- <Icon color="#667080">plus-circle</Icon>
+ <Icon color={theme.colorPrimary}>plus-circle</Icon>
Add User
</AddButton>
</Header>
@@ -97,7 +98,7 @@ const Users = ({
value="sort"
/>
- <Icon color="#667080" size={24}>
+ <Icon color={theme.colorPrimary} size={24}>
search
</Icon>
</div>
@@ -148,6 +149,7 @@ export default compose(
ConnectPage(() => [actions.getUsers()]),
withRouter,
withJournal,
+ withTheme,
connect(state => ({ currentUsers: get(state, 'users.users') })),
withState('users', 'setUsers', props =>
props.currentUsers.map(u => ({ ...u, selected: false })),
@@ -180,15 +182,19 @@ const AddButton = styled.button`
border: none;
cursor: pointer;
display: flex;
- font-family: Helvetica;
- font-size: 12px;
+ font-family: ${({ theme }) => theme.fontInterface};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
+ background-color: ${({ theme }) => theme.backgroundColor};
&:active,
&:focus {
outline: none;
}
+ &:hover {
+ opacity: 0.7;
+ }
`
const Header = styled.div`
@@ -201,7 +207,7 @@ const BreadCrumbs = styled.div`
& span {
font-size: 17px;
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
&:after {
content: '>';
@@ -218,7 +224,7 @@ const BreadCrumbs = styled.div`
const SubHeader = styled.div`
align-items: center;
- border-bottom: 1px solid #667080;
+ border-bottom: ${({ theme }) => theme.borderDefault};
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -231,10 +237,10 @@ const SubHeader = styled.div`
}
span {
- font-family: Helvetica;
- font-size: 14px;
+ font-family: ${({ theme }) => theme.fontReading};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
}
`
@@ -246,24 +252,24 @@ const Table = styled.table`
& thead tr {
height: 40px;
- border-bottom: 1px solid #667080;
- font-family: Helvetica;
- font-size: 14px;
+ border-bottom: ${({ theme }) => theme.borderDefault};
+ font-family: ${({ theme }) => theme.fontReading};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
font-weight: bold;
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
}
`
const Row = styled.tr`
- border-bottom: 1px solid #667080;
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ border-bottom: ${({ theme }) => theme.borderDefault};
+ color: ${({ theme }) => theme.colorPrimary};
+ font-family: ${({ theme }) => theme.fontReading};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
height: 40px;
text-align: left;
&:hover {
- background-color: #e6e7e9;
+ background-color: ${({ theme }) => theme.backgroundColorReverse};
a {
display: block;
}
@@ -273,25 +279,25 @@ const Row = styled.tr`
const Tag = styled.span`
border: solid 1px #667080;
text-transform: uppercase;
- font-family: Helvetica;
+ font-family: ${({ theme }) => theme.fontReading};
font-size: 12px;
font-weight: bold;
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
padding: 2px 10px;
margin-right: 5px;
`
const Role = styled.span`
height: 17px;
- font-size: 14px;
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
text-transform: uppercase;
`
const Action = styled.a`
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
display: none;
`
diff --git a/packages/components-faraday/src/components/Admin/EditUserForm.js b/packages/components-faraday/src/components/Admin/EditUserForm.js
index d6608c363c3838ed17d4732051bed3bd2de627f6..1f908b0a589e2c1b32d9d7e36a107511355a84c0 100644
--- a/packages/components-faraday/src/components/Admin/EditUserForm.js
+++ b/packages/components-faraday/src/components/Admin/EditUserForm.js
@@ -10,8 +10,8 @@ const EditUserForm = ({ roles, journal, user }) => {
)
return (
<div>
- <h3>Edit user</h3>
- <h5>{user.email}</h5>
+ <Title>Edit user</Title>
+ <Subtitle>{user.email}</Subtitle>
<Row>
<RowItem>
<Label> First name* </Label>
@@ -64,10 +64,13 @@ const EditUserForm = ({ roles, journal, user }) => {
export default EditUserForm
+// #region styles
+
const Row = styled.div`
display: flex;
flex-direction: row;
margin: 20px 0;
+ background-color: ${({ theme }) => theme.backgroundColorReverse};
`
const RowItem = styled.div`
@@ -75,7 +78,20 @@ const RowItem = styled.div`
margin-right: 20px;
`
+const Title = styled.h4`
+ font-size: ${({ theme }) => theme.fontSizeHeading4};
+ color: ${({ theme }) => theme.colorPrimary};
+ margin: 10px 0;
+`
+
+const Subtitle = styled.div`
+ font-size: ${({ theme }) => theme.fontSizeBase};
+ color: ${({ theme }) => theme.colorPrimary};
+ margin: 0;
+`
+
const Label = styled.div`
- font-size: 14px;
+ font-size: ${({ theme }) => theme.fontSizeBase};
text-transform: uppercase;
`
+// #endregion
diff --git a/packages/components-faraday/src/components/Admin/Pagination.js b/packages/components-faraday/src/components/Admin/Pagination.js
index 72df9dc2e9bd6cc1d17ac6a43ef042cdbb4463d3..78e9c4f0fe45fc4b288660ceb2996af9aaf5336b 100644
--- a/packages/components-faraday/src/components/Admin/Pagination.js
+++ b/packages/components-faraday/src/components/Admin/Pagination.js
@@ -1,6 +1,6 @@
import React from 'react'
import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { withTheme } from 'styled-components'
const Pagination = ({
page,
@@ -9,6 +9,7 @@ const Pagination = ({
decrementPage,
hasMore,
maxLength,
+ theme,
}) => (
<Root>
<Showing>
@@ -17,7 +18,7 @@ const Pagination = ({
</Showing>
<Chevrons>
<IconButton hide={page === 0} onClick={decrementPage}>
- <Icon color="#667080" size={18}>
+ <Icon color={theme.colorPrimary} size={18}>
chevron-left
</Icon>
</IconButton>
@@ -27,7 +28,7 @@ const Pagination = ({
}`}
</span>
<IconButton hide={!hasMore} onClick={incrementPage}>
- <Icon color="#667080" size={18}>
+ <Icon color={theme.colorPrimary} size={18}>
chevron-right
</Icon>
</IconButton>
@@ -35,7 +36,7 @@ const Pagination = ({
</Root>
)
-export default Pagination
+export default withTheme(Pagination)
const Root = styled.div`
display: flex;
@@ -52,16 +53,20 @@ const IconButton = styled.button`
border: none;
cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')};
display: flex;
- font-family: Helvetica;
- font-size: 12px;
+ font-family: ${({ theme }) => theme.fontInterface};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
+ background-color: ${({ theme }) => theme.backgroundColor};
opacity: ${({ hide }) => (hide ? 0 : 1)};
&:active,
&:focus {
outline: none;
}
+ &:hover {
+ opacity: 0.7;
+ }
`
const Showing = styled.div`
@@ -69,14 +74,14 @@ const Showing = styled.div`
align-items: center;
span:first-child {
- font-family: Helvetica;
- font-size: 14px;
+ font-family: ${({ theme }) => theme.fontInterface};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
text-align: left;
- color: #667080;
+ color: ${({ theme }) => theme.colorPrimary};
margin-right: 10px;
}
span:last-child {
- border: solid 1px #667080;
+ border: ${({ theme }) => theme.borderDefault};
padding: 2px 10px;
}
`
diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js
index dc1606d07e1c64aaf242337e4b02779c7bdbff8c..d44fe4e4daef4ceec8afa4352f2c2bb8ac41755d 100644
--- a/packages/components-faraday/src/components/AppBar/AppBar.js
+++ b/packages/components-faraday/src/components/AppBar/AppBar.js
@@ -25,11 +25,11 @@ const AppBar = ({
{user && (
<User>
<div onClick={toggleMenu}>
- <Icon color={theme.colorPrimary}>user</Icon>
+ <Icon color={theme.colorText}>user</Icon>
<span>
{get(user, 'firstName') || get(user, 'username') || 'User'}
</span>
- <Icon color={theme.colorPrimary}>chevron-down</Icon>
+ <Icon color={theme.colorText}>chevron-down</Icon>
</div>
{expanded && (
<Dropdown>
@@ -83,7 +83,7 @@ const User = styled.div`
}
& span {
- color: ${props => props.theme.colorPrimary};
+ color: ${props => props.theme.colorText};
font-family: ${props => props.theme.fontHeading};
font-size: ${props => props.theme.fontSizeBase};
margin-left: 10px;
@@ -103,7 +103,7 @@ const Dropdown = styled.div`
const DropdownOption = styled.div`
align-items: center;
- color: ${props => props.theme.colorPrimary};
+ color: ${props => props.theme.colorText};
cursor: pointer;
display: flex;
justify-content: flex-start;
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index 6fb0797f1e44e513604adfb3cc14886fd4738687..b2e9a80b984e317a71f6417d2151cc3b26efcbe3 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,10 +1,10 @@
import React from 'react'
import { get } from 'lodash'
import { Button } from '@pubsweet/ui'
+import styled from 'styled-components'
import { compose, withHandlers } from 'recompose'
import { withModal } from 'pubsweet-component-modal/src/components'
-import classes from './Dashboard.local.scss'
import AbstractModal from './AbstractModal'
import DashboardItems from './DashboardItems'
import DashboardFilters from './DashboardFilters'
@@ -23,15 +23,15 @@ const Dashboard = ({
showAbstractModal,
...rest
}) => (
- <div className={classes.root}>
- <div className={classes.header}>
- <div className={classes.heading}>Manuscripts</div>
- <div className={classes.headerButtons}>
+ <Root>
+ <Header>
+ <Heading>Manuscripts</Heading>
+ <HeaderButtons>
<Button onClick={createDraftSubmission} primary>
New
</Button>
- </div>
- </div>
+ </HeaderButtons>
+ </Header>
<DashboardFilters
changeFilterValue={changeFilterValue}
getFilterOptions={getFilterOptions}
@@ -41,7 +41,7 @@ const Dashboard = ({
list={getItems()}
showAbstractModal={showAbstractModal}
/>
- </div>
+ </Root>
)
export default compose(
@@ -73,3 +73,29 @@ export default compose(
},
}),
)(Dashboard)
+
+// #region styles
+
+const Root = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ max-width: 60em;
+`
+
+const Header = styled.div`
+ display: flex;
+ justify-content: space-between;
+`
+
+const Heading = styled.div`
+ color: ${({ theme }) => theme.colorPrimary};
+ font-size: 1.6em;
+ text-transform: uppercase;
+`
+
+const HeaderButtons = styled.div`
+ display: flex;
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
deleted file mode 100644
index b4fb082487cd95ba901f0c2dcfb120d20b300312..0000000000000000000000000000000000000000
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-.root {
- display: flex;
- flex-direction: column;
- margin: auto;
- max-width: 60em;
-}
-
-.filtersContainer {
- border-bottom: 1px solid var(--color-primary);
- color: var(--color-primary);
- display: flex;
- justify-content: space-between;
- margin: 1em 0;
- padding-bottom: 1em;
-}
-
-.filters {
- align-items: flex-end;
- display: flex;
-
- > span {
- border: 1px solid gray;
- margin: 0 0.5em;
- padding: 0 5px;
- }
-
- .filter-group {
- align-items: flex-start;
- display: flex;
- flex-direction: column;
-
- > span {
- margin-left: 10px;
- }
- }
-}
-
-.disabled {
- cursor: not-allowed;
-
- svg {
- stroke: gray;
- }
-}
-
-.viewMode {
- align-items: center;
- cursor: pointer;
- display: flex;
-
- .icon {
- display: flex;
- margin: 0 0.3em;
-
- svg {
- stroke: var(--color-primary);
- }
- }
-}
-
-.section {
- margin: 0.5em 0;
-}
-
-.header {
- display: flex;
- justify-content: space-between;
-}
-
-.headerButtons {
- display: flex;
-
- .admin-button {
- margin-right: 15px;
- }
-}
-
-.heading {
- color: var(--color-primary);
- font-size: 1.6em;
- text-transform: uppercase;
-}
-
-.empty {
- display: flex;
- justify-content: center;
-}
-
-.card {
- align-items: center;
- border: 1px solid var(--color-primary);
- display: flex;
- flex-wrap: wrap;
- margin: 0.5em 0;
- padding: 0.5em;
-
- .leftSide {
- flex: 1 0 80%;
- flex-direction: column;
-
- .quickInfo {
- align-items: center;
- display: flex;
- flex-direction: row;
- }
- }
-
- .rightSide {
- align-items: center;
- border-left: 1px solid var(--color-primary);
- display: flex;
- flex: 1 0 15%;
- justify-content: space-around;
- padding: 0 0.5em;
- }
-}
-
-.expandedView {
- border-top: 1px solid var(--color-primary);
- display: flex;
- flex: 0 1 100%;
- padding: 0.5em 0;
-}
-
-.column3 {
- display: flex;
- flex: 1 0 30%;
- flex-direction: row;
-}
-
-.column2 {
- display: flex;
- flex-direction: column;
- margin: 0.5em;
-
- > div,
- > a {
- margin: 0.5em 0;
- }
-}
-
-.status {
- border: 1px solid var(--color-primary);
- margin: 0.5em 0;
- padding: 0.2em 0.5em;
- text-transform: uppercase;
-}
-
-.button {
- margin: 0.3em 0.5em;
- padding: 0 0.5em;
-}
-
-.pointer {
- cursor: pointer;
-}
-
-.version {
- margin-left: 1em;
-}
-
-.modal {
- align-items: center;
- background: rgba(255, 255, 255, 0.95);
- bottom: 0;
- display: flex;
- justify-content: center;
- left: 0;
- position: fixed;
- right: 0;
- top: 0;
-}
-
-.modalContent {
- border: 1px solid var(--color-primary);
- height: 50vw;
- margin: 0 auto;
- padding: 20px;
- position: relative;
- width: 50vw;
-
- .modalText {
- height: calc(100% - 60px);
- overflow-y: scroll;
- padding-right: 10px;
- }
-
- button {
- bottom: 20px;
- position: absolute;
- right: 20px;
- }
-}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 12e1a9a94db35e3eff061b9893655f897c30ca3c..06dba138b991aa68954de0401e12df0286b9babc 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -157,7 +157,8 @@ const Authors = styled.div`
const ActionButtons = styled(Button)`
${defaultText};
align-items: center;
- background-color: #${({ theme }) => theme.colorPrimary};
+ background-color: ${({ theme }) => theme.colorPrimary};
+ color: ${({ theme }) => theme.colorTextReverse};
display: flex;
padding: 4px 8px;
text-align: center;
@@ -259,6 +260,7 @@ const Card = styled.div`
flex-direction: column;
justify-content: flex-start;
margin-bottom: 10px;
+ background-color: ${({ theme }) => theme.backgroundColorReverse};
`
const Right = styled.div`
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index b7ca2b2afd595966fbbc1eb96f26ab3313ac3e73..f51cf55e63db4a5fe8ca487ce4d9754c68152705 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -1,8 +1,7 @@
import React from 'react'
import { Menu } from '@pubsweet/ui'
import { compose, withHandlers } from 'recompose'
-
-import classes from './Dashboard.local.scss'
+import styled from 'styled-components'
const sortOptions = [
{ label: 'Newest first', value: 'newest' },
@@ -19,29 +18,29 @@ const DashboardFilters = ({
getFilterOptions,
changeFilterValue,
}) => (
- <div className={classes.filtersContainer}>
- <div className={classes.filters}>
+ <Root>
+ <FiltersContainer>
Filter view:
- <div className={classes['filter-group']}>
+ <FilterGroup>
<span>Owner</span>
<Menu
onChange={changeFilterValue('owner')}
options={getFilterOptions('owner')}
/>
- </div>
- <div className={classes['filter-group']}>
+ </FilterGroup>
+ <FilterGroup>
<span>Status</span>
<Menu
onChange={changeFilterValue('status')}
options={getFilterOptions('status')}
/>
- </div>
- <div className={classes['filter-group']}>
+ </FilterGroup>
+ <FilterGroup>
<span>Sort</span>
<Menu onChange={changeSort} options={sortOptions} />
- </div>
- </div>
- </div>
+ </FilterGroup>
+ </FiltersContainer>
+ </Root>
)
export default compose(
@@ -51,3 +50,37 @@ export default compose(
},
}),
)(DashboardFilters)
+
+// #region styles
+
+const Root = styled.div`
+ border-bottom: ${({ theme }) => theme.borderDefault};
+ color: ${({ theme }) => theme.colorPrimary};
+ display: flex;
+ justify-content: space-between;
+ margin: 1em 0;
+ padding-bottom: 1em;
+`
+
+const FiltersContainer = styled.div`
+ align-items: flex-end;
+ display: flex;
+
+ > span {
+ border: ${({ theme }) => theme.borderDefault};
+ margin: 0 0.5em;
+ padding: 0 5px;
+ }
+`
+
+const FilterGroup = styled.div`
+ align-items: flex-start;
+ display: flex;
+ flex-direction: column;
+
+ > span {
+ margin-left: 10px;
+ }
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index fa17033984d99c24b932117ba9bf84ad025d3ca2..2fe1261999f12aa4bf14026015cfd8307cd091a1 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -1,8 +1,8 @@
import React from 'react'
+import styled from 'styled-components'
import Item from './DashboardCard'
import withVersion from './withVersion'
-import classes from './Dashboard.local.scss'
const DashboardItem = withVersion(Item)
@@ -14,13 +14,11 @@ const DashboardItems = ({
}) => (
<div>
{!list.length && (
- <div className={classes.empty}>
- Nothing to do at the moment. Please upload a manuscript.
- </div>
+ <Empty>Nothing to do at the moment. Please upload a manuscript.</Empty>
)}
{!!list.length && (
- <div className={classes.section}>
+ <Section>
{list.map(p => (
<DashboardItem
deleteProject={deleteProject}
@@ -30,9 +28,22 @@ const DashboardItems = ({
showAbstractModal={showAbstractModal}
/>
))}
- </div>
+ </Section>
)}
</div>
)
export default DashboardItems
+
+// #region styles
+
+const Empty = styled.div`
+ display: flex;
+ justify-content: center;
+`
+
+const Section = styled.div`
+ margin: 0.5em 0;
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
index 9a484e45366bfa6409a895a3b242931768de9d51..83eca23445e8db1f2750408de5c5115f7cccfe27 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -41,36 +41,43 @@ const SignUpInvitation = ({
export default SignUpInvitation
+// #region styles
const Root = styled.div`
max-width: 500px;
min-width: 300px;
margin: 0 auto;
display: flex;
- border: 1px solid var(--color-pending);
+ border: ${({ theme }) => theme.borderDefault};
+ background-color: ${({ theme }) => theme.backgroundColorReverse};
padding: 20px;
flex-direction: column;
`
const Title = styled.div`
- font-size: 24px;
+ font-size: ${({ theme }) => theme.fontSizeHeading5};
+ font-family: ${({ theme }) => theme.fontHeading};
+ color: ${({ theme }) => theme.colorPrimary};
font-weight: bold;
text-align: center;
margin: 10px auto;
`
const Subtitle = styled.div`
- font-size: 13px;
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+ font-family: ${({ theme }) => theme.fontReading};
font-weight: normal;
text-align: center;
margin: 10px auto;
`
const Email = styled.div`
- font-size: 16px;
+ font-size: ${({ theme }) => theme.fontSizeBase};
+ font-family: ${({ theme }) => theme.fontReading};
font-weight: normal;
text-align: center;
margin: 10px auto;
`
const Err = styled.div`
- color: red;
+ color: ${({ theme }) => theme.colorError};
text-align: center;
`
+// #endregion
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index a984c1d894a2e06cbdd8f8b2c1759330ccf651b0..e14fd717c1e26caece81c55f4061bc8904e7061f 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -77,6 +77,7 @@ const RowItem = styled.div`
`
const Label = styled.div`
- font-size: 14px;
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+ font-family: ${({ theme }) => theme.fontReading};
text-transform: uppercase;
`
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index 53da9b98ef2dba046e25d534b5a2c6e95f6dd550..7109f6c581422a6499788836fa9b40df01988acd 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -46,6 +46,7 @@ const RowItem = styled.div`
`
const Label = styled.div`
- font-size: 14px;
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+ font-family: ${({ theme }) => theme.fontReading};
text-transform: uppercase;
`
diff --git a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
index 35cd479808558baf671252d8fa3227658c906add..759032ff1a777c1358b33a8c45ec2b8fefd72e41 100644
--- a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
+++ b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js
@@ -1,14 +1,12 @@
import React from 'react'
-import classnames from 'classnames'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import { Button } from '@pubsweet/ui'
import { get, isEmpty } from 'lodash'
import { withJournal } from 'xpub-journal'
+import styled from 'styled-components'
import { getFragmentAuthors } from 'pubsweet-components-faraday/src/redux/authors'
-import classes from './UIComponents.local.scss'
-
const ConfirmationPage = ({
journal,
authors = [],
@@ -17,12 +15,17 @@ const ConfirmationPage = ({
}) => {
const email = get(authors.find(a => a.isCorresponding), 'email')
return (
- <div className={classnames(classes.container)}>
+ <Root>
{isEmpty(state) ? (
- <h2>Thank you for you submission</h2>
+ <div>
+ <Title>Thank you for you submission</Title>
+ <Button onClick={() => history.push('/')} primary>
+ Go to Dashboard
+ </Button>
+ </div>
) : (
<div>
- <h2>Thank You for Submitting Your Manuscript</h2>
+ <Title>Thank You for Submitting Your Manuscript</Title>
<p>
Your manuscript has been successfully submitted to{' '}
<b>{journal.metadata.nameText}</b> and assigned the manuscript ID{' '}
@@ -51,7 +54,7 @@ const ConfirmationPage = ({
</Button>
</div>
)}
- </div>
+ </Root>
)
}
@@ -61,3 +64,24 @@ export default compose(
authors: getFragmentAuthors(state, get(locationState, 'version')),
})),
)(ConfirmationPage)
+
+// #region styles
+
+const Root = styled.div`
+ margin: 0 auto;
+ text-align: center;
+ width: 70vw;
+ color: ${({ theme }) => theme.colorText};
+
+ a {
+ color: ${({ theme }) => theme.colorText};
+ }
+`
+
+const Title = styled.div`
+ font-size: ${({ theme }) => theme.fontSizeHeading5};
+ font-family: ${({ theme }) => theme.fontHeading};
+ color: ${({ theme }) => theme.colorPrimary};
+ margin: 10px auto;
+`
+// #endregion
diff --git a/packages/xpub-faraday/app/theme.js b/packages/xpub-faraday/app/theme.js
index 767092b519efd992f8215074c90a565f88235414..0da49adad67d40df5a77c50b9e61d87e68ed4f82 100644
--- a/packages/xpub-faraday/app/theme.js
+++ b/packages/xpub-faraday/app/theme.js
@@ -34,6 +34,7 @@ const theme = {
dropShadow: '0 1px 0 0 #667080', // Default shadow that is applied to elements that float (eg. tooltips, modals)
backgroundColor: '#f6f6f6',
+ backgroundColorReverse: '#ffffff',
transitionDuration: '1.5s', // How long transitions should last
transitionTimingFunction: 'linear', // Which function should be applied to transitions (eg. easein)
diff --git a/packages/xpub-theme/src/variables.css b/packages/xpub-theme/src/variables.css
index bda25b46931ef31ac565e0a4aefa205db73f6866..e8f7a9e379df3bbde2ab84f9c6b8baf07c1d927c 100644
--- a/packages/xpub-theme/src/variables.css
+++ b/packages/xpub-theme/src/variables.css
@@ -3,7 +3,7 @@
--font-reviewer: 'Kocourier Prime Sans', monospace;
/* brand colors */
- --color-primary: #418b34;
+ --color-primary: #667080;
/* colors for interactions */
--color-danger: #ff2d1a;