image/text form

3 files changed, 36 insertions, 20 deletions

diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
index 36369b5..4f52a5e 100644
--- a/frontend/common/form.component.js
+++ b/frontend/common/form.component.js
@@ -3,13 +3,14 @@ import { courtesyS } from '../util'
 
 export const TextInput = props => (
   <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
+    {props.title && <span>{props.title}</span>}
     <input
       type="text"
       required={props.required}
       onChange={props.onChange}
       name={props.name}
       value={props.data[props.name]}
+      placeholder={props.placeholder}
       autoComplete={props.autoComplete}
     />
   </label>
@@ -40,7 +41,7 @@ export const NumberInput = props => (
 
 export const TextArea = props => (
   <label className={props.error ? 'textarea error' : 'textarea'}>
-    <span>{props.title}</span>
+    {props.title && <span>{props.title}</span>}
     <textarea
       onChange={props.onChange}
       name={props.name}
@@ -50,7 +51,7 @@ export const TextArea = props => (
 )
 
 export const Checkbox = props => (
-  <label>
+  <label className="checkbox">
     <input
       type="checkbox"
       name={props.name}
@@ -62,6 +63,21 @@ export const Checkbox = props => (
   </label>
 )
 
+export const Radio = props => {
+  return (
+    <label className="radio">
+      <input
+        type="radio"
+        name={props.name}
+        value={props.value}
+        checked={props.value === props.currentValue}
+        onChange={() => props.onChange(props.name, props.value)}
+      />
+      <span>{props.label}</span>
+    </label>
+  )
+}
+
 export class Select extends Component {
   state = {
     focused: false,
diff --git a/frontend/common/form.css b/frontend/common/form.css
index 8643065..54ac2d9 100644
--- a/frontend/common/form.css
+++ b/frontend/common/form.css
@@ -78,7 +78,7 @@ input[type=password] {
 input[type=text]:focus,
 input[type=number]:focus,
 input[type=password]:focus {
-  border: 1px solid #8ff;
+  border: 1px solid #84f;
   background: #000;
 }
 
@@ -94,7 +94,7 @@ textarea {
   border-radius: 0.125rem;
 }
 textarea:focus {
-  border: 1px solid #8ff;
+  border: 1px solid #84f;
   background: #000;
 }
 
@@ -118,13 +118,13 @@ input[type=checkbox]:hover + span {
   color: #000;
 }
 input[type=checkbox]:focus + span {
-  color: #11f;
+  color: #84f;
 }
 input[type="checkbox"]:checked + span {
   color: #000;
 }
 input[type="checkbox"]:focus:checked + span {
-  color: #11f;
+  color: #84f;
 }
 
 input[type="checkbox"]:after {
@@ -143,11 +143,11 @@ input[type="checkbox"]:after {
   border-radius: 0.125rem;
 }
 input[type=checkbox]:focus:after {
-  border-color: #11f;
+  border-color: #84f;
 }
 input[type="checkbox"]:checked:after {
-  border-color: #11f;
-  background-color: #11f;
+  border-color: #84f;
+  background-color: #84f;
   background-image: url(/static/img/check.svg);
   background-size: cover;
 }
@@ -158,7 +158,7 @@ input[type="checkbox"]:checked:after {
   position: relative;
   width: 9rem;
   min-width: auto;
-  background: #fff;
+  background: #111;
   border-radius: 0.125rem;
   border: 1px solid #ddd;
   padding: 0.5rem;
@@ -187,14 +187,14 @@ input[type="checkbox"]:checked:after {
   border-top: 0.375rem solid #ddd;
 }
 .select.focus {
-  border-color: #fff;
-  background: #f4f4ff;
+  border-color: #84f;
+  background: #000;
 }
 .select.focus:after {
-  border-top-color: #fff;
+  border-top-color: #84f;
 }
 .select:hover {
-  background-color: #f4f4ff;
+  background-color: #000;
 }
 .select div {
   width: calc(100% - 1.025rem);
@@ -244,7 +244,7 @@ button.process:after {
   border-left: 0.375rem solid #888;
 }
 button.process:focus:after {
-  border-left-color: #11f;
+  border-left-color: #84f;
 }
 button:focus {
   background: #000;
@@ -299,14 +299,14 @@ input[type=file] {
 
 .copyButton {
   border-color: transparent;
-  color: #11f;
+  color: #84f;
   font-size: 0.675rem;
   padding: 0.25rem;
   margin-left: 0.25rem;
 }
 .desktop .copyButton:hover {
-  border-color: #11f;
+  border-color: #84f;
 }
 .copyButton.copied {
-  color: #11f;
+  color: #84f;
 }
\ No newline at end of file
diff --git a/frontend/common/index.js b/frontend/common/index.js
index 9a11eba..d33442a 100644
--- a/frontend/common/index.js
+++ b/frontend/common/index.js
@@ -3,7 +3,7 @@ export {
   MenuButton, SmallMenuButton, MenuRoute,
 } from './menubutton.component'
 export {
-  Select, Checkbox, FileInput, FileInputField,
+  Select, Checkbox, Radio, FileInput, FileInputField,
   TextInput, NumberInput, TextArea, SubmitButton,
   LabelDescription,
 } from './form.component'