Redesign idea (#343)

* Redisign idea

* Code cleanup

* Fixed to right container

* Reoredered layout

* Reordering panels

* Export dialog

* Removed redunant code

* Fixed not removing temp canvas

* Fixed preview not using only selected elements

* Returned file name on export

* Toggle export selected/all elements

* Hide copy to clipboard button if no support of clipboard

* Added border to swatches

* Fixed modal flickering

src/components/Modal.tsx

@@ -0,0 +1,36 @@
+import "./Modal.css";
+
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export function Modal(props: {
+  children: React.ReactNode;
+  maxWidth?: number;
+  onCloseRequest(): void;
+}) {
+  const modalRoot = useBodyRoot();
+  return createPortal(
+    <div className="Modal">
+      <div className="Modal__background" onClick={props.onCloseRequest}></div>
+      <div className="Modal__content" style={{ maxWidth: props.maxWidth }}>
+        {props.children}
+      </div>
+    </div>,
+    modalRoot
+  );
+}
+
+function useBodyRoot() {
+  function createDiv() {
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+    return div;
+  }
+  const [div] = useState(createDiv);
+  useEffect(() => {
+    return () => {
+      document.body.removeChild(div);
+    };
+  }, [div]);
+  return div;
+}