style(forms): fix UI on edit/add user

packages/components-faraday/src/components/Admin/EditUserForm.js

@@ -108,6 +108,9 @@ const Row = styled.div`
   display: flex;
   flex-direction: row;
   margin: calc(${th('subGridUnit')}*3) 0;
+  div[role='alert'] {
+    margin-top: 0;
+  }
 `
 
 const RowItem = styled.div`

packages/components-faraday/src/components/SignUp/SignUpStep0.js

@@ -12,7 +12,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
   !isUndefined(initialValues) ? (
     <FormContainer onSubmit={handleSubmit}>
       <Row>
-        <RowItem vertical>
+        <RowItem vertical withMargin>
           <Label>First name*</Label>
           <ValidatedField
             component={TextField}
@@ -20,7 +20,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
             validate={[required]}
           />
         </RowItem>
-        <RowItem vertical>
+        <RowItem vertical withMargin>
           <Label>Last name*</Label>
           <ValidatedField
             component={TextField}
@@ -30,7 +30,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
         </RowItem>
       </Row>
       <Row>
-        <RowItem vertical>
+        <RowItem vertical withMargin>
           <Label>Affiliation*</Label>
           <ValidatedField
             component={TextField}
@@ -39,7 +39,7 @@ const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
           />
         </RowItem>
 
-        <RowItem vertical>
+        <RowItem vertical withMargin>
           <Label>Title*</Label>
           <ValidatedField
             component={input => <Menu {...input} options={journal.title} />}

packages/components-faraday/src/components/UIComponents/FormItems.js

@@ -67,6 +67,8 @@ export const RowItem = styled.div`
   & > div {
     flex: 1;
   }
+  margin-right: ${({ withMargin }) =>
+    withMargin ? css`calc(${th('subGridUnit')} * 3)` : 0};
 `
 
 export const Label = styled.div`