Introduce custom input elems for modals

src/components/inputs/InputBlock.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import input from '../../config/input'
+
+/** Wrap a component with a label */
+class InputBlock extends React.Component {
+  static propTypes = {
+    label: React.PropTypes.string.isRequired,
+    children: React.PropTypes.element.isRequired,
+  }
+
+  onChange(e) {
+    const value = e.target.value
+    return this.props.onChange(value === "" ? null: value)
+  }
+
+  render() {
+    return <div style={{
+      display: 'block'
+    }}>
+      <label style={input.label}>{this.props.label}</label>
+      {this.props.children}
+    </div>
+  }
+}
+
+export default InputBlock

src/components/inputs/SelectInput.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import input from '../../config/input.js'
+
+class SelectInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string.isRequired,
+    options: React.PropTypes.array.isRequired,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+
+  render() {
+    const options = this.props.options.map(([val, label])=> {
+      return <option key={val} value={val}>{label}</option>
+    })
+
+    return <select
+      style={{
+        ...input.select,
+        ...this.props.style
+      }}
+      value={this.props.value}
+      onChange={e => this.props.onChange(e.target.value)}
+    >
+      {options}
+    </select>
+  }
+}
+
+export default SelectInput

src/components/inputs/StringInput.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import input from '../../config/input.js'
+
+class StringInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string.isRequired,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <input
+      style={{
+        ...input.input,
+        ...this.props.style
+      }}
+      value={this.props.value}
+      onChange={e => this.props.onChange(e.target.value)}
+    />
+  }
+}
+
+export default StringInput

src/components/modals/Modal.jsx

@@ -16,6 +16,7 @@ class Modal extends React.Component {
   render() {
     return <Overlay isOpen={this.props.isOpen}>
       <div style={{
+        minWidth: 350,
         backgroundColor: colors.gray,
       }}>
         <div style={{

src/components/modals/SettingsModal.jsx

@@ -1,16 +1,10 @@
 import React from 'react'
 
-import Select from 'rebass/dist/Select'
-import Overlay from 'rebass/dist/Overlay'
-import Panel from 'rebass/dist/Panel'
-import PanelHeader from 'rebass/dist/PanelHeader'
-import PanelFooter from 'rebass/dist/PanelFooter'
-import Button from 'rebass/dist/Button'
-import Text from 'rebass/dist/Text'
-import Media from 'rebass/dist/Media'
-import Close from 'rebass/dist/Close'
-import Space from 'rebass/dist/Space'
-import Input from 'rebass/dist/Input'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+import SelectInput from '../inputs/SelectInput'
+import Modal from './Modal'
+import colors from '../../config/colors'
 
 class SettingsModal extends React.Component {
   static propTypes = {
@@ -35,60 +29,54 @@ class SettingsModal extends React.Component {
   }
 
   render() {
-    return <Overlay open={this.props.open} >
-      <Panel theme={'secondary'}>
-        <PanelHeader theme={'default'}>
-          Style Settings
-          <Space auto />
-          <Close onClick={this.props.toggle('modalOpen')} />
-        </PanelHeader>
-        <br />
-        <Input
-          name="name"
-          label="Name"
+    const inputProps = {
+      style: {
+        backgroundColor: colors.gray
+      }
+    }
+    return <Modal
+      isOpen={this.props.open}
+      toggleOpen={this.props.toggle}
+      title={'StyleSettings'}
+    >
+      <InputBlock label={"Name"}>
+        <StringInput {...inputProps}
           value={this.props.mapStyle.name}
           onChange={this.onChange.bind(this, "name")}
         />
-        <Input
-          name="owner"
-          label="Owner"
+      </InputBlock>
+      <InputBlock label={"Owner"}>
+        <StringInput {...inputProps}
           value={this.props.mapStyle.owner}
           onChange={this.onChange.bind(this, "owner")}
         />
-        <Input
-          name="sprite"
-          label="Sprite URL"
+      </InputBlock>
+      <InputBlock label={"Sprite URL"}>
+        <StringInput {...inputProps}
           value={this.props.mapStyle.sprite}
           onChange={this.onChange.bind(this, "sprite")}
         />
-        <Input
-          name="glyphs"
-          label="Glyphs URL"
-          value={this.props.mapStyle.glyphs}
-          onChange={this.onChange.bind(this, "glyphs")}
-        />
-        <Input
-          name="glyphs"
-          label="Glyphs URL"
-          value={this.props.mapStyle.glyphs}
-          onChange={this.onChange.bind(this, "glyphs")}
-        />
-        <Select
-          label="Style Renderer"
-          name="renderer"
-          onChange={this.onRendererChange.bind(this)}
-          options={[{children: 'Mapbox GL JS', value: 'mbgljs'}, {children: 'Open Layers 3', value: 'ol3'}]}
-        />
+      </InputBlock>
 
-        <PanelFooter>
-          <Space auto />
-          <Button theme={'default'}
-            onClick={this.props.toggle('modalOpen')}
-            children='Close!'
-          />
-        </PanelFooter>
-      </Panel>
-    </Overlay>
+      <InputBlock label={"Glyphs URL"}>
+        <StringInput {...inputProps}
+          value={this.props.mapStyle.glyphs}
+          onChange={this.onChange.bind(this, "glyphs")}
+        />
+      </InputBlock>
+
+
+      <InputBlock label={"Style Renderer"}>
+        <SelectInput {...inputProps}
+          options={[
+            ['mbgljs', 'MapboxGL JS'],
+            ['ol3', 'Open Layers 3']
+          ]}
+          value={(this.props.mapStyle.metadata || {})['maputnik:renderer']}
+          onChange={this.onRendererChange.bind(this)}
+        />
+      </InputBlock>
+    </Modal>
   }
 }
 

src/components/modals/TilesetsModal.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
 
-import Space from 'rebass/dist/Space'
-import Toolbar from 'rebass/dist/Toolbar'
-import NavItem from 'rebass/dist/NavItem'
-
 import Modal from './Modal'
 
 import publicTilesets from '../../config/tilesets.json'
@@ -18,7 +14,7 @@ class TilesetsModal extends React.Component {
   }
 
   constructor(props) {
-    super(props);
+    super(props)
   }
 
   render() {
@@ -32,22 +28,18 @@ class TilesetsModal extends React.Component {
         borderStyle: "solid",
         borderColor: theme.borderColor,
       }}>
-        <Toolbar>
-          <NavItem style={{fontWeight: 400}}>
-            #{tileset.id}
-          </NavItem>
-          <Space auto x={1} />
-        </Toolbar>
+        #{tileset.id}
+        <br />
         {tileset.url}
       </div>
     })
 
     return <Modal
-      //isOpen={this.props.open}
-      isOpen={true}
+      isOpen={this.props.open}
       toggleOpen={this.props.toggle}
       title={'Tilesets'}
     >
+      <h2>Add New Tileset</h2>
       <h2>Choose Public Tileset</h2>
       {tilesetOptions}
     </Modal>