diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js index 0c7e9ec11627bbee30c7d934bf6b4e458cd84a19..51edb75af1575d53e615c6cff9db1f7081b682ca 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js +++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js @@ -4,6 +4,7 @@ import { reduxForm } from 'redux-form' import { get, isUndefined } from 'lodash' import { required as requiredValidator } from 'xpub-validators' import { Menu, Button, Checkbox, TextField, ValidatedField } from '@pubsweet/ui' +import styled from 'styled-components' import { Row, @@ -16,7 +17,7 @@ import { } from 'pubsweet-component-faraday-ui' const AgreeCheckbox = ({ value, onChange }) => ( - <Row alignItems="center" justify="flex-start" mb={4} mt={3}> + <Row alignItems="center" justify="flex-start" mb={3} mt={3}> <Checkbox checked={value} onChange={onChange} value={value} /> <Text> I agree with the{' '} @@ -26,6 +27,9 @@ const AgreeCheckbox = ({ value, onChange }) => ( </Text> </Row> ) +const ValidationRow = styled(Row)` + justify-content: left; +` const Step0 = ({ type, @@ -98,11 +102,13 @@ const Step0 = ({ </Item> </Row> - <ValidatedField - component={AgreeCheckbox} - name="agreeTC" - validate={[requiredValidator]} - /> + <ValidationRow mb={2}> + <ValidatedField + component={AgreeCheckbox} + name="agreeTC" + validate={[requiredValidator]} + /> + </ValidationRow> <Row> <Text secondary small>