even more design updates

client/coral-admin/src/components/AdminLogin.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
-import {Button, TextField, Alert} from 'coral-ui';
+import {Button, TextField, Alert, Success} from 'coral-ui';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
@@ -29,20 +29,22 @@ class AdminLogin extends React.Component {
       <form onSubmit={this.handleSignIn}>
         {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
         <TextField
-          label='email'
+          label='Email Address'
           value={this.state.email}
           onChange={e => this.setState({email: e.target.value})} />
         <TextField
-          label='password'
+          label='Password'
           value={this.state.password}
           onChange={e => this.setState({password: e.target.value})}
           type='password' />
+        <div style={{height: 10}}></div>
         <Button
           type='submit'
           cStyle='black'
-          onClick={this.handleSignIn} full>Sign In</Button>
-        <p>
-          Forgot your password? <a href="#" onClick={e => {
+          full
+          onClick={this.handleSignIn}>Sign In</Button>
+        <p className={styles.forgotPasswordCTA}>
+          Forgot your password? <a href="#" className={styles.forgotPasswordLink} onClick={e => {
             e.preventDefault();
             this.setState({requestPassword: true});
           }}>Request a new one.</a>
@@ -51,23 +53,29 @@ class AdminLogin extends React.Component {
     );
     const requestPasswordForm = (
       this.props.passwordRequestSuccess
-      ? <p className={styles.passwordRequestSuccess}>{this.props.passwordRequestSuccess}</p>
+      ? <p className={styles.passwordRequestSuccess} onClick={() => {
+        location.href = location.href;
+      }}>
+          {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
+          <Success />
+        </p>
       : <form onSubmit={this.handleRequestPassword}>
         <TextField
-          label='email'
+          label='Email Address'
           value={this.state.email}
           onChange={e => this.setState({email: e.target.value})} />
         <Button
           type='submit'
           cStyle='black'
+          full
           onClick={this.handleRequestPassword}>Reset Password</Button>
       </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>
-        <div className={styles.layout}>
-          <h1>Team Sign In</h1>
-          <p>Sign in to interact with your community.</p>
+        <div className={styles.loginLayout}>
+          <h1 className={styles.loginHeader}>Team sign in</h1>
+          <p className={styles.loginCTA}>Sign in to interact with your community.</p>
           { this.state.requestPassword ? requestPasswordForm : signInForm }
         </div>
       </Layout>

client/coral-admin/src/components/NotFound.css

@@ -1,15 +1,37 @@
 .layout {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.loginLayout {
   max-width: 400px;
   margin: 0 auto;
 }
 
+.loginHeader, .loginCTA, .forgotPasswordCTA, .passwordRequestSuccess {
+  text-align: center;
+  font-size: 16px;
+}
+
+.forgotPasswordLink, .signInLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.forgotPasswordLink:hover, .signInLink:hover {
+  text-decoration: underline;
+}
+
 .layout h1 {
   font-size: 40px;
 }
 
-.passwordRequestSuccess {
-  padding: 8px 14px;
-  background: lightgreen;
-  border: 1px solid darkgreen;
-  border-radius: 4px;
+.loginHeader {
+  font-size: 30px;
+}
+
+.passwordRequestSuccess {
+  cursor: pointer;
+  padding: 8px 14px;
 }