From 740f80117a5cd09ad892b04571329d4fead79530 Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Tue, 13 Sep 2016 19:46:44 +0200
Subject: [PATCH] Switch to own input classes

---
 src/fields/color.jsx  | 19 ++++++++++++-------
 src/fields/number.jsx | 21 +++++++++++++--------
 src/fields/string.jsx | 19 ++++++++++++-------
 src/sources/list.jsx  |  2 +-
 src/theme.js          | 10 ++++++++++
 5 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/fields/color.jsx b/src/fields/color.jsx
index 26ad8fba..27d2e1a5 100644
--- a/src/fields/color.jsx
+++ b/src/fields/color.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select, Input } from 'rebass'
+import { Label, Input } from 'rebass'
+import {inputBase} from '../theme'
 
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
@@ -16,12 +17,16 @@ static propTypes = {
 	}
 
 	render() {
-		return <Input
-			onChange={this.onChange.bind(this)}
-			label={this.props.name}
-			name={this.props.name}
-			value={this.props.value}
-		/>
+		return <div>
+			<Label htmlFor={this.props.name} children={this.props.name} />
+			<input
+				style={inputBase}
+				name={this.props.name}
+				placeholder={this.props.default}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			/>
+		</div>
 	}
 }
 
diff --git a/src/fields/number.jsx b/src/fields/number.jsx
index 996325c7..7a3ce7fe 100644
--- a/src/fields/number.jsx
+++ b/src/fields/number.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select, Input } from 'rebass'
+import { Label, Input } from 'rebass'
+import {inputBase} from '../theme'
 
 /*** Number fields with support for min, max and units and documentation*/
 class NumberField extends React.Component {
@@ -19,13 +20,17 @@ class NumberField extends React.Component {
 	}
 
 	render() {
-		return <Input
-			type="number"
-			onChange={this.onChange.bind(this)}
-			label={this.props.name}
-			name={this.props.name}
-			message={this.props.doc}
-		/>
+		return <div>
+			<Label htmlFor={this.props.name} children={this.props.name} />
+			<input
+				style={inputBase}
+				type="number"
+				name={this.props.name}
+				placeholder={this.props.default}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			/>
+		</div>
 	}
 }
 
diff --git a/src/fields/string.jsx b/src/fields/string.jsx
index 191e2b32..79e938e7 100644
--- a/src/fields/string.jsx
+++ b/src/fields/string.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Input } from 'rebass'
+import { Label, Input } from 'rebass'
+import {inputBase} from '../theme'
 
 /*** Number fields with support for min, max and units and documentation*/
 class StringField extends React.Component {
@@ -16,12 +17,16 @@ static propTypes = {
 	}
 
 	render() {
-		return <Input
-			onChange={this.onChange.bind(this)}
-			label={this.props.name}
-			name={this.props.name}
-			value={this.props.value}
-		/>
+		return <div>
+			<Label htmlFor={this.props.name} children={this.props.name} />
+			<input
+				style={inputBase}
+				name={this.props.name}
+				placeholder={this.props.default}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			/>
+		</div>
 	}
 }
 
diff --git a/src/sources/list.jsx b/src/sources/list.jsx
index 3cbee9df..33a5a56d 100644
--- a/src/sources/list.jsx
+++ b/src/sources/list.jsx
@@ -28,7 +28,7 @@ export class SourceList extends React.Component {
 		return <div>
 			<Toolbar style={{marginRight: 20}}>
 				<NavItem>
-					<Heading>Layers</Heading>
+					<Heading>Sources</Heading>
 				</NavItem>
 				<Space auto x={1} />
 			</Toolbar>
diff --git a/src/theme.js b/src/theme.js
index 1a6658b0..cc8f5fa3 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -37,6 +37,16 @@ export const colors = {
 	...themeColors
 }
 
+export const inputBase = {
+		display: 'block',
+		border: '1px solid rgb(36, 36, 36)',
+		height: 30,
+		width: '100%',
+		paddingLeft: 5,
+		paddingRight: 5,
+		backgroundColor: colors.gray,
+}
+
 const scale = [3, 5, 10, 30, 40]
 const fontSizes = [28, 24, 20, 16, 14, 12, 10]