Merge branch 'master' into data-visualization-sarah

1 files changed, 97 insertions, 0 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.scss b/src/client/views/nodes/generativeFill/GenerativeFill.scss
new file mode 100644
index 000000000..c2669a950
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.scss
@@ -0,0 +1,97 @@
+$navHeight: 5rem;
+$canvasSize: 1024px;
+$scale: 0.5;
+
+.generativeFillContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .generativeFillControls {
+        flex-shrink: 0;
+        height: $navHeight;
+        color: #000000;
+        background-color: #ffffff;
+        z-index: 999;
+        width: 100%;
+        display: flex;
+        gap: 3rem;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #c7cdd0;
+        padding: 0 2rem;
+
+        h1 {
+            font-size: 1.5rem;
+        }
+    }
+
+    .drawingArea {
+        cursor: none;
+        touch-action: none;
+        position: relative;
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: #f0f4f6;
+
+        canvas {
+            display: block;
+            position: absolute;
+            transform-origin: 50% 50%;
+        }
+
+        .pointer {
+            pointer-events: none;
+            position: absolute;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            border: 1px solid #ffffff;
+            transform: translate(-50%, -50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .innerPointer {
+                width: 100%;
+                height: 100%;
+                border: 1px solid #000000;
+                border-radius: 50%;
+            }
+        }
+
+        .iconContainer {
+            position: absolute;
+            top: 2rem;
+            left: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        .editsBox {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            img {
+                transition: all 0.2s ease-in-out;
+                &:hover {
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+}