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/Stack.tsx

@@ -0,0 +1,36 @@
+import "./Stack.css";
+
+import React from "react";
+
+type StackProps = {
+  children: React.ReactNode;
+  gap?: number;
+  align?: "start" | "center" | "end";
+};
+
+function RowStack({ children, gap, align }: StackProps) {
+  return (
+    <div
+      className="Stack Stack_horizontal"
+      style={{ "--gap": gap, alignItems: align } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  );
+}
+
+function ColStack({ children, gap, align }: StackProps) {
+  return (
+    <div
+      className="Stack Stack_vertical"
+      style={{ "--gap": gap, justifyItems: align } as React.CSSProperties}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default {
+  Row: RowStack,
+  Col: ColStack
+};