diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx
new file mode 100644
index 00000000..5e36c2b8
--- /dev/null
+++ b/src/components/modals/Modal.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+
+import CloseIcon from 'react-icons/lib/md/close'
+
+import Overlay from './Overlay'
+import colors from '../../config/colors'
+import { margins } from '../../config/scales'
+
+class Modal extends React.Component {
+ static propTypes = {
+ isOpen: React.PropTypes.bool.isRequired,
+ title: React.PropTypes.string.isRequired,
+ toggleOpen: React.PropTypes.func.isRequired,
+ }
+
+ render() {
+ return
+
+
+ {this.props.title}
+
+
+
+
+
+
+ {this.props.children}
+
+
+
+ }
+}
+
+export default Modal
diff --git a/src/components/modals/Overlay.jsx b/src/components/modals/Overlay.jsx
new file mode 100644
index 00000000..6318b4a7
--- /dev/null
+++ b/src/components/modals/Overlay.jsx
@@ -0,0 +1,53 @@
+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
+ }
+}
+
+class Overlay extends React.Component {
+ static propTypes = {
+ isOpen: React.PropTypes.bool.isRequired,
+ children: React.PropTypes.element.isRequired
+ }
+
+ render() {
+ return
+
+
+ {this.props.children}
+
+
+ }
+}
+
+export default Overlay
diff --git a/src/components/modals/TilesetsModal.jsx b/src/components/modals/TilesetsModal.jsx
index d7ecb88c..3c5b070c 100644
--- a/src/components/modals/TilesetsModal.jsx
+++ b/src/components/modals/TilesetsModal.jsx
@@ -1,20 +1,14 @@
import React from 'react'
-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 Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
+import Modal from './Modal'
+
import publicTilesets from '../../config/tilesets.json'
import theme from '../../config/rebass'
+import colors from '../../config/colors'
class TilesetsModal extends React.Component {
static propTypes = {
@@ -48,27 +42,15 @@ class TilesetsModal extends React.Component {
})
- return
-
-
- Tilesets
-
-
-
-
-
- Choose Public Tileset
- {tilesetOptions}
-
-
-
-
-
-
-
+ return
+ Choose Public Tileset
+ {tilesetOptions}
+
}
}