Refactor code editor page into smaller components

CS3219-AY2425S1 · Nov 9, 2024 · 4b21a85 · 4b21a85
1 parent fb83271
commit 4b21a85
Show file tree

Hide file tree

Showing 8 changed files with 716 additions and 727 deletions.
diff --git a/frontend/src/components/CodeContainer/CodeContainer.scss b/frontend/src/components/CodeContainer/CodeContainer.scss
@@ -0,0 +1,63 @@
+.CodeContainer {
+    display: flex;
+
+    .left-side {
+      flex: 0.4;
+      padding: 10px;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+
+      .md-editor {
+        background-color: #1e1e1e;
+        border-radius: 10px;
+        border: 1px solid #3c3c3c;
+        padding: 20px;
+        color: #fff;
+        height: 500px;
+        overflow: auto;
+      }
+    }
+
+    .right-side {
+      flex: 0.6;
+      padding: 10px;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .language-select {
+          background-color: #1e1e1e;
+          color: #fff;
+          border: 1px solid #3c3c3c;
+          padding: 5px;
+          border-radius: 5px;
+        }
+
+        .submit-button {
+          background-color: #caff33;
+          color: #121212;
+          border-radius: 5px;
+
+          &.disabled {
+            color: #6c757d;
+          }
+        }
+      }
+
+      .code-editor {
+        background-color: #1e1e1e;
+        border-radius: 10px;
+        border: 1px solid #3c3c3c;
+        color: #fff;
+        overflow: hidden;
+      }
+    }
+  }
+