fix(ValidatedField): UI issues Checkbox for Agree with Terms and Conditions in Sign-up

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>