From 7e841cfaebcc0cf3fec506ddd4fca0a54b4915fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= <andre.wahlberg@outlook.com>
Date: Fri, 27 Nov 2020 17:04:19 +0100
Subject: [PATCH] Add popup class

---
 src/components/Popup.js      | 32 ++++++++++++++++++++++++++++++++
 src/components/css/Popup.css | 19 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/Popup.js
 create mode 100644 src/components/css/Popup.css

diff --git a/src/components/Popup.js b/src/components/Popup.js
new file mode 100644
index 0000000..bd5c01b
--- /dev/null
+++ b/src/components/Popup.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+
+import './css/Popup.css';
+
+
+class Popup extends Component {
+    state = {
+        visible: false
+    };
+    
+    show = () => {
+        this.setState({
+            visible: true
+        });
+    };
+
+    hide = () => {
+        this.setState({
+            visible: false
+        });
+    };
+    
+    render() {
+        return (
+            <div className={`${this.state.visible ? "visible" : ""}` + " popup"}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+export default Popup;
\ No newline at end of file
diff --git a/src/components/css/Popup.css b/src/components/css/Popup.css
new file mode 100644
index 0000000..b809375
--- /dev/null
+++ b/src/components/css/Popup.css
@@ -0,0 +1,19 @@
+.popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: center;
+    background: white;
+    width: 65vw;
+    height: 45vh;
+    box-shadow: var(--boxShadow);
+    border-radius: var(--borderRadius);
+    transition: .35s;
+    z-index: 11;
+}
+
+.visible {
+    pointer-events: all;
+    transform: translate(-50%, -50%) scale(1);
+}
\ No newline at end of file