more uniform pages/page width/error messages

app/components/login/Login.jsx

 import React from 'react'
 import { Field } from 'formik'
 import { isEmpty } from 'lodash'
-import {
-  CenteredColumn,
-  ErrorText,
-  H1,
-  Link,
-  Button,
-  TextField,
-  Checkbox,
-} from '@pubsweet/ui'
+import { ErrorText, H1, Link, Button, TextField, Checkbox } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
 import styled from 'styled-components'
 import { Page, Notification } from '../ui'
@@ -32,17 +24,9 @@ const PasswordField = styled.div`
   max-width: 500px;
 `
 
-const Container = styled(CenteredColumn)`
+const Container = styled.form`
   margin: 0 0;
   max-width: 350px;
-  .login-error {
-    font-size: 18px;
-    margin: 10px 0 10px 0;
-    width: inherit;
-  }
-  .error {
-    width: inherit;
-  }
 `
 const EmailInput = props => <TextField label="Email address" {...props.field} />
 const PasswordInput = props => (
@@ -77,30 +61,26 @@ class Login extends React.Component {
     return (
       <Page>
         <H1>Sign in with your Europe PMC plus account</H1>
-        <Container medium>
-          {!isEmpty(errors) && (
-            <Notification type="error">{errors}</Notification>
-          )}
-          <form onSubmit={handleSubmit}>
-            <Field component={EmailInput} name="email" />
-            <PasswordField>
-              {!this.state.showPassword && (
-                <Field component={PasswordInput} name="password" />
-              )}
+        {!isEmpty(errors) && <Notification type="error">{errors}</Notification>}
+        <Container onSubmit={handleSubmit}>
+          <Field component={EmailInput} name="email" />
+          <PasswordField>
+            {!this.state.showPassword && (
+              <Field component={PasswordInput} name="password" />
+            )}
 
-              {this.state.showPassword && (
-                <Field component={PlainPasswordInput} name="password" />
-              )}
-              <ShowPassword
-                checked={this.state.showPassword}
-                label="Show password"
-                onChange={() => this.toggleShowPassword()}
-              />
-            </PasswordField>
-            <Button primary type="submit">
-              Login
-            </Button>
-          </form>
+            {this.state.showPassword && (
+              <Field component={PlainPasswordInput} name="password" />
+            )}
+            <ShowPassword
+              checked={this.state.showPassword}
+              label="Show password"
+              onChange={() => this.toggleShowPassword()}
+            />
+          </PasswordField>
+          <Button primary type="submit">
+            Login
+          </Button>
         </Container>
         {signup && (
           <Signup>

app/components/password-reset/PasswordReset.jsx

@@ -2,14 +2,8 @@ import React from 'react'
 import { Field } from 'formik'
 import { isEmpty } from 'lodash'
 import config from 'config'
-import {
-  CenteredColumn,
-  ErrorText,
-  H1,
-  Link,
-  Button,
-  TextField,
-} from '@pubsweet/ui'
+import { H1, Link, Button, TextField } from '@pubsweet/ui'
+import { Page, Notification } from '../ui/'
 
 const { appName } = config['pubsweet-client']['password-reset']
 
@@ -31,21 +25,21 @@ const ConfirmPasswordInput = props => (
 )
 
 const PasswordReset = ({ errors, handleSubmit, touched, status }) => (
-  <CenteredColumn medium>
-    <H1>Re-set your {appName} password</H1>
+  <Page>
+    <H1>Reset your {appName} password</H1>
     <p>Enter a new password for your {appName} account</p>
     {errors.password && touched.password && (
-      <ErrorText>{errors.password}</ErrorText>
+      <Notification type="error">{errors.password}</Notification>
     )}
     {!errors.password && errors.confirmPassword && touched.confirmPassword && (
-      <ErrorText>{errors.confirmPassword}</ErrorText>
+      <Notification type="error">{errors.confirmPassword}</Notification>
     )}
 
     {!isEmpty(errors) && typeof errors === 'string' && (
-      <ErrorText>{errors}</ErrorText>
+      <Notification type="error">{errors}</Notification>
     )}
 
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} style={{ maxWidth: '60ch' }}>
       <Field component={PasswordInput} name="password" />
       <Field component={ConfirmPasswordInput} name="confirmPassword" />
       <Button primary type="submit">
@@ -61,7 +55,7 @@ const PasswordReset = ({ errors, handleSubmit, touched, status }) => (
         </p>
       )}
     </form>
-  </CenteredColumn>
+  </Page>
 )
 
 // used by consumers

app/components/password-reset/PasswordResetEmail.jsx

@@ -3,16 +3,9 @@ import { Field } from 'formik'
 import { isEmpty } from 'lodash'
 import config from 'config'
 import styled from 'styled-components'
-import {
-  CenteredColumn,
-  ErrorText,
-  H1,
-  H2,
-  Button,
-  TextField,
-} from '@pubsweet/ui'
+import { H1, H2, Button, TextField } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
-import { Cover, A } from '../ui/'
+import { Page, Cover, A, Notification } from '../ui/'
 
 const { appName } = config['pubsweet-client']['password-reset']
 
@@ -44,15 +37,15 @@ const PasswordResetEmail = ({
   touched,
   status,
 }) => (
-  <CenteredColumn medium>
+  <Page>
     <H1>Reset your password</H1>
-
-    {errors.email && touched.email && <ErrorText>{errors.email}</ErrorText>}
+    {errors.email && touched.email && (
+      <Notification type="error">{errors.email}</Notification>
+    )}
     {!isEmpty(errors) && typeof errors === 'string' && (
-      <ErrorText>{errors}</ErrorText>
+      <Notification type="error">{errors}</Notification>
     )}
-
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} style={{ maxWidth: '60ch' }}>
       <Field component={EmailInput} name="email" />
       <Button primary type="submit">
         Send reset link
@@ -69,14 +62,13 @@ const PasswordResetEmail = ({
         </Screen>
       )}
     </form>
-
     <p>
       {`If you no longer have access to the email address for your account, contact the Europe PMC helpdesk at `}
       <A href="mailto:helpdesk@europepmc.org">helpdesk@europepmc.org</A>
       {` or `}
       <span style={{ whiteSpace: 'no-wrap' }}>+44 1223 494118.</span>
     </p>
-  </CenteredColumn>
+  </Page>
 )
 
 // used by consumers