diff --git a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js index 99835a001d0e7a1c3ab572f403561a1b60ed1753..8084902686583fa5f2a830cd8c2b0bc0abfab2c7 100644 --- a/packages/components-faraday/src/components/Reviewers/InviteReviewers.js +++ b/packages/components-faraday/src/components/Reviewers/InviteReviewers.js @@ -1,22 +1,22 @@ import React, { Fragment } from 'react' import { connect } from 'react-redux' +import styled, { css } from 'styled-components' import { Icon, Button, th, Spinner } from '@pubsweet/ui' -import styled, { css, withTheme } from 'styled-components' import { compose, withHandlers, lifecycle } from 'recompose' import { ConfirmationModal, withModal2, } from 'pubsweet-component-modal/src/components' -import { ReviewerBreakdown } from '../Invitations' import { ReviewerForm, ReviewersList } from './' +import { ReviewerBreakdown } from '../Invitations' import { selectReviewers, + clearReviewersError, selectFetchingInvite, selectReviewersError, - selectFetchingReviewers, getCollectionReviewers, - clearReviewersError, + selectFetchingReviewers, } from '../../redux/reviewers' const InviteReviewers = ({ showInviteModal }) => ( @@ -24,7 +24,6 @@ const InviteReviewers = ({ showInviteModal }) => ( ) const InviteReviewersModal = compose( - withTheme, connect( state => ({ reviewers: selectReviewers(state), @@ -51,22 +50,21 @@ const InviteReviewersModal = compose( }), )( ({ - theme, hideModal, onConfirm, showModal, - reviewers = [], - invitations = [], versionId, collectionId, getReviewers, reviewerError, fetchingInvite, fetchingReviewers, + reviewers = [], + invitations = [], }) => ( <Root> <CloseIcon data-test="icon-modal-hide" onClick={hideModal}> - <Icon color={theme.colorPrimary}>x</Icon> + <Icon primary>x</Icon> </CloseIcon> <Title>Invite Reviewers</Title> @@ -192,9 +190,9 @@ const Root = styled.div` const AssignButton = styled(Button)` ${defaultText}; align-items: center; - color: ${th('colorTextReverse')}; background-color: ${th('colorPrimary')}; - height: calc(${th('subGridUnit')}*5); + color: ${th('colorTextReverse')}; + height: calc(${th('subGridUnit')} * 5); text-align: center; ` // #endregion diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js b/packages/components-faraday/src/components/Reviewers/ReviewerForm.js index 02ec4448e4c4d718aff398db8903efc5d09e59eb..465ed9dcb2ae9e3c37e138ca3f8e3fee5aefc84a 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewerForm.js +++ b/packages/components-faraday/src/components/Reviewers/ReviewerForm.js @@ -64,8 +64,8 @@ export default compose( ) => { const reviewerData = pick(values, [ 'email', - 'firstName', 'lastName', + 'firstName', 'affiliation', ]) inviteReviewer(reviewerData, collectionId).then(() => { diff --git a/packages/components-faraday/src/components/Reviewers/ReviewerList.js b/packages/components-faraday/src/components/Reviewers/ReviewerList.js index 1a0b2964fcf7dc0eeecb5ed4d6ca7d4b582e3923..b5d73a2abdcdde26b5be60847d913455276ce8ce 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewerList.js +++ b/packages/components-faraday/src/components/Reviewers/ReviewerList.js @@ -2,33 +2,31 @@ import React from 'react' import moment from 'moment' import { pick } from 'lodash' import { connect } from 'react-redux' +import styled from 'styled-components' import { th, Icon } from '@pubsweet/ui' -import styled, { withTheme } from 'styled-components' import { compose, withHandlers, withProps } from 'recompose' import { revokeReviewer, inviteReviewer } from '../../redux/reviewers' -const ResendRevoke = withTheme( - ({ theme, showConfirmResend, showConfirmRevoke, status }) => ( - <ActionButtons> - <div onClick={showConfirmResend}> - <Icon color={theme.colorPrimary}>refresh-cw</Icon> +const ResendRevoke = ({ showConfirmResend, showConfirmRevoke, status }) => ( + <ActionButtons> + <div onClick={showConfirmResend}> + <Icon primary>refresh-cw</Icon> + </div> + {status === 'pending' && ( + <div onClick={showConfirmRevoke}> + <Icon primary>x-circle</Icon> </div> - {status === 'pending' && ( - <div onClick={showConfirmRevoke}> - <Icon color={theme.colorPrimary}>x-circle</Icon> - </div> - )} - </ActionButtons> - ), + )} + </ActionButtons> ) const ReviewersList = ({ - renderAcceptedLabel, reviewers, + renderTimestamp, showConfirmResend, showConfirmRevoke, - renderTimestamp, + renderAcceptedLabel, }) => reviewers.length > 0 && ( <Root> @@ -106,9 +104,9 @@ export default compose( withHandlers({ showConfirmResend: ({ showModal, - goBackToReviewers, - inviteReviewer, collectionId, + inviteReviewer, + goBackToReviewers, }) => reviewer => () => { showModal({ title: 'Resend reviewer invite', @@ -125,9 +123,9 @@ export default compose( showConfirmRevoke: ({ showModal, hideModal, - goBackToReviewers, - revokeReviewer, collectionId, + revokeReviewer, + goBackToReviewers, }) => invitationId => () => { showModal({ title: 'Unassign Reviewer', diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js index a3df9a1caa6c9d33165cf864b2d3912f1538830f..ef4cf0bb0e750f14b91c7aba037dac807b0b886c 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js +++ b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js @@ -3,11 +3,11 @@ import moment from 'moment' import { pick, get } from 'lodash' import { connect } from 'react-redux' import { th, Icon } from '@pubsweet/ui' -import styled, { withTheme } from 'styled-components' +import styled, { css } from 'styled-components' import { compose, withHandlers, withProps } from 'recompose' import { - ConfirmationModal, withModal2, + ConfirmationModal, } from 'pubsweet-component-modal/src/components' import { @@ -18,28 +18,26 @@ import { getCollectionReviewers, } from '../../redux/reviewers' -const ResendRevoke = withTheme( - ({ theme, showConfirmResend, showConfirmRevoke, status }) => ( - <ActionButtons> - <div onClick={showConfirmResend}> - <Icon color={theme.colorPrimary}>refresh-cw</Icon> +const ResendRevoke = ({ showConfirmResend, showConfirmRevoke, status }) => ( + <ActionButtons> + <div onClick={showConfirmResend}> + <Icon primary>refresh-cw</Icon> + </div> + {status === 'pending' && ( + <div onClick={showConfirmRevoke}> + <Icon primary>x-circle</Icon> </div> - {status === 'pending' && ( - <div onClick={showConfirmRevoke}> - <Icon color={theme.colorPrimary}>x-circle</Icon> - </div> - )} - </ActionButtons> - ), + )} + </ActionButtons> ) const TR = ({ - reviewer: r, - renderAcceptedLabel, index, + reviewer: r, renderTimestamp, showConfirmResend, showConfirmRevoke, + renderAcceptedLabel, }) => { const submittedOn = get(r, 'review.submittedOn') return ( @@ -71,11 +69,11 @@ const TR = ({ ) } const ReviewersDetailsList = ({ - renderAcceptedLabel, reviewers, + renderTimestamp, showConfirmResend, showConfirmRevoke, - renderTimestamp, + renderAcceptedLabel, }) => reviewers.length > 0 ? ( <Root> @@ -112,8 +110,8 @@ const ReviewersDetailsList = ({ const ModalWrapper = compose( connect(state => ({ - fetchingInvite: selectFetchingInvite(state), modalError: selectReviewersError(state), + fetchingInvite: selectFetchingInvite(state), })), )(({ fetchingInvite, ...rest }) => ( <ConfirmationModal {...rest} isFetching={fetchingInvite} /> @@ -145,10 +143,10 @@ export default compose( showConfirmResend: ({ showModal, hideModal, + collectionId, setModalError, - goBackToReviewers, inviteReviewer, - collectionId, + goBackToReviewers, getCollectionReviewers, }) => reviewer => () => { showModal({ @@ -168,10 +166,10 @@ export default compose( showConfirmRevoke: ({ showModal, hideModal, + collectionId, setModalError, - goBackToReviewers, revokeReviewer, - collectionId, + goBackToReviewers, getCollectionReviewers, }) => invitationId => () => { showModal({ @@ -189,12 +187,16 @@ export default compose( )(ReviewersDetailsList) // #region styled-components -const ReviewerEmail = styled.span` - font-size: ${th('fontSizeBaseSmall')}; +const defaultText = css` color: ${th('colorPrimary')}; + font-size: ${th('fontSizeBaseSmall')}; font-family: ${th('fontReading')}; ` +const ReviewerEmail = styled.span` + ${defaultText}; +` + const ReviewerName = ReviewerEmail.extend` text-decoration: underline; ` @@ -231,22 +233,18 @@ const Table = styled.table` width: 100%; & thead tr { + ${defaultText}; border-bottom: ${th('borderDefault')}; - color: ${th('colorPrimary')}; - font-family: ${th('fontReading')}; - font-size: ${th('fontSizeBaseSmall')}; font-weight: bold; - height: 40px; + height: calc(${th('subGridUnit')} * 7); text-align: left; line-height: 1.5; } ` const Row = styled.tr` + ${defaultText}; border-bottom: ${th('borderDefault')}; - color: ${th('colorPrimary')}; - font-family: ${th('fontReading')}; - font-size: ${th('fontSizeBaseSmall')}; - height: 40px; + height: calc(${th('subGridUnit')} * 7); text-align: left; line-height: 1.5; diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js b/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js index d25ffaecdef1b14bd8ab996de0bf64c7d8f15847..f30d64c2af5aa9e0535bce02058a761adf460671 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js +++ b/packages/components-faraday/src/components/Reviewers/ReviewersSelect.js @@ -26,11 +26,11 @@ const renderField = ({ input: { onBlur, ...rest }, meta }) => { } const ReviewersSelect = ({ - label = 'Email*', - values = [], onSelect, - reviewerEmail, formMeta, + reviewerEmail, + values = [], + label = 'Email*', }) => { const active = !!get(formMeta, 'email.active') const filteredValues = values.filter(v => v.email.includes(reviewerEmail)) @@ -82,8 +82,8 @@ const Input = styled.input` border-radius: 2px; font-family: inherit; font-size: inherit; - padding: 0 calc(24px / 2); - height: calc(24px * 2); + padding: 0 calc(${th('gridUnit')} / 2); + height: calc(${th('gridUnit')} * 2); ` const RenderRoot = styled.div` @@ -131,7 +131,7 @@ const SuggestionsContainer = styled.div` const FormLabel = styled.span` ${defaultText}; font-weight: 300; - height: 19px; + height: calc(${th('subGridUnit')} * 3); text-transform: uppercase; ` @@ -140,7 +140,7 @@ const Root = styled.div` flex: 1; flex-direction: column; height: 92px; - margin-right: 5px; + margin-right: ${th('subGridUnit')}; position: relative; ` // #endregion diff --git a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js index c47b24cc609ca9ab64af40274a09aabd538d91ca..b613bc9692415a3ecf1d8ce297c4228ec0a4abfe 100644 --- a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js +++ b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js @@ -9,8 +9,8 @@ import { loginUser } from 'pubsweet-component-login/actions' import { Button, ValidatedField, TextField } from '@pubsweet/ui' import { redirectToError } from '../utils' -import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers' import { FormItems } from '../UIComponents' +import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers' const { Row, @@ -32,8 +32,8 @@ const ReviewerInviteDecision = ({ agree, error, handleSubmit, - reviewerEmail, errorMessage, + reviewerEmail, }) => ( <RootContainer bordered> <Title>Hindawi Invitation</Title> @@ -74,8 +74,8 @@ export default compose( push, replace, loginUser, - setReviewerPassword, reviewerDecision, + setReviewerPassword, }), lifecycle({ componentDidMount() { diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js index 508ecf4d0edea24a67dfbb18d67fa39165cc21c5..0ad1a8f2a6d40d1bf780c290160f0cba6fb714e9 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js +++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js @@ -50,19 +50,19 @@ export default compose( const params = new URLSearchParams(location.search) const email = params.get('email') const token = params.get('token') - const firstName = params.get('firstName') + const title = params.get('title') const lastName = params.get('lastName') + const firstName = params.get('firstName') const affiliation = params.get('affiliation') - const title = params.get('title') return { initialValues: { email, - firstName, - lastName, - affiliation, title, token, + lastName, + firstName, + affiliation, }, } }), diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js index 1e7c02b50c8e33519b612489b944a76eb925be59..fb3e7eb4eaf716546b66dc00647ff44148a4f6e6 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js +++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js @@ -1,6 +1,6 @@ import React from 'react' -import { reduxForm } from 'redux-form' import { isUndefined } from 'lodash' +import { reduxForm } from 'redux-form' import { required } from 'xpub-validators' import { Button, ValidatedField, TextField, Menu } from '@pubsweet/ui' diff --git a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js index bc6a07e7d0728576a4988c7ae6af722732f64661..3f974da8f2e7384d696cdde1db84f56aa6b6dcdc 100644 --- a/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js +++ b/packages/components-faraday/src/components/UIComponents/ConfirmationPage.js @@ -1,17 +1,17 @@ import React from 'react' 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 { Button, th } from '@pubsweet/ui' +import { withJournal } from 'xpub-journal' import { getFragmentAuthors } from 'pubsweet-components-faraday/src/redux/authors' const ConfirmationPage = ({ journal, + history, authors = [], location: { state }, - history, }) => { const email = get(authors.find(a => a.isCorresponding), 'email') return ( @@ -66,22 +66,21 @@ export default compose( )(ConfirmationPage) // #region styles - const Root = styled.div` + color: ${th('colorText')}; margin: 0 auto; text-align: center; width: 70vw; - color: ${({ theme }) => theme.colorText}; a { - color: ${({ theme }) => theme.colorText}; + color: ${th('colorText')}; } ` const Title = styled.div` - font-size: ${({ theme }) => theme.fontSizeHeading5}; - font-family: ${({ theme }) => theme.fontHeading}; - color: ${({ theme }) => theme.colorPrimary}; + color: ${th('colorPrimary')}; + font-size: ${th('fontSizeHeading5')}; + font-family: ${th('fontHeading')}; margin: 10px auto; ` // #endregion diff --git a/packages/components-faraday/src/components/UIComponents/Dropdown.js b/packages/components-faraday/src/components/UIComponents/Dropdown.js deleted file mode 100644 index 74aa2b0ae4d1f4f467c711ca4825bee90efcf5d8..0000000000000000000000000000000000000000 --- a/packages/components-faraday/src/components/UIComponents/Dropdown.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react' -import { compose, withState, withHandlers } from 'recompose' -import classnames from 'classnames' - -import classes from './Dropdown.local.scss' - -const DropdownOptions = ({ visible, options, onSelect }) => - visible ? ( - <div className={classes.options}> - {options.map(opt => ( - <div key={opt.value} onClick={onSelect(opt)}> - {opt.label} - </div> - ))} - </div> - ) : null - -const Dropdown = ({ - label, - showDropdown, - inputValue, - changeInput, - defaultValue = null, - options, - onChange, - setDropdown, - selectValue, -}) => ( - <div className={classes.container}> - <span className={classes.label}>{label}</span> - <div className={classes.inputContainer}> - <input - onChange={changeInput} - onFocus={setDropdown(true)} - placeholder="Type or select from dropdown" - type="text" - value={inputValue.label} - /> - <span className={classnames({ [classes.downarrow]: showDropdown })}> - ► - </span> - </div> - <DropdownOptions - onSelect={selectValue} - options={options.filter(opt => opt.label.indexOf(inputValue.label) > -1)} - visible={showDropdown} - /> - </div> -) - -export default compose( - withState( - 'inputValue', - 'setInputValue', - ({ defaultValue }) => defaultValue || { label: '' }, - ), - withState('showDropdown', 'setDropdownVisibility', false), - withHandlers({ - changeInput: ({ setInputValue }) => e => { - e.persist() - setInputValue(prev => ({ ...prev, label: e.target.value })) - }, - setDropdown: ({ setDropdownVisibility }) => visibilty => e => { - setDropdownVisibility(visibilty) - }, - selectValue: ({ - setInputValue, - setDropdownVisibility, - onSelect, - }) => value => e => { - setInputValue(value) - onSelect && onSelect(value) - setDropdownVisibility(false) - }, - }), -)(Dropdown) diff --git a/packages/components-faraday/src/components/UIComponents/Dropdown.local.scss b/packages/components-faraday/src/components/UIComponents/Dropdown.local.scss deleted file mode 100644 index ffe230262dd06dedaf989acfa41d5ff495244767..0000000000000000000000000000000000000000 --- a/packages/components-faraday/src/components/UIComponents/Dropdown.local.scss +++ /dev/null @@ -1,57 +0,0 @@ -.container { - display: flex; - flex-direction: column; - margin: 5px 0; - position: relative; -} - -.label { - font-size: 16px; - font-weight: 400; - margin: 5px 0; -} - -.inputContainer { - align-items: center; - display: flex; - position: relative; - - input { - border: 1px solid #888; - border-radius: 2px; - display: flex; - flex: 1; - height: 20px; - padding: 0 2px; - - &:focus { - outline: none; - } - } - - span { - position: absolute; - right: 10px; - top: 1px; - transform: rotateZ(90deg); - transition: transform 0.2s linear; - } -} - -.options { - background-color: #eee; - cursor: pointer; - left: 0; - position: absolute; - top: 50px; - width: 100%; - z-index: 1000; - - :hover { - background-color: #aaa; - } -} - -.downarrow { - transform: rotateZ(270deg) !important; -} diff --git a/packages/components-faraday/src/components/UIComponents/ErrorPage.js b/packages/components-faraday/src/components/UIComponents/ErrorPage.js index 4022bd8a95394667db65658d8d43217a69d044c4..fa7f4df22b2611fc6bd39f9b9794020eef96380c 100644 --- a/packages/components-faraday/src/components/UIComponents/ErrorPage.js +++ b/packages/components-faraday/src/components/UIComponents/ErrorPage.js @@ -1,6 +1,6 @@ import React from 'react' -import { Button } from '@pubsweet/ui' import styled from 'styled-components' +import { Button, th } from '@pubsweet/ui' const ErrorPage = ({ location: { state }, history }) => ( <Root> @@ -15,20 +15,20 @@ export default ErrorPage // #region styles const Root = styled.div` + color: ${th('colorText')}; margin: 0 auto; text-align: center; width: 70vw; - color: ${({ theme }) => theme.colorText}; a { - color: ${({ theme }) => theme.colorText}; + color: ${th('colorText')}; } ` const Title = styled.div` - font-size: ${({ theme }) => theme.fontSizeHeading5}; - font-family: ${({ theme }) => theme.fontHeading}; - color: ${({ theme }) => theme.colorPrimary}; - margin: 10px auto; + color: ${th('colorPrimary')}; + font-size: ${th('fontSizeHeading5')}; + font-family: ${th('fontHeading')}; + margin: calc(${th('subGridUnit')} * 2) auto; ` // #endregion diff --git a/packages/components-faraday/src/components/UIComponents/NotFound.js b/packages/components-faraday/src/components/UIComponents/NotFound.js index 0c4acda1b08c2cfef2c721dc17bbb3be3c7ea956..6a4ed011b9032275b27f45bb30e0bc3825e8296f 100644 --- a/packages/components-faraday/src/components/UIComponents/NotFound.js +++ b/packages/components-faraday/src/components/UIComponents/NotFound.js @@ -1,6 +1,6 @@ import React from 'react' -import { Icon, Button, th } from '@pubsweet/ui' import styled from 'styled-components' +import { Icon, Button, th } from '@pubsweet/ui' const NotFound = ({ history }) => ( <Root> diff --git a/packages/components-faraday/src/components/UIComponents/index.js b/packages/components-faraday/src/components/UIComponents/index.js index 738dc3c98c71921c7bcd8c964b59457d0c29cdb4..b2defb43c993b04ffafe4cc8bad59aa09f6d3430 100644 --- a/packages/components-faraday/src/components/UIComponents/index.js +++ b/packages/components-faraday/src/components/UIComponents/index.js @@ -4,6 +4,5 @@ export { FormItems } export { default as Logo } from './Logo' export { default as Spinner } from './Spinner' export { default as NotFound } from './NotFound' -export { default as Dropdown } from './Dropdown' export { default as ErrorPage } from './ErrorPage' export { default as ConfirmationPage } from './ConfirmationPage'