From bdb046643611a047eb166ebc7539e777c46706fb Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Wed, 21 Dec 2016 13:55:11 +0100
Subject: [PATCH] Replace rebass with own Modal component

---
 src/components/modals/Modal.jsx         | 43 ++++++++++++++++++++
 src/components/modals/Overlay.jsx       | 53 +++++++++++++++++++++++++
 src/components/modals/TilesetsModal.jsx | 42 ++++++--------------
 3 files changed, 108 insertions(+), 30 deletions(-)
 create mode 100644 src/components/modals/Modal.jsx
 create mode 100644 src/components/modals/Overlay.jsx

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 <Overlay isOpen={this.props.isOpen}>
+      <div style={{
+        backgroundColor: colors.gray,
+      }}>
+        <div style={{
+          backgroundColor: colors.midgray,
+          display: 'flex',
+          flexDirection: 'row',
+          padding: margins[1]
+        }}>
+          {this.props.title}
+          <span style={{flexGrow: 1}} />
+          <a onClick={this.props.toggleOpen(false)}>
+            <CloseIcon />
+          </a>
+        </div>
+        <div style={{
+          padding: margins[1]
+        }}>
+          {this.props.children}
+        </div>
+      </div>
+    </Overlay>
+  }
+}
+
+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 <div style={overlayStyle} />
+  }
+}
+
+class Overlay extends React.Component {
+  static propTypes = {
+    isOpen: React.PropTypes.bool.isRequired,
+    children: React.PropTypes.element.isRequired
+  }
+
+  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,
+      }}>
+      {this.props.children}
+      </div>
+    </div>
+  }
+}
+
+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 {
       </div>
     })
 
-    return <Overlay open={this.props.open} >
-      <Panel theme={'secondary'}>
-        <PanelHeader theme={'default'}>
-          Tilesets
-          <Space auto />
-          <Close onClick={this.props.toggle('modalOpen')} />
-        </PanelHeader>
-        <br />
-
-        <h2>Choose Public Tileset</h2>
-        {tilesetOptions}
-
-        <PanelFooter>
-          <Space auto />
-          <Button theme={'default'}
-            onClick={this.props.toggle('modalOpen')}
-            children='Close!'
-          />
-        </PanelFooter>
-      </Panel>
-    </Overlay>
+    return <Modal
+      //isOpen={this.props.open}
+      isOpen={true}
+      toggleOpen={this.props.toggle}
+      title={'Tilesets'}
+    >
+      <h2>Choose Public Tileset</h2>
+      {tilesetOptions}
+    </Modal>
   }
 }