Switch to own input classes

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
+		return <div>
-			onChange={this.onChange.bind(this)}
+			<Label htmlFor={this.props.name} children={this.props.name} />
-			label={this.props.name}
+			<input
-			name={this.props.name}
+				style={inputBase}
-			value={this.props.value}
+				name={this.props.name}
-		/>
+				placeholder={this.props.default}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			/>
+		</div>
 	}
 }
 

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
+		return <div>
-			type="number"
+			<Label htmlFor={this.props.name} children={this.props.name} />
-			onChange={this.onChange.bind(this)}
+			<input
-			label={this.props.name}
+				style={inputBase}
-			name={this.props.name}
+				type="number"
-			message={this.props.doc}
+				name={this.props.name}
-		/>
+				placeholder={this.props.default}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			/>
+		</div>
 	}
 }
 

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
+		return <div>
-			onChange={this.onChange.bind(this)}
+			<Label htmlFor={this.props.name} children={this.props.name} />
-			label={this.props.name}
+			<input
-			name={this.props.name}
+				style={inputBase}
-			value={this.props.value}
+				name={this.props.name}
-		/>
+				placeholder={this.props.default}
+				value={this.props.value}
+				onChange={this.onChange.bind(this)}
+			/>
+		</div>
 	}
 }
 

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>

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]