Refactor drag-n-drop to component with overlay

2022-03-10 00:35:04 -05:00
parent d681d84416
commit 8496c775f2
5 changed files with 187 additions and 127 deletions
--- a/styles/DropZone.module.css
+++ b/styles/DropZone.module.css
@@ -0,0 +1,26 @@
+.drop-zone {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 6;
+  position: fixed;
+}
+
+.overlay {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 7;
+  position: fixed;
+  pointer-events: none;
+  border: 8px dashed #0087f7;
+  font-size: 2rem;
+  color: white;
+  text-shadow: -8px -8px 8px #000, 8px -8px 8px #000, -8px 8px 8px #000,
+    8px 8px 8px #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}