Style open modal

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>
   }
 }