diff --git a/packages/components-faraday/src/components/Admin/AddEditUser.js b/packages/components-faraday/src/components/Admin/AddEditUser.js
index f4bed2948e3c257099bf9aa99961a23e6c00cd4a..08223f1067bbcd57b9f9e4be533c21bac1654b27 100644
--- a/packages/components-faraday/src/components/Admin/AddEditUser.js
+++ b/packages/components-faraday/src/components/Admin/AddEditUser.js
@@ -14,8 +14,8 @@ import { compose, withProps, withHandlers, withState } from 'recompose'
import AddUserForm from './AddUserForm'
import EditUserForm from './EditUserForm'
import {
- getRoleOptions,
setAdmin,
+ getRoleOptions,
parseUpdateUser,
handleFormError,
} from './utils'
@@ -115,14 +115,14 @@ const FormContainer = styled.form`
background-color: ${th('backgroundColorReverse')};
margin: 0 auto;
min-width: 300px;
- padding: 20px 40px;
+ padding: calc(${th('subGridUnit')} * 3) calc(${th('subGridUnit')} * 6);
`
const Row = styled.div`
+ align-items: center;
display: flex;
flex-direction: row;
- margin: 10px 0;
- align-items: center;
justify-content: space-evenly;
+ margin: ${th('subGridUnit')} 0;
`
// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AdminDashboard.js b/packages/components-faraday/src/components/Admin/AdminDashboard.js
index 5b138406023bf787f602ed026686d3e47d32a5fe..85d161d8d956ef6aae8f20ac70d6b0f629d7a191 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, { withTheme } from 'styled-components'
+import styled from 'styled-components'
+import { Icon, th } from '@pubsweet/ui'
const AdminDashboard = ({ history, theme }) => (
<Root>
<Title>Admin Dashboard</Title>
<CardContainer>
<Card>
- <Icon color={theme.colorPrimary} size={6}>
+ <Icon primary size={6}>
edit
</Icon>
<span>Journal configuration</span>
</Card>
<Card data-test="card-users" onClick={() => history.push('/admin/users')}>
- <Icon color={theme.colorPrimary} size={6}>
+ <Icon primary size={6}>
users
</Icon>
<span>Users</span>
</Card>
<Card>
- <Icon color={theme.colorPrimary} size={6}>
+ <Icon primary size={6}>
settings
</Icon>
<span>Roles</span>
@@ -28,7 +28,7 @@ const AdminDashboard = ({ history, theme }) => (
</Root>
)
-export default withTheme(AdminDashboard)
+export default AdminDashboard
// #region Styled components
const Root = styled.div`
@@ -38,9 +38,9 @@ const Root = styled.div`
`
const Title = styled.span`
- color: ${({ theme }) => theme.colorPrimary};
- font-family: ${({ theme }) => theme.fontInterface};
- font-size: ${({ theme }) => theme.fontSizeHeading5};
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeHeading5')};
font-weight: bold;
text-align: left;
`
@@ -53,8 +53,8 @@ const CardContainer = styled.div`
const Card = styled.div`
align-items: center;
- border: ${({ theme }) => theme.borderDefault};
- background-color: ${({ theme }) => theme.backgroundColorReverse};
+ border: ${th('borderDefault')};
+ background-color: ${th('backgroundColorReverse')};
cursor: pointer;
display: flex;
flex-direction: column;
@@ -64,12 +64,12 @@ const Card = styled.div`
width: 210px;
&:hover {
- background-color: ${({ theme }) => theme.backgroundColor};
+ background-color: ${th('backgroundColor')};
}
> span {
- color: ${({ theme }) => theme.colorPrimary};
- font-family: ${({ theme }) => theme.fontInterface};
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontInterface')};
font-size: 18px;
margin-top: 10px;
text-align: center;
diff --git a/packages/components-faraday/src/components/Admin/Pagination.js b/packages/components-faraday/src/components/Admin/Pagination.js
index a81b3d184fc73fea4b2d6a2d7726f1feaf5e0fbe..4a8836cd9e792655cccf95bd2c342b6246def780 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 styled from 'styled-components'
import { Icon, th } from '@pubsweet/ui'
-import styled, { withTheme } from 'styled-components'
const Pagination = ({
page,
@@ -9,7 +9,6 @@ const Pagination = ({
decrementPage,
hasMore,
maxLength,
- theme,
}) => (
<Root>
<Showing>
@@ -18,7 +17,7 @@ const Pagination = ({
</Showing>
<Chevrons>
<IconButton hide={page === 0} onClick={decrementPage}>
- <Icon color={theme.colorPrimary} size={3}>
+ <Icon primary size={3}>
chevron-left
</Icon>
</IconButton>
@@ -28,7 +27,7 @@ const Pagination = ({
}`}
</span>
<IconButton hide={!hasMore} onClick={incrementPage}>
- <Icon color={theme.colorPrimary} size={3}>
+ <Icon primary size={3}>
chevron-right
</Icon>
</IconButton>
@@ -36,7 +35,7 @@ const Pagination = ({
</Root>
)
-export default withTheme(Pagination)
+export default Pagination
const Root = styled.div`
align-items: center;
diff --git a/packages/components-faraday/src/components/AuthorList/Author.js b/packages/components-faraday/src/components/AuthorList/Author.js
index b18d8ed6017b7bf1e58c3c0b3d674d2f77e33bb7..5df7654e9b1ef7277a196a6981dbff69e8c2669b 100644
--- a/packages/components-faraday/src/components/AuthorList/Author.js
+++ b/packages/components-faraday/src/components/AuthorList/Author.js
@@ -1,24 +1,24 @@
import React from 'react'
-import { Icon } from '@pubsweet/ui'
import styled from 'styled-components'
+import { Icon, th } from '@pubsweet/ui'
import { Label } from './FormItems'
export default ({
id,
- firstName,
- lastName,
email,
- affiliation,
- dragHandle,
+ index,
isOver,
+ lastName,
+ firstName,
+ dragHandle,
+ affiliation,
removeAuthor,
isSubmitting,
- isCorresponding,
- parseAuthorType,
editedAuthor,
setAuthorEdit,
- index,
+ isCorresponding,
+ parseAuthorType,
}) => (
<Root isOver={isOver}>
{!isOver && dragHandle}
@@ -62,8 +62,8 @@ const Header = styled.div`
`
const Title = styled.span`
- font-family: ${({ theme }) => theme.fontHeading};
- font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+ font-family: ${th('fontHeading')};
+ font-size: ${th('fontSizeBaseSmall')};
font-weight: 600;
`
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorAdder.js b/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
index 1fc5ae03b70f65eb88d19d947a1e2b7f81800e6a..47264445eab33b0bc90a9a17bc7e84fa77a05aef 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorAdder.js
@@ -1,28 +1,28 @@
import React from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
-import { Button } from '@pubsweet/ui'
import { reduxForm } from 'redux-form'
import styled from 'styled-components'
+import { Button, th } from '@pubsweet/ui'
import { compose, withProps } from 'recompose'
import { selectCurrentUser } from 'xpub-selectors'
-import { Spinner } from '../UIComponents/'
import { emailValidator } from '../utils'
+import { Spinner } from '../UIComponents/'
import {
- getAuthorFetching,
getAuthors,
authorSuccess,
authorFailure,
+ getAuthorFetching,
} from '../../redux/authors'
import { ValidatedTextField } from './FormItems'
const AuthorAdder = ({
- authors = [],
editMode,
+ isFetching,
setEditMode,
+ authors = [],
handleSubmit,
- isFetching,
}) => (
<Root>
<Button data-test="button-add-author" onClick={setEditMode(true)} primary>
@@ -73,8 +73,8 @@ const AuthorAdder = ({
export default compose(
connect(
state => ({
- currentUser: selectCurrentUser(state),
isFetching: getAuthorFetching(state),
+ currentUser: selectCurrentUser(state),
}),
{
authorSuccess,
@@ -89,10 +89,10 @@ export default compose(
if (!admin && authors.length === 0) {
return {
initialValues: {
- affiliation,
email,
- firstName,
lastName,
+ firstName,
+ affiliation,
},
}
}
@@ -139,31 +139,31 @@ export default compose(
const ButtonsContainer = styled.div`
display: flex;
justify-content: space-around;
- margin: 15px 0 0 0;
+ margin: calc(${th('subGridUnit')} * 2) 0 0 0;
`
const Row = styled.div`
display: flex;
flex-direction: row;
- margin: 10px 0;
+ margin: ${th('subGridUnit')} 0;
`
const Title = styled.span`
- font-size: ${({ theme }) => theme.fontSizeBase};
+ font-size: ${th('fontSizeBase')};
font-weight: 500;
- margin: 10px 0;
+ margin: ${th('subGridUnit')} 0;
text-transform: uppercase;
`
const FormBody = styled.div`
- border: ${({ theme }) => theme.borderDefault};
- margin-top: 10px;
- padding: 10px;
+ border: ${th('borderDefault')};
+ margin-top: ${th('subGridUnit')};
+ padding: ${th('subGridUnit')};
`
const Root = styled.div`
display: flex;
flex-direction: column;
- margin: 10px 0;
+ margin: ${th('subGridUnit')} 0;
`
// #endregion
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
index c9d5f29f486db2ca3cdaec0b87880be2769ac2ba..38deb2e6199096c7714b31fcdbbf9ecd0db8fe15 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
@@ -1,8 +1,8 @@
import React, { Fragment } from 'react'
import { pick } from 'lodash'
import { connect } from 'react-redux'
-import { Icon, Checkbox } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
+import { Icon, Checkbox, th } from '@pubsweet/ui'
import { compose, withHandlers, withProps } from 'recompose'
import { reduxForm, Field, change as changeForm } from 'redux-form'
@@ -11,9 +11,9 @@ import { Spinner } from '../UIComponents'
import {
getAuthors,
editAuthor,
- getAuthorFetching,
authorSuccess,
authorFailure,
+ getAuthorFetching,
} from '../../redux/authors'
import { ValidatedTextField, Label } from './FormItems'
@@ -22,14 +22,14 @@ const renderCheckbox = ({ input }) => (
)
const AuthorEdit = ({
+ index,
+ email,
isFetching,
- setAuthorEdit,
handleSubmit,
- parseAuthorType,
- index,
isSubmitting,
+ setAuthorEdit,
+ parseAuthorType,
isCorresponding,
- email,
changeCorresponding,
...rest
}) => (
@@ -94,12 +94,12 @@ export default compose(
initialValues: {
edit: pick(props, [
'id',
- 'isCorresponding',
- 'isSubmitting',
- 'firstName',
- 'lastName',
'email',
+ 'lastName',
+ 'firstName',
'affiliation',
+ 'isSubmitting',
+ 'isCorresponding',
]),
},
})),
@@ -139,15 +139,15 @@ export default compose(
// #region styled-components
const defaultText = css`
- color: ${({ theme }) => theme.colorText};
- font-size: ${({ theme }) => theme.fontSizeBaseSmall};
- font-family: ${({ theme }) => theme.fontReading};
+ color: ${th('colorText')};
+ font-size: ${th('fontSizeBaseSmall')};
+ font-family: ${th('fontReading')};
`
const Row = styled.div`
display: flex;
flex-direction: row;
- margin: 10px 0;
+ margin: ${th('subGridUnit')} 0;
`
const TitleContainer = styled.div`
@@ -157,8 +157,8 @@ const TitleContainer = styled.div`
> span {
${defaultText};
- font-size: ${({ theme }) => theme.fontSizeHeading6};
- margin-right: 10px;
+ font-size: ${th('fontSizeHeading6')};
+ margin-right: ${th('subGridUnit')};
font-weight: 600;
text-align: left;
}
@@ -183,7 +183,7 @@ const ClickableIcon = styled.div`
flex: 1;
flex-direction: column;
justify-content: center;
- margin: 0 12px;
+ margin: 0 calc(${th('subGridUnit')} * 2);
`
const Header = styled.div`
@@ -194,10 +194,10 @@ const Header = styled.div`
`
const Root = styled.div`
- border: ${({ theme }) => theme.borderDefault};
- margin: 10px 0;
- padding: 10px;
+ border: ${th('borderDefault')};
display: flex;
flex-direction: column;
+ margin: ${th('subGridUnit')} 0;
+ padding: ${th('subGridUnit')};
`
// #endregion
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorList.js b/packages/components-faraday/src/components/AuthorList/AuthorList.js
index 1b020b5e478005ccaa3ea70336b030b06f6ca538..c6b03ef04c98938244acd3f7731886b24b9444ab 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorList.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorList.js
@@ -6,18 +6,18 @@ import styled from 'styled-components'
import { withRouter } from 'react-router-dom'
import {
compose,
- withHandlers,
- getContext,
lifecycle,
withState,
+ getContext,
+ withHandlers,
} from 'recompose'
import { change as changeForm } from 'redux-form'
import { SortableList } from 'pubsweet-component-sortable-list/src/components'
import {
addAuthor,
- deleteAuthor,
getAuthors,
+ deleteAuthor,
authorFailure,
getAuthorsTeam,
getAuthorError,
@@ -27,22 +27,22 @@ import {
import Author from './Author'
import StaticList from './StaticList'
import AuthorAdder from './AuthorAdder'
-import AuthorEditor from './AuthorEditor'
import { DragHandle } from './FormItems'
+import AuthorEditor from './AuthorEditor'
const Authors = ({
- authors,
- moveAuthor,
- addAuthor,
- editAuthor,
match,
+ error,
+ authors,
version,
- dropItem,
editMode,
+ dropItem,
+ addAuthor,
+ moveAuthor,
+ editAuthor,
setEditMode,
editedAuthor,
setFormAuthors,
- error,
...rest
}) => (
<Root>
@@ -143,10 +143,10 @@ export default compose(
},
removeAuthor: ({
authors,
- setFormAuthors,
+ project,
deleteAuthor,
authorFailure,
- project,
+ setFormAuthors,
}) => (id, authorEmail) => () => {
deleteAuthor(project.id, id).then(
() => {