Nicer text input

src/index.scss

@@ -0,0 +1,3 @@
+.app {
+
+}

src/layers.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 
-import { Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
+import { Block, ButtonCircle, Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
 import { Button, Text } from 'rebass'
+import {MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, MdVisibilityOff} from 'react-icons/lib/md';
 import Collapse from 'react-collapse'
 import theme from './theme.js'
 import scrollbars from './scrollbars.scss'
@@ -9,9 +10,15 @@ import scrollbars from './scrollbars.scss'
 export class FillLayer extends React.Component {
 	render() {
 		return <div>
-			<Checkbox name="fill-antialias" label="Antialias" checked={this.props.paint["fill-antialias"]} />
-			<Input name="fill-opacity" label="Opacity" defaultValue={this.props.paint["fill-opacity"]} />
+			<Input name="fill-color" label="Fill color" onChange={this.props.changePaint} value={this.props.paint["fill-color"]} />
+			<Input name="fill-outline-color" label="Fill outline color" onChange={this.props.changePaint} value={this.props.paint["fill-outline-color"]} />
+			<Input name="fill-translate" label="Fill translate" onChange={this.props.changePaint} value={this.props.paint["fill-translate"]} />
+			<Input name="fill-translate-anchor" label="Fill translate anchor" onChange={this.props.changePaint} value={this.props.paint["fill-translate-anchor"]} />
+			<Checkbox name="fill-antialias" label="Antialias" onChange={this.props.changePaint} checked={this.props.paint["fill-antialias"]} />
+			<Input name="fill-opacity" label="Opacity" onChange={this.props.changePaint} value={this.props.paint["fill-opacity"]} />
 		</div>
+
+
 	}
 }
 
@@ -28,6 +35,10 @@ export class SymbolLayer extends React.Component {
 }
 
 export class LayerPanel extends React.Component {
+  static childContextTypes = {
+		reactIconBase: React.PropTypes.object
+  }
+
 	constructor(props) {
 		super(props);
 		this.toggleLayer = this.toggleLayer.bind(this);
@@ -36,6 +47,15 @@ export class LayerPanel extends React.Component {
 		}
 	}
 
+  getChildContext () {
+    return {
+			reactIconBase: {
+        size: theme.fontSizes[4],
+				color: theme.colors.lowgray,
+      }
+		}
+	}
+
 	toggleLayer() {
 		this.setState({isOpened: !this.state.isOpened})
 	}
@@ -48,14 +68,33 @@ export class LayerPanel extends React.Component {
 			layer = <SymbolLayer />
 		}
 
-		return <Panel>
-			<PanelHeader onClick={this.toggleLayer} theme="default">
-				#{this.props.layer.id}
-			</PanelHeader>
+		return <div style={{
+				padding: theme.scale[0],
+				borderBottom: 1,
+				borderTop: 1,
+				borderLeft: 0,
+				borderRight: 0,
+				borderStyle: "solid",
+				borderColor: theme.borderColor,
+			}}>
+			<Toolbar onClick={this.toggleLayer}>
+				<NavItem>
+					#{this.props.layer.id}
+				</NavItem>
+				<Space auto x={1} />
+				<NavItem>
+					<MdVisibilityOff />
+				</NavItem>
+				<NavItem>
+					<MdDelete />
+				</NavItem>
+			</Toolbar>
 			<Collapse isOpened={this.state.isOpened}>
+				<div style={{padding: theme.scale[2], paddingRight: 0}}>
 				{layer}
+				</div>
 			</Collapse>
-		</Panel>
+		</div>
 	}
 }
 
@@ -65,7 +104,17 @@ export class LayerEditor extends React.Component {
 			return <LayerPanel key={layer.id} layer={layer} />
 		});
 		return <div>
-			<Heading level={2}>Layers</Heading>
+			<Toolbar style={{marginRight: 20}}>
+				<NavItem>
+					Layers
+				</NavItem>
+				<Space auto x={1} />
+				<Button>
+					<MdAddToPhotos />
+					Add Layer
+				</Button>
+			</Toolbar>
+
 			<div className={scrollbars.darkScrollbar} style={{
 				overflowY: "scroll",
 				bottom:0,

src/map.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import ReactMapboxGl from "react-mapbox-gl"
+import ReactMapboxGl, { ZoomControl } from "react-mapbox-gl"
+
 import theme from './theme.js'
 
 export class Map extends React.Component {
@@ -10,8 +11,10 @@ export class Map extends React.Component {
 	render() {
 		if (this.props.mapStyle) {
 			return <ReactMapboxGl
-				style={this.props.mapStyle}
-				accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"/>
+					style={this.props.mapStyle}
+					accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w">
+					<ZoomControl/>
+			</ReactMapboxGl>
 		}
 		return <div style={{backgroundColor: theme.colors.black}}/>
 	}

src/theme.js

@@ -7,6 +7,7 @@ const baseColors = {
 	black: '#242424',
 	gray: '#313131',
 	midgray: '#778',
+	lowgray: '#dcdcdc',
 	white: '#fff',
 	blue: '#00d9f7',
 	green: '#0f8',
@@ -29,7 +30,7 @@ const colors = {
 	...themeColors
 }
 
-const scale = [3, 5, 10, 20, 40]
+const scale = [3, 5, 10, 30, 40]
 const fontSizes = [28, 24, 20, 16, 14, 12, 10]
 
 const border = {
@@ -47,7 +48,7 @@ const dark = {
   inverted: colors.midGray,
 	...border,
 
-	Panel: {
+	Block: {
     backgroundColor: colors.gray,
 		...border,
 		borderLeft: 0,
@@ -76,6 +77,15 @@ const dark = {
 	Header: {
 		fontWeight: 400,
 	},
+	ButtonCircle : {
+	},
+	Toolbar: {
+		fontWeight: 400,
+		minHeight: scale[3]
+	},
+	Input: {
+		fontSize: fontSizes[5],
+	},
 }
 
 export default dark