TextArea and admin style fixes

components/adminNav/adminNav.module.css

@@ -64,3 +64,13 @@ a.navItem :global(.rmwc-icon) {
 a.navItem.selected :global(.rmwc-icon) {
   color: white;
 }
+
+.notNav h2 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 20px;
+  font-weight: normal;
+}
+
+.notNav > :not(div) {
+  padding: 0 16px;
+}

components/form/form.js

@@ -10,6 +10,7 @@ export const IntegerInput = require('./integerInput.js').default
 export const DecimalInput = require('./decimalInput.js').default
 export const Button = require('./button.js').default
 export const Checkbox = require('./checkbox.js').default
+export const TextArea = require('./textArea.js').default
 
 const errorReducer = (errors, action) => {
   switch (action.type) {

components/form/styles.module.css

@@ -18,11 +18,11 @@
   margin-bottom: 8px;
 }
 
-.formElementContainer input {
+.formElementContainer input , .formElementContainer textarea{
   padding: 10px;
 }
 
-.formElementContainer input, .formElementContainer .complexInput {
+.formElementContainer input, .formElementContainer textarea, .formElementContainer .complexInput {
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
@@ -31,6 +31,12 @@
   transition-property: border-color,box-shadow;
   transition-duration: .2s;
   transition-timing-function: ease-in-out;
+  font: 400 14px Arial;
+}
+
+.formElementContainer textarea {
+  height: 120px;
+  resize: none;
 }
 
 :global(.dark) .formElementContainer input, :global(.dark) .formElementContainer .complexInput {
@@ -71,7 +77,7 @@
 .inputDecorators > span {
   white-space: pre;
   display: inline-block;
-  font: 400 13.3333px Arial;
+  font: 400 14px Arial;
 }
 
 .inputDecorators > span {

components/form/textArea.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import styles from './styles.module.css'
+
+export default function TextArea({label: _label, error, hint, height, name, value, onChange, onBlur, isValid}){
+  const label = _label  || name.replace(name[0], name[0].toUpperCase())
+
+  return (
+    <div className={styles.formElementContainer}>
+      <label htmlFor={name}>{label}:</label>
+      <textarea className={(isValid && !error)?'':styles.invalid} height={height} name={name} value={value} onChange={onChange} onBlur={onBlur} />
+      {(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
+    </div>
+  )
+}

pages/admin/items/[slug].js

@@ -1,6 +1,6 @@
 import React from 'react'
 import router from 'next/router'
-import {FormController, Input, DecimalInput, Button, Checkbox} from '~/components/form'
+import {FormController, Input, TextArea, DecimalInput, Button, Checkbox} from '~/components/form'
 
 EditItem.getInitialProps = async ({ctx: {axios, query: {slug}}}) => {
   const {data: item} = await axios.get(`/api/items/by-slug/${slug}`)
@@ -25,7 +25,7 @@ export default function EditItem({item}) {
       <h2>Editing {item.name}</h2>
       <FormController url={`/api/items/${item.uuid}`} afterSubmit={afterUpdate}>
         <Input name="name" initialValue={item.name} validate={stringLengthAtLeastOne} />
-        <Input name="description" initialValue={item.description} validate={stringLengthAtLeastOne} />
+        <TextArea name="description" initialValue={item.description} validate={stringLengthAtLeastOne} />
         <Input label="URL Slug" name="urlslug" initialValue={item.urlslug} validate={slugRestrictions} />
         <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} initialValue={item.price_cents / 100} transform={float => Math.floor(float * 100)} />
         <Checkbox label="Published" name="published" hint="Publish this item" initialValue={item.published} />

pages/admin/items/new.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import router from 'next/router'
-import {FormController, Input, DecimalInput, Button, Checkbox} from '~/components/form'
+import {FormController, Input, TextArea, DecimalInput, Button, Checkbox} from '~/components/form'
 
 export default function NewItem() {
   const stringLengthAtLeastOne = str => str.length > 0
@@ -20,7 +20,7 @@ export default function NewItem() {
       <h2>Create New Item</h2>
       <FormController url="/api/items" afterSubmit={afterCreate}>
         <Input name="name" validate={stringLengthAtLeastOne} />
-        <Input name="description" validate={stringLengthAtLeastOne} />
+        <TextArea name="description" validate={stringLengthAtLeastOne} />
         <Input label="URL Slug" name="urlslug" validate={slugRestrictions} />
         <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
         <Checkbox label="Published" name="published" hint="Publish this item" />

styles/layout.css

@@ -52,7 +52,6 @@ main > p {
 .cardContainer{
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 30px;
   padding-left: 50px;
   padding-right: 50px;