Style open modal

src/components/Button.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 import colors from '../config/colors'
 import { margins, fontSizes } from '../config/scales'
 
@@ -6,12 +7,13 @@ class Button extends React.Component {
   static propTypes = {
     onClick: React.PropTypes.func,
     style: React.PropTypes.object,
+    className: React.PropTypes.string,
   }
 
   render() {
     return <a
       onClick={this.props.onClick}
-      className="maputnik-button"
+      className={classnames("maputnik-button", this.props.className)}
       style={this.props.style}>
       {this.props.children}
     </a>

src/components/Toolbar.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import FileReaderInput from 'react-file-reader-input'
+import classnames from 'classnames'
 
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import MdFileUpload from 'react-icons/lib/md/file-upload'
@@ -23,39 +24,28 @@ import SourcesModal from './modals/SourcesModal'
 import OpenModal from './modals/OpenModal'
 
 import style from '../libs/style'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
 
-const IconText = props => <span style={{ paddingLeft: margins[0] }}>
-  {props.children}
-</span>
+function IconText(props) {
+  return <span className="maputnik-icon-text">{props.children}</span>
+}
 
-const ToolbarLink = props => <a
-  className='maputnik-toolbar-link'
-  href={props.href}
-  target={"blank"}
-  style={{
-    ...props.style,
-  }}
+function ToolbarLink(props) {
+  return <a
+    className={classnames('maputnik-toolbar-link', props.className)}
+    href={props.href}
+    target={"blank"}
   >
-  {props.children}
-</a>
+    {props.children}
+  </a>
+}
 
-class ToolbarAction extends React.Component {
-  static propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <a
-      className='maputnik-toolbar-action'
-      onClick={this.props.onClick}
-      style={{
-        ...this.props.style,
-      }}>
-      {this.props.children}
-    </a>
-  }
+function ToolbarAction(props) {
+  return <a
+    className='maputnik-toolbar-action'
+    onClick={props.onClick}
+  >
+    {props.children}
+  </a>
 }
 
 export default class Toolbar extends React.Component {
@@ -127,15 +117,10 @@ export default class Toolbar extends React.Component {
       />
       <ToolbarLink
         href={"https://github.com/maputnik/editor"}
-        style={{
-          width: 180,
-          textAlign: 'left',
-          backgroundColor: colors.black,
-          padding: 5,
-        }}
+        className="maputnik-toolbar-logo"
       >
-        <img src={logoImage} alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
-        <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
+        <img src={logoImage} alt="Maputnik" />
+        <h1>Maputnik</h1>
       </ToolbarLink>
       <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
         <OpenIcon />

src/components/inputs/InputBlock.jsx

@@ -30,7 +30,6 @@ class InputBlock extends React.Component {
 
   render() {
     return <div style={{
-      ...input.property,
       ...this.props.style,
     }}
       className="maputnik-input-block"

src/components/inputs/NumberInput.jsx

@@ -69,9 +69,7 @@ class NumberInput extends React.Component {
   render() {
     return <input
       className="maputnik-number"
-      style={{
-        ...this.props.style
-      }}
+      style={this.props.style}
       placeholder={this.props.default}
       value={this.state.value}
       onChange={e => this.changeValue(e.target.value)}

src/components/inputs/StringInput.jsx

@@ -23,10 +23,7 @@ class StringInput extends React.Component {
   render() {
     return <input
       className="maputnik-string"
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
+      style={this.props.style}
       value={this.state.value}
       placeholder={this.props.default}
       onChange={e => this.setState({ value: e.target.value })}

src/components/layers/LayerListItem.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Color from 'color'
+import classnames from 'classnames'
 
 import CopyIcon from 'react-icons/lib/md/content-copy'
 import VisibilityIcon from 'react-icons/lib/md/visibility'
@@ -34,32 +35,15 @@ class LayerTypeDragHandle extends React.Component {
 class IconAction extends React.Component {
   static propTypes = {
     action: React.PropTypes.string.isRequired,
-    active: React.PropTypes.bool,
     onClick: React.PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
-  }
-
   renderIcon() {
-    const iconStyle = {
-      fill: colors.black
-    }
-
-    if(this.props.active) {
-      iconStyle.fill = colors.midgray
-    }
-    if(this.state.hover) {
-      iconStyle.fill = colors.lowgray
-    }
-
     switch(this.props.action) {
-      case 'copy': return <CopyIcon style={iconStyle} />
-      case 'show': return <VisibilityIcon style={iconStyle} />
-      case 'hide': return <VisibilityOffIcon style={iconStyle} />
-      case 'delete': return <DeleteIcon style={iconStyle} />
+      case 'copy': return <CopyIcon />
+      case 'show': return <VisibilityIcon />
+      case 'hide': return <VisibilityOffIcon />
+      case 'delete': return <DeleteIcon />
       default: return null
     }
   }
@@ -67,10 +51,7 @@ class IconAction extends React.Component {
   render() {
     return <a
       className="maputnik-icon-action"
-      style={this.props.style}
       onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
     >
       {this.renderIcon()}
     </a>
@@ -105,9 +86,6 @@ class LayerListItem extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = {
-      hover: false
-    }
   }
 
   getChildContext() {
@@ -117,42 +95,25 @@ class LayerListItem extends React.Component {
   }
 
   render() {
-    const itemStyle = {
-      backgroundColor: colors.black,
-    }
-
-    if(this.state.hover) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
-    }
-
-    if(this.props.isSelected) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.15).string()
-    }
-
-    const iconProps = {
-      active: this.state.hover || this.props.isSelected
-    }
-
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-      className="maputnik-layer-list-item"
-      >
+      className={classnames({
+        "maputnik-layer-list-item": true,
+        "maputnik-layer-list-item-selected": this.props.isSelected,
+      })}>
         <LayerTypeDragHandle type={this.props.layerType} />
         <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
         <span style={{flexGrow: 1}} />
-        <IconAction {...iconProps}
+        <IconAction
           action={'delete'}
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
-        <IconAction {...iconProps}
+        <IconAction
           action={'copy'}
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
-        <IconAction {...iconProps}
-          active={this.state.hover || this.props.isSelected || this.props.visibility === 'none'}
+        <IconAction
           action={this.props.visibility === 'visible' ? 'hide' : 'show'}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />

src/components/modals/AddModal.jsx

@@ -100,7 +100,7 @@ class AddModal extends React.Component {
         onChange={v => this.setState({ 'source-layer': v })}
       />
       }
-      <Button onClick={this.addLayer.bind(this)}>
+      <Button className="maputnik-add-layer-button" onClick={this.addLayer.bind(this)}>
         Add Layer
       </Button>
     </Modal>

src/components/modals/Modal.jsx

@@ -1,10 +1,6 @@
 import React from 'react'
-
 import CloseIcon from 'react-icons/lib/md/close'
-
 import Overlay from './Overlay'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 
 class Modal extends React.Component {
   static propTypes = {
@@ -16,15 +12,15 @@ class Modal extends React.Component {
   render() {
     return <Overlay isOpen={this.props.isOpen}>
       <div className="maputnik-modal">
-        <div className="maputnik-modal-header">
-          <span className="maputnik-modal-header-title">{this.props.title}</span>
-          <span style={{flexGrow: 1}} />
+        <header className="maputnik-modal-header">
+          <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+          <span className="maputnik-modal-header-space"></span>
           <a className="maputnik-modal-header-toggle"
             onClick={() => this.props.onOpenToggle(false)}
-            style={{ cursor: 'pointer' }} >
+          >
             <CloseIcon />
           </a>
-        </div>
+        </header>
         <div className="maputnik-modal-content">{this.props.children}</div>
       </div>
     </Overlay>

src/components/modals/OpenModal.jsx

@@ -10,8 +10,6 @@ import FileUploadIcon from 'react-icons/lib/md/file-upload'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 
 import style from '../../libs/style.js'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
 import publicStyles from '../../config/styles.json'
 
 class PublicStyle extends React.Component {
@@ -23,38 +21,18 @@ class PublicStyle extends React.Component {
   }
 
   render() {
-    return <div style={{
-        verticalAlign: 'top',
-        marginTop: margins[2],
-        marginRight: margins[2],
-        backgroundColor: colors.gray,
-        display: 'inline-block',
-        width: 180,
-        fontSize: fontSizes[4],
-        color: colors.lowgray,
-    }}>
+    return <div className="maputnik-public-style">
       <Button
+        className="maputnik-public-style-button"
         onClick={() => this.props.onSelect(this.props.url)}
-        style={{
-          backgroundColor: 'transparent',
-          padding: margins[2],
-          display: 'block',
-        }}
       >
-        <div style={{
-          display: 'flex',
-          flexDirection: 'row',
-        }}>
-          <span style={{fontWeight: 700}}>{this.props.title}</span>
-          <span style={{flexGrow: 1}} />
+        <header className="maputnik-public-style-header">
+          <h4>{this.props.title}</h4>
+          <span className="maputnik-space" />
           <AddIcon />
-        </div>
+        </header>
         <img
-          style={{
-            display: 'block',
-            marginTop: margins[1],
-            maxWidth: '100%',
-          }}
+          className="maputnik-public-style-thumbnail"
           src={this.props.thumbnailUrl}
           alt={this.props.title}
         />
@@ -113,22 +91,20 @@ class OpenModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Open Style'}
     >
-      <Heading level={4}>Upload Style</Heading>
-      <Paragraph>
-        Upload a JSON style from your computer.
-      </Paragraph>
-      <FileReaderInput onChange={this.onUpload.bind(this)}>
-        <Button>
-          <FileUploadIcon />
-          Upload
-        </Button>
-      </FileReaderInput>
-
-      <Heading level={4}>Gallery Styles</Heading>
-      <Paragraph>
-        Open one of the publicly available styles to start from.
-      </Paragraph>
-      {styleOptions}
+      <section className="maputnik-modal-section">
+        <h2>Upload Style</h2>
+        <p>Upload a JSON style from your computer.</p>
+        <FileReaderInput onChange={this.onUpload.bind(this)}>
+          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+        </FileReaderInput>
+      </section>
+      <section className="maputnik-modal-section">
+        <h2>Gallery Styles</h2>
+        <p>
+          Open one of the publicly available styles to start from.
+        </p>
+        {styleOptions}
+      </section>
     </Modal>
   }
 }

src/components/modals/Overlay.jsx

@@ -1,26 +1,5 @@
 import React from 'react'
 
-class ViewportOverlay extends React.Component {
-  static propTypes = {
-    style: React.PropTypes.object
-  }
-
-  render() {
-    const overlayStyle = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      zIndex: 2,
-      opacity: 0.875,
-      backgroundColor: 'rgb(28, 31, 36)',
-      ...this.props.style
-    }
-
-    return <div style={overlayStyle} />
-  }
-}
 
 class Overlay extends React.Component {
   static propTypes = {
@@ -29,23 +8,14 @@ class Overlay extends React.Component {
   }
 
   render() {
-    return <div style={{
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      position: 'fixed',
-      display: this.props.isOpen ? 'flex' : 'none',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      <ViewportOverlay />
-      <div style={{
-        zIndex: 3,
-      }}>
+		let overlayStyle = {}
+		if(!this.props.isOpen) {
+			overlayStyle['display'] = 'none';
+		}
+
+    return <div className={"maputnik-overlay"} style={overlayStyle}>
+			<div className={"maputnik-overlay-viewport"} />
       {this.props.children}
-      </div>
     </div>
   }
 }