#58 made dialogs as routes

src/components/dialogs/ModalWrapper/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC, MouseEventHandler } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './styles.module.scss';
+
+type IProps = {
+  onOverlayClick: MouseEventHandler;
+};
+
+const ModalWrapper: FC<IProps> = ({ children, onOverlayClick }) => {
+  return ReactDOM.createPortal(
+    <div className={styles.fixed}>
+      <div className={styles.overlay} onClick={onOverlayClick} />
+      <div className={styles.content}>{children}</div>
+    </div>,
+    document.body
+  );
+};
+
+export { ModalWrapper };

src/components/dialogs/ModalWrapper/styles.module.scss

@@ -0,0 +1,61 @@
+@import "src/styles/variables";
+
+.fixed {
+  position: fixed;
+  z-index: 30;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  animation: appear 0.25s forwards;
+}
+
+.content_scroller {
+  width: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+.content_padder {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparentize($color: #000000, $amount: 0.9);
+  cursor: pointer;
+  animation: appear 0.25s forwards;
+
+  @include can_backdrop {
+    backdrop-filter: blur(15px);
+  }
+}