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