added modal

packages/app/src/components/PostCreatorModal/index.jsx

@@ -0,0 +1,63 @@
+import React from "react"
+import classnames from "classnames"
+
+import PostCreator from "../PostCreator"
+
+import "./index.less"
+
+export default (props) => {
+    const [visible, setVisible] = React.useState(true)
+
+    let escTimeout = null
+
+    const close = () => {
+        setVisible(false)
+
+        setTimeout(() => {
+            if (typeof props.onClose === "function") {
+                props.onClose()
+            }
+        }, 150)
+    }
+
+    const handleEsc = (e) => {
+        if (e.key === "Escape") {
+            if (escTimeout !== null) {
+                clearTimeout(escTimeout)
+                return close()
+            }
+
+            escTimeout = setTimeout(() => {
+                escTimeout = null
+            }, 250)
+        }
+    }
+
+    const handleClickOutside = (e) => {
+        if (e.target === e.currentTarget) {
+            close()
+        }
+    }
+
+    React.useEffect(() => {
+        document.addEventListener("keydown", handleEsc, false)
+
+        return () => {
+            document.removeEventListener("keydown", handleEsc, false)
+        }
+    }, [])
+
+    return <div
+        className={classnames(
+            "post_creator_modal",
+            {
+                ["visible"]: visible,
+            },
+        )}
+        onClick={handleClickOutside}
+    >
+        <PostCreator 
+            onPost={close}
+        />
+    </div>
+}

packages/app/src/components/PostCreatorModal/index.less

@@ -0,0 +1,47 @@
+.post_creator_modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(var(--layoutBackgroundColor) 0.7);
+    backdrop-filter: blur(10px);
+
+    transition: all 150ms ease-in-out;
+
+    opacity: 0;
+
+    animation: fadeOut 150ms ease-in-out forwards;
+
+    &.visible {
+        animation: fadeIn 150ms ease-in-out forwards;
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}