fixes misc eslint errors

src/client/components/controls/Button/Button.scss

@@ -7,6 +7,8 @@
     padding: rem(.5) rem(.75);
     line-height: rem(.5);
     border-radius: $radius-sm;
+    margin-top: rem(1);
+    margin-bottom: rem(1);
     cursor: pointer;
 
     &.btn-icon {

src/client/components/field-types/Input/index.js

@@ -9,7 +9,8 @@ class Input extends Component {
 
     this.errors = {
       text: 'Please fill in the field',
-      email: 'Please enter a valid email'
+      email: 'Please enter a valid email',
+      password: 'Please enter a password'
     };
 
     this.state = {
@@ -64,15 +65,18 @@ class Input extends Component {
   }
 
   render() {
+
     const valid = this.props.context.fields[this.props.name]
       ? this.props.context.fields[this.props.name].valid
       : true;
 
+    const showError = valid === false && this.props.context.submitted;
+
     const Required = this.props.required
       ? () => <span className="required">*</span>
       : () => null;
 
-    const Error = valid === false && this.props.context.submitted
+    const Error = showError
       ? () => <Tooltip className="error-message">{this.errors[this.props.type]}</Tooltip>
       : () => null;
 
@@ -81,9 +85,7 @@ class Input extends Component {
       : () => null;
 
     let className = `interact ${this.props.type}`;
-    className = this.props.valid !== false
-      ? className
-      : `${className} error`;
+    className = !showError ? className : `${className} error`;
 
     const initialValue = this.props.value ? this.props.value : '';
 
@@ -112,10 +114,12 @@ class Input extends Component {
   }
 }
 
-export default props => {
+const ContextInput = props => {
   return (
     <FormContext.Consumer>
       {context => <Input {...props} context={context} />}
     </FormContext.Consumer>
   );
 };
+
+export default ContextInput;

src/client/components/field-types/Input/index.scss

@@ -33,7 +33,7 @@
 
 	&.error {
 		input {
-			border: 2px solid $pink;
+      background-color: lighten($pink, 15%);
 		}
 	}
 

src/client/components/layout/ContentBlock/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import './index.css';
 
-export default (props) => {
+const ContentBlock = (props) => {
   let classes = props.className
     ? `content-block ${props.className}`
     : 'content-block';
@@ -12,8 +12,10 @@ export default (props) => {
     : classes;
 
   return (
-    <section className={classes}>
+    <section className={classes} style={props.style}>
       {props.children}
     </section>
   );
 };
+
+export default ContentBlock;

src/client/components/modules/HeadingButton/index.scss

@@ -4,6 +4,11 @@
   display: flex;
   align-items: center;
 
+  .btn {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   h1 {
     margin: 0 rem(.5) 0 0;
   }

src/client/components/views/Login/index.js

@@ -1,25 +1,35 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { ContentBlock, Form, Input, Button } from 'payload/components';
+import { ContentBlock, Form, Input, FormSubmit } from 'payload/components';
 
 import Logo from 'local/client/components/graphics/Logo';
 
 import './index.css';
 
-export default () => {
+const mapStateToProps = state => ({
+  windowHeight: state.common.windowHeight
+})
+
+const Login = props => {
+
+  const minHeight = props.windowHeight;
+
   return (
-    <ContentBlock className="login" width="narrow">
-      <Logo />
-      <Form
-        method="POST"
-        action="http://localhost:8080">
-        <Input type="email" label="Email Address" name="email" required />
-        <Input type="password" label="Password" name="password" required />
-        <Button type="submit">
-          Log In
-        </Button>
-      </Form>
-      <Link to="/">To Dashboard</Link>
+    <ContentBlock className="login" width="narrow" style={{ minHeight }}>
+      <div className="wrap">
+        <Logo />
+        <Form
+          method="POST"
+          action="http://localhost:3000/auth/login">
+          <Input type="email" label="Email Address" name="email" required />
+          <Input type="password" label="Password" name="password" required />
+          <FormSubmit>Login</FormSubmit>
+        </Form>
+        <Link to="/">To Dashboard</Link>
+      </div>
     </ContentBlock>
   );
 };
+
+export default connect(mapStateToProps)(Login);

src/client/components/views/Login/index.scss

@@ -1,7 +1,17 @@
+@import '_styles';
+
 .login {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
   .logo-wrap {
     display: block;
-    margin: 0 auto;
+    margin: 0 auto rem(1);
     max-width: 200px;
+
+    svg {
+      width: 100%;
+    }
   }
 }

src/client/components/views/collections/Add/index.js

@@ -3,7 +3,7 @@ import { SetStepNav } from 'payload/components';
 
 import './index.css';
 
-export default props => {
+const Add = props => {
   return (
     <article className={`collection-add collection-${props.slug}`}>
       <SetStepNav nav={ [
@@ -19,3 +19,5 @@ export default props => {
     </article>
   );
 };
+
+export default Add;

src/client/components/views/collections/Edit/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SetStepNav } from 'payload/components';
 
-export default props => {
+const Edit = props => {
   return (
     <article className="collection-edit">
       <SetStepNav nav={ [
@@ -18,3 +18,5 @@ export default props => {
     </article>
   );
 };
+
+export default Edit;