added theme and gradients and stuff

codeeditor-app/elements/code-editor/code-editor.less

@@ -1,5 +1,16 @@
-monaco-editor {
+@import url('../../../shared/theme.less');
+
+code-editor {
     width: 100%;
     height: 100%;
     display: block;
+    background: @editor-bg-white;
+    color: @primary-text-color-white;
+}
+
+@media (prefers-color-scheme: dark) {
+    code-editor {
+        background: @editor-bg-dark;
+        color: @primary-text-color-dark;
+    }
 }

codeeditor-app/elements/code-editor/code-editor.ts

@@ -73,7 +73,6 @@ export class CodeEditor extends BaseElement {
         });
 
         this.waitFor(this.outputFrame, () => {
-            console.log("setting script");
             this.outputFrame.setScript(this.input);
         });
 
@@ -100,11 +99,7 @@ export class CodeEditor extends BaseElement {
         };
     }
 
-    onUpdate(): void {
-        console.log("APP ROOT UPDATE");
-    }
-
     get outputFrame(): OutputFrame {
-        return <OutputFrame>this.findSibling("output-frame");
+        return <OutputFrame>this.find("output-frame");
     }
 }

codeeditor-app/elements/code-editor/injects/declarations.d.ts

@@ -4,4 +4,4 @@ declare function rand(from: number, to: number): number;
 declare function center(): number;
 declare function width(): number;
 declare function height(): number;
-declare function randomColor(randomOpacity: boolean = true): string;
+declare function randomColor(): string;

codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.js

@@ -1,5 +1,5 @@
-const boxSize = 40;
-const stepSize = boxSize + boxSize / 4;
+const boxSize = 30;
+const stepSize = boxSize + boxSize / 1.8;
 let x = center() - boxSize / 2;
 let y = center() - boxSize / 2;
 let turns = 0;
@@ -8,7 +8,7 @@ let currentStep = 1;
 let stepsInCurrentDirection = 1;
 
 while (!isOutsizeCanvas()) {
-    box(x, y, boxSize, boxSize);
+    box(x, y, boxSize, boxSize, randomColor());
     moveAccordingToDirection();
     setNextStepAndDirection();
 }

codeeditor-app/elements/notification-bubbles/notification-bubble.less

@@ -1,3 +1,5 @@
+@import url('../../../shared/theme.less');
+
 notification-bubble {
     margin: 10px;
     padding: 10px;
@@ -39,7 +41,7 @@ notification-bubble.syntax-error {
 
 @media (prefers-color-scheme: dark) {
     notification-bubble {
-        color: white;
+        color: @primary-text-color-dark;
     }
 
     notification-bubble.log {

codeeditor-app/elements/output-frame/output-frame.less

@@ -1,8 +1,9 @@
+@import url('../../../shared/theme.less');
+
 output-frame {
     width: 100%;
     height: 100%;
     display: block;
-    background-color: #f0f0f0;
 }
 
 output-frame > iframe {
@@ -13,9 +14,5 @@ output-frame > iframe {
 }
 
 
-
 @media (prefers-color-scheme: dark) {
-    output-frame {
-        background-color: #272727;
-    }
 }

codeeditor-app/elements/resize-handle/resize-handle.less

@@ -0,0 +1,24 @@
+@import url('../../../shared/theme.less');
+
+resize-handle {
+    background: transparent;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    z-index: 9;
+    cursor: ew-resize;
+    transition: 1s ease-in;
+}
+
+resize-handle:hover {
+    background: @primary-interaction-highlight-white;
+    transition: none;
+}
+
+@media (prefers-color-scheme: dark) {
+
+    resize-handle:hover {
+        background: @primary-interaction-highlight-dark;
+    }
+}

codeeditor-app/elements/resize-handle/resize-handle.ts

@@ -0,0 +1,65 @@
+import { BaseElement } from "../../../shared/_base";
+import { CodeEditor } from "../code-editor/code-editor";
+import './resize-handle.less';
+
+export class ResizeHandle extends BaseElement {
+
+    public isDowned = false;
+
+    onInit(): void {
+        this.setDragEvents();
+    }
+
+    setDragEvents() {
+        this.addEventListener("mousedown", (evt: MouseEvent) => {
+            this.isDowned = true;
+            this.getIframe().style.display = "none";
+        });
+
+        window.addEventListener("mousemove", (evt: MouseEvent) => {
+            if (this.isDowned) {
+                this.setPosition(evt.pageX);
+            }
+        });
+
+        window.addEventListener("mouseup", (evt: MouseEvent) => {
+            if (this.isDowned) {
+                this.getIframe().style.display = "block";
+                this.isDowned = false;
+            }
+        });
+
+        this.addEventListener("touchstart", (evt: TouchEvent) => {
+            this.isDowned = true;
+            this.getIframe().style.display = "none";
+        });
+
+        window.addEventListener("touchmove", (evt: TouchEvent) => {
+            if (this.isDowned) {
+                this.setPosition(evt.touches[0].pageX);
+            }
+        });
+
+        window.addEventListener("touchend", (evt: TouchEvent) => {
+            if (this.isDowned) {
+                this.getIframe().style.display = "block";
+                this.isDowned = false;
+            }
+        });
+    }
+
+    setPosition(x: number) {
+        var t = this.getTarget();
+
+        t.style.minWidth = x + "px";
+        t.style.maxWidth = x + "px";
+    }
+
+    getTarget() {
+        return <CodeEditor>this.find("code-editor");
+    }
+
+    getIframe() {
+        return <HTMLIFrameElement>this.find("iframe");
+    }
+}