diff --git a/packages/component-manuscript/src/components/ReviewerReportForm.js b/packages/component-manuscript/src/components/ReviewerReportForm.js
index 946bdb61278e7c2f535cb63a450b158beff505c8..649d4119022c0bffd507300f7bb8868c3267933d 100644
--- a/packages/component-manuscript/src/components/ReviewerReportForm.js
+++ b/packages/component-manuscript/src/components/ReviewerReportForm.js
@@ -34,6 +34,8 @@ import {
FilePicker,
} from 'pubsweet-components-faraday/src/components/Files'
+import { FormItems } from 'pubsweet-components-faraday/src/components/UIComponents'
+
import {
withModal,
ConfirmationModal,
@@ -51,9 +53,14 @@ import {
parseReviewResponseToForm,
} from './utils'
+const { CustomValidatedField } = FormItems
const guidelinesLink =
'https://about.hindawi.com/authors/peer-review-at-hindawi/'
+const TextAreaField = ({ input }) => (
+ <Textarea {...input} height={70} rows={6} />
+)
+
const ReviewerReportForm = ({
addFile,
fileError,
@@ -109,20 +116,13 @@ const ReviewerReportForm = ({
</Row>
<Row>
<FullWidth>
- <ValidatedField
- component={input => (
- <Textarea
- {...input}
- hasError={input.validationStatus === 'error'}
- onChange={e => changeField('public', e.target.value)}
- readOnly={fileFetching.review}
- rows={6}
- />
- )}
- name="public"
- readOnly={fileFetching.review}
- validate={isEmpty(formValues.files) ? [required] : []}
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={TextAreaField}
+ name="public"
+ validate={isEmpty(formValues.files) ? [required] : []}
+ />
+ </CustomValidatedField>
</FullWidth>
</Row>
{formValues.files && (
@@ -153,20 +153,13 @@ const ReviewerReportForm = ({
</Row>
<Row>
<FullWidth>
- <ValidatedField
- component={input => (
- <Textarea
- {...input}
- hasError={input.validationStatus === 'error'}
- onChange={e => changeField('confidential', e.target.value)}
- readOnly={fileFetching.review}
- rows={6}
- />
- )}
- name="confidential"
- readOnly={fileFetching.review}
- validate={[required]}
- />
+ <CustomValidatedField>
+ <ValidatedField
+ component={TextAreaField}
+ name="confidential"
+ validate={[required]}
+ />
+ </CustomValidatedField>
</FullWidth>
</Row>
</Fragment>
diff --git a/packages/components-faraday/src/components/MakeDecision/DecisionForm.js b/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
index 0ee25326242815a4b6eda4ceda76ea215dedb75e..ad282d0f6068fb6965ddafad30ec70d080d722e5 100644
--- a/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
+++ b/packages/components-faraday/src/components/MakeDecision/DecisionForm.js
@@ -23,10 +23,10 @@ const {
Title,
Label,
RowItem,
- Textarea,
Subtitle,
RootContainer,
FormContainer,
+ TextAreaField,
CustomRadioGroup,
CustomValidatedField,
} = FormItems
@@ -85,7 +85,7 @@ const DecisionForm = ({
<Label>Comments for Handling Editor</Label>
<CustomValidatedField>
<ValidatedField
- component={input => <Textarea {...input} height={70} />}
+ component={TextAreaField}
name="messageToHE"
validate={[required]}
/>
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
index ef6faf07e53e85ca29b23f1ba0e48b7b87ef17d5..ae48f5f41f0e8bbc2f144392ecc1ea23a3ba29fe 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
@@ -23,7 +23,7 @@ const {
Label,
Title,
RowItem,
- Textarea,
+ TextAreaField,
RootContainer,
FormContainer,
CustomRadioGroup,
@@ -54,10 +54,7 @@ const StepTwo = ({
<RowItem vertical>
<Label>Message for Editor in Chief (optional)</Label>
<CustomValidatedField>
- <ValidatedField
- component={input => <Textarea {...input} height={70} />}
- name="message.eic"
- />
+ <ValidatedField component={TextAreaField} name="message.eic" />
</CustomValidatedField>
</RowItem>
</Row>
@@ -65,10 +62,7 @@ const StepTwo = ({
<RowItem vertical>
<Label>Message for Author (optional)</Label>
<CustomValidatedField>
- <ValidatedField
- component={input => <Textarea {...input} height={70} />}
- name="message.author"
- />
+ <ValidatedField component={TextAreaField} name="message.author" />
</CustomValidatedField>
</RowItem>
</Row>
@@ -108,7 +102,7 @@ const StepTwo = ({
</Label>
<CustomValidatedField>
<ValidatedField
- component={input => <Textarea {...input} />}
+ component={TextAreaField}
name="revision.reason"
validate={[required]}
/>
@@ -142,7 +136,7 @@ const StepTwo = ({
<RowItem>
<CustomValidatedField>
<ValidatedField
- component={input => <Textarea {...input} height={70} />}
+ component={TextAreaField}
name="revision.internal-note"
/>
</CustomValidatedField>
diff --git a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
index b613bc9692415a3ecf1d8ce297c4228ec0a4abfe..8bc8a1e6e11d95e3d425f6ae211028d12b1c88c7 100644
--- a/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
+++ b/packages/components-faraday/src/components/SignUp/ReviewerInviteDecision.js
@@ -27,6 +27,7 @@ const {
const agreeText = `You have been invited to review a manuscript on the Hindawi platform. Please set a password and proceed to the manuscript.`
const declineText = `You have decline to work on a manuscript.`
+const PasswordField = input => <TextField {...input} type="password" />
const min8Chars = minChars(8)
const ReviewerInviteDecision = ({
agree,
@@ -45,7 +46,7 @@ const ReviewerInviteDecision = ({
<RowItem>
<Label> Password </Label>
<ValidatedField
- component={input => <TextField {...input} type="password" />}
+ component={PasswordField}
name="password"
validate={[required, min8Chars]}
/>
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index fb3e7eb4eaf716546b66dc00647ff44148a4f6e6..fb342d2ad718ccd7b2a163e6f0b9e6ca2efa71b0 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -13,7 +13,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
<FormContainer onSubmit={handleSubmit}>
<Row>
<RowItem vertical>
- <Label> First name* </Label>
+ <Label>First name*</Label>
<ValidatedField
component={TextField}
name="firstName"
@@ -21,7 +21,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
/>
</RowItem>
<RowItem vertical>
- <Label> Last name* </Label>
+ <Label>Last name*</Label>
<ValidatedField
component={TextField}
name="lastName"
@@ -31,7 +31,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
</Row>
<Row>
<RowItem vertical>
- <Label> Affiliation* </Label>
+ <Label>Affiliation*</Label>
<ValidatedField
component={TextField}
name="affiliation"
@@ -40,7 +40,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
</RowItem>
<RowItem vertical>
- <Label> Title* </Label>
+ <Label>Title*</Label>
<ValidatedField
component={input => <Menu {...input} options={journal.title} />}
name="title"
@@ -49,9 +49,11 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
</RowItem>
</Row>
<Row>
- <Button primary type="submit">
- CONFIRM & PROCEED TO SET PASSWORD
- </Button>
+ <RowItem centered>
+ <Button primary type="submit">
+ CONFIRM & PROCEED TO SET PASSWORD
+ </Button>
+ </RowItem>
</Row>
</FormContainer>
) : (
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index f5469320fbd6d05098fbdd9c4f78da2005e6a39f..b3e5317e04cc714c527e2d51793e83e9f02b012f 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -5,15 +5,17 @@ import { Button, ValidatedField, TextField } from '@pubsweet/ui'
import { FormItems } from '../UIComponents'
-const { FormContainer, Row, RowItem, Label, Err } = FormItems
+const { Row, Err, Label, RowItem, FormContainer } = FormItems
+
+const TextFormField = input => <TextField {...input} type="password" />
const Step1 = ({ journal, handleSubmit, error }) => (
<FormContainer onSubmit={handleSubmit}>
<Row>
- <RowItem>
- <Label> Password </Label>
+ <RowItem vertical>
+ <Label>Password</Label>
<ValidatedField
- component={input => <TextField {...input} type="password" />}
+ component={TextFormField}
name="password"
validate={[required]}
/>
diff --git a/packages/components-faraday/src/components/UIComponents/FormItems.js b/packages/components-faraday/src/components/UIComponents/FormItems.js
index 09c1b27992dc9d7b6b0b16729c5c40cbfd3d51e1..3eedeff339c8038871085d97c047c497a9bb8697 100644
--- a/packages/components-faraday/src/components/UIComponents/FormItems.js
+++ b/packages/components-faraday/src/components/UIComponents/FormItems.js
@@ -1,3 +1,4 @@
+import React from 'react'
import { th } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
@@ -45,7 +46,7 @@ export const Email = styled.div`
export const FormContainer = styled.form``
export const Row = styled.div`
- align-items: center;
+ align-items: flex-start;
display: flex;
flex-direction: row;
justify-content: space-evenly;
@@ -57,7 +58,7 @@ export const RowItem = styled.div`
flex: ${({ flex }) => flex || 1};
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
- margin: 0 ${th('subGridUnit')};
+ margin: ${th('subGridUnit')};
& > div {
flex: 1;
@@ -121,8 +122,14 @@ export const CustomRadioGroup = styled.div`
export const CustomValidatedField = styled.div`
div {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+
div:last-child {
margin-top: 0;
}
}
`
+
+export const TextAreaField = ({ input }) => <Textarea {...input} height={70} />
diff --git a/packages/components-faraday/src/components/index.js b/packages/components-faraday/src/components/index.js
index 8765d426a79c94ef859e7f154d49d56a6e59d51e..902783170936776d49e7d22e542c1ad670bf9699 100644
--- a/packages/components-faraday/src/components/index.js
+++ b/packages/components-faraday/src/components/index.js
@@ -1,4 +1,5 @@
import { Decision } from './MakeDecision'
+import * as Components from './UIComponents'
import { Recommendation } from './MakeRecommendation'
export { default as Steps } from './Steps/Steps'
@@ -8,6 +9,7 @@ export { default as AuthorList } from './AuthorList/AuthorList'
export { default as SortableList } from './SortableList/SortableList'
export { Decision }
+export { Components }
export { Recommendation }
export { DragHandle } from './AuthorList/FormItems'
export { Dropdown, DateParser, Logo, Spinner } from './UIComponents'
diff --git a/packages/xpub-faraday/app/config/journal/submit-wizard.js b/packages/xpub-faraday/app/config/journal/submit-wizard.js
index 5d56d7f9783070424ad3bf73eee328e3d30172b6..132dd9c2fea621e2fdab4981de3171e6e2468101 100644
--- a/packages/xpub-faraday/app/config/journal/submit-wizard.js
+++ b/packages/xpub-faraday/app/config/journal/submit-wizard.js
@@ -2,7 +2,7 @@ import React from 'react'
import styled from 'styled-components'
import uploadFileFn from 'xpub-upload'
import { AbstractEditor, TitleEditor } from 'xpub-edit'
-import { Menu, YesOrNo, TextField, CheckboxGroup } from '@pubsweet/ui'
+import { Menu, YesOrNo, CheckboxGroup } from '@pubsweet/ui'
import { required, minChars, minSize } from 'xpub-validators'
import { AuthorList, Files } from 'pubsweet-components-faraday/src/components'
@@ -163,7 +163,7 @@ export default {
condition: 'yes',
},
fieldId: 'conflicts.message',
- renderComponent: TextField,
+ renderComponent: AbstractEditor,
label: 'Conflict of interest details',
validate: [required, min3Chars],
},