styles default template max width and adds regular fonts

src/client/components/forms/Input/index.js

@@ -47,7 +47,7 @@ class Input extends Component {
       ? () => <span className="required">*</span>
       : () => null;
 
-    const Error = !this.props.valid
+    const Error = this.props.valid === false
       ? () => <Tooltip className="error-message">{this.errors[this.props.type]}</Tooltip>
       : () => null;
 
@@ -56,7 +56,7 @@ class Input extends Component {
       : () => null;
 
     let className = `interact ${this.props.type}`;
-    className = this.props.valid
+    className = this.props.valid !== false
       ? className
       : `${className} error`;
 

src/client/components/forms/Textarea/index.js

@@ -28,12 +28,12 @@ class Textarea extends Component {
       ? () => <span className="required">*</span>
       : () => null;
 
-    let Error = !this.props.valid
+    let Error = this.props.valid === false
       ? () => <Tooltip className="error-message">{this.errors.text}</Tooltip>
       : () => null;
 
     let className = 'interact textarea';
-    className = this.props.valid ? className : `${className} error`;
+    className = this.props.valid !== false ? className : `${className} error`;
 
     let style = this.props.style
       ? this.props.style

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

@@ -1,15 +1,17 @@
 import React from 'react';
 import Sidebar from '../Sidebar';
-import StepNav from '../StepNav';
+import StepNav from '../../modules/StepNav';
 
 import './index.css';
 
 export default props => {
   return (
     <div className="default-template">
-      <Sidebar />
-      <StepNav />
-      {props.children}
+      <div className="wrap">
+        <Sidebar />
+        <StepNav />
+        {props.children}
+      </div>
     </div>
   );
 };

src/client/components/layout/DefaultTemplate/index.scss

@@ -1,8 +1,13 @@
 @import '_styles';
 
 .default-template {
+  padding: rem(1) rem(1) rem(1) 0;
   margin-left: rem(6);
-  padding: rem(1);
+
+  .wrap {
+    max-width: $tablet-width;
+    margin: 0 auto;
+  }
 
   .emblem {
     width: $base;

src/client/components/modules/Filter/index.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import Input from 'payload/client/components/forms/Input';
+
+class Filter extends Component {
+  render() {
+    return (
+      <Input data-fillable placeholder="Search" type="text" id="keywords" />
+    );
+  }
+}
+
+export default Filter;

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import SetStepNav from 'payload/client/components/utilities/SetStepNav';
 
+import './index.css';
+
 export default props => {
   return (
     <article className="collection-archive">

src/client/components/views/collections/Archive/index.scss

@@ -0,0 +1,7 @@
+@import '_styles';
+
+.collection-archive {
+  .heading-button {
+    @include m;
+  }
+}

src/client/scss/_form.scss

@@ -18,20 +18,24 @@
     -webkit-appearance: none;
 
     &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-      color: $black;
+      color: $gray;
+      font-weight: normal;
     }
     &::-moz-placeholder { /* Firefox 19+ */
-      color: $black;
+      color: $gray;
+      font-weight: normal;
     }
     &:-ms-input-placeholder { /* IE 10+ */
-      color: $black;
+      color: $gray;
+      font-weight: normal;
     }
     &:-moz-placeholder { /* Firefox 18- */
-      color: $black;
+      color: $gray;
+      font-weight: normal;
     }
 
     &:hover {
-        
+
     }
 
     &:focus,
@@ -42,4 +46,4 @@
     @include small-break {
         margin-bottom: rem(.5);
     }
-}
+}