changes

1 files changed, 134 insertions, 0 deletions

diff --git a/src/client/views/nodes/imageEditor/ImageEditor.scss b/src/client/views/nodes/imageEditor/ImageEditor.scss
new file mode 100644
index 000000000..21c28f6da
--- /dev/null
+++ b/src/client/views/nodes/imageEditor/ImageEditor.scss
@@ -0,0 +1,134 @@
+$navHeight: 5rem;
+$canvasSize: 1024px;
+$scale: 0.5;
+
+.imageEditorContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .imageEditorTopBar {
+        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;
+
+        .imageEditorControls {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+        }
+
+        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: 3rem;
+            left: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 4rem;
+
+            .imageToolsContainer {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .undoRedoContainer {
+                justify-content: center;
+                display: flex;
+                flex-direction: row;
+            }
+
+            .sliderContainer {
+                height: 225px;
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                cursor: pointer;
+            }
+        }
+
+        .editsBox {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            .originalImageLabel {
+                position: absolute;
+                bottom: 10;
+                left: 10;
+                color: #ffffff;
+                font-size: 0.8rem;
+                letter-spacing: 1px;
+                text-transform: uppercase;
+            }
+
+            img {
+                cursor: pointer;
+                transition: all 0.2s ease-in-out;
+                &:hover {
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+}