Clean up ValidatedField

src/atoms/ValidatedField.js

 import React from 'react'
 import classnames from 'classnames'
-import classes from './ValidatedField.local.scss'
 import { Field } from 'redux-form'
+import classes from './ValidatedField.local.scss'
 
 // TODO: pass ...props.input to children automatically?
 
@@ -9,7 +9,7 @@ const ValidatedField = ({ component, ...rest }) => (
   <Field
     {...rest}
     component={({ meta, input }) => (
-      <div>
+      <div className={classes.root}>
         {component(input)}
 
         <div className={classes.messages}>

src/atoms/ValidatedField.local.scss

-.root {
-  display: flex;
-  align-items: center;
-  font-size: inherit;
-}
-
-input {
-  font-size: inherit;
-  border: 0 none;
-  padding: 0;
-  border-bottom: 1px dashed #aaa;
-  font-family: "Vollkorn", serif;
-
-  &:hover,
-  &:focus {
-    outline-style: none;
-    box-shadow: none;
-    border-color: transparent;
-    border-bottom: 1px dashed var(--color-primary);
-  }
-}
-
 .messages {
   // color: white;
   margin-top: 10px;

src/atoms/ValidatedField.md

@@ -11,7 +11,7 @@ const ValidatedFieldForm = reduxForm({
 <ValidatedFieldForm 
     name="error" 
     validate={() => 'Required'}
-    component={input => <input {...input}/>}
+    component={input => <TextField {...input}/>}
     />
 ```
 
@@ -26,6 +26,6 @@ const ValidatedFieldForm = reduxForm({
 <ValidatedFieldForm 
     name="warning" 
     warn={() => 'Expected'}
-    component={input => <input {...input}/>}
+    component={input => <TextField {...input}/>}
     />
 ```