From 8144b3d077f4c86ecf535c01110e8e9d5b526d8d Mon Sep 17 00:00:00 2001
From: Singa-pirate <luojiale@u.nus.edu>
Date: Thu, 14 Nov 2024 00:23:03 +0800
Subject: [PATCH] Improve code editor frontend styling

---
 .../CodeContainer/CodeContainer.scss          | 47 +++++++-----
 .../CodeContainer/CodeContainer.tsx           | 75 ++++++++++++-------
 .../QuestionContainer/QuestionContainer.scss  | 13 ++++
 .../QuestionContainer/QuestionContainer.tsx   | 60 +++++++++++----
 frontend/src/pages/CodeEditor/CodeEditor.scss |  4 -
 frontend/src/pages/CodeEditor/CodeEditor.tsx  | 22 ------
 6 files changed, 133 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/CodeContainer/CodeContainer.scss b/frontend/src/components/CodeContainer/CodeContainer.scss
index 8fc1bf73ce..6a5e5f1378 100644
--- a/frontend/src/components/CodeContainer/CodeContainer.scss
+++ b/frontend/src/components/CodeContainer/CodeContainer.scss
@@ -1,12 +1,12 @@
 .CodeContainer {
   display: flex;
+  justify-content: space-between;
 
   .left-side {
-    flex: 0.4;
-    padding: 10px;
+    width: 35%;
     color: #fff;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
 
     .md-editor {
       background-color: #1e1e1e;
@@ -14,49 +14,58 @@
       border: 1px solid #3c3c3c;
       padding: 20px;
       color: #fff;
-      height: 500px;
       overflow: auto;
     }
   }
 
   .right-side {
-    flex: 0.6;
-    padding: 10px;
+    width: 63%;
+    max-width: 63%;
     color: #fff;
-    display: flex;
-    flex-direction: column;
+
+    .right-side-container {
+      background-color: #2c2c2c;
+      border-radius: 10px;
+      border: 1px solid #3c3c3c;
+    }
 
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 10px;
+      margin-inline: 10px;
 
       .language-select {
         background-color: #1e1e1e;
         color: #fff;
         border: 1px solid #3c3c3c;
-        padding: 5px;
+        border-radius: 10px !important;
+        margin: 0px;
+      }
+
+      .language-select-icon {
+        color: white !important;
+      }
+
+      .buttons {
+        display: flex;
+        gap: 20px;
+      }
+
+      .runcode-button {
         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;
+      font-size: 18px;
+      height: 500px;
     }
   }
 
diff --git a/frontend/src/components/CodeContainer/CodeContainer.tsx b/frontend/src/components/CodeContainer/CodeContainer.tsx
index 69c7ebf15a..76fe1d95ff 100644
--- a/frontend/src/components/CodeContainer/CodeContainer.tsx
+++ b/frontend/src/components/CodeContainer/CodeContainer.tsx
@@ -17,7 +17,7 @@ import { useMainDialog } from "../../contexts/MainDialogContext";
 import QuestionService from "../../services/question.service";
 import { SessionContext } from "../../contexts/SessionContext";
 import { UserContext } from "../../contexts/UserContext";
-import { Button, Typography } from "@mui/material";
+import { Button, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import "./CodeContainer.scss";
 import HintBox from "../HintBox/HintBox";
@@ -285,7 +285,7 @@ const CodeContainer: React.FC<CodeContainerProps> = ({
     [sid: string]: { cursor_position: number; color: string };
   }>({});
 
-  const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleLanguageChange = (e: SelectChangeEvent) => {
     const newLanguage = e.target.value as Language;
     if (["python", "cpp", "javascript", "java"].includes(newLanguage)) {
       setLanguage(newLanguage);
@@ -420,36 +420,55 @@ const CodeContainer: React.FC<CodeContainerProps> = ({
       </div>
 
       <div className="right-side">
-        <div className="header">
-          <select className="language-select" onChange={handleLanguageChange} value={language}>
-            <option value="python">Python</option>
-            <option value="cpp">C++</option>
-            <option value="java">Java</option>
-          </select>
-          <div>
-            <Button
-              variant="contained"
+        <div className="right-side-container">
+          <div className="header">
+            <Select
+              className="language-select"
+              value={language}
               size="small"
-              className={"submit-button" + (isExecuting ? " disabled" : "")}
-              onClick={executeCode}
-              disabled={isExecuting}
+              autoWidth
+              onChange={handleLanguageChange}
+              inputProps={{
+                classes: {
+                  icon: "language-select-icon",
+                },
+              }}
             >
-              Run Code
-            </Button>
-            <Button variant="contained" size="small" onClick={submitAndEndSession} disabled={isExecuting}>
-              Submit
-            </Button>
+              <MenuItem value="python">Python</MenuItem>
+              <MenuItem value="cpp">C++</MenuItem>
+              <MenuItem value="java">Java</MenuItem>
+            </Select>
+            <div className="buttons">
+              <Button
+                variant="outlined"
+                size="small"
+                className="runcode-button"
+                onClick={executeCode}
+                disabled={isExecuting}
+              >
+                Run Code
+              </Button>
+              <Button
+                className="submit-button"
+                variant="contained"
+                size="small"
+                onClick={submitAndEndSession}
+                disabled={isExecuting}
+              >
+                Submit
+              </Button>
+            </div>
           </div>
+          <CodeMirror
+            value={code}
+            className={"code-editor"}
+            height="500px"
+            extensions={[...(languageExtensions[language] || []), cursorDecorationsExtension]}
+            onChange={handleCodeChange}
+            onUpdate={(viewUpdate) => handleCursorChange(viewUpdate)}
+            theme={okaidia}
+          />
         </div>
-        <CodeMirror
-          value={code}
-          height="500px"
-          style={{ fontSize: "18px" }}
-          extensions={[...(languageExtensions[language] || []), cursorDecorationsExtension]}
-          onChange={handleCodeChange}
-          onUpdate={(viewUpdate) => handleCursorChange(viewUpdate)}
-          theme={okaidia}
-        />
       </div>
 
       {/* Floating AI Hint Button */}
diff --git a/frontend/src/components/QuestionContainer/QuestionContainer.scss b/frontend/src/components/QuestionContainer/QuestionContainer.scss
index 19757e2b18..03eaddce51 100644
--- a/frontend/src/components/QuestionContainer/QuestionContainer.scss
+++ b/frontend/src/components/QuestionContainer/QuestionContainer.scss
@@ -1,5 +1,14 @@
 .question-container {
   margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .question-header {
+    display: flex;
+    flex-direction: column;
+  }
 
   .question-title {
     margin-bottom: 10px;
@@ -18,4 +27,8 @@
       border-radius: 6px;
     }
   }
+
+  .leave-button {
+    margin-right: 20px;
+  }
 }
diff --git a/frontend/src/components/QuestionContainer/QuestionContainer.tsx b/frontend/src/components/QuestionContainer/QuestionContainer.tsx
index 809e607ccf..d1d2b08eee 100644
--- a/frontend/src/components/QuestionContainer/QuestionContainer.tsx
+++ b/frontend/src/components/QuestionContainer/QuestionContainer.tsx
@@ -1,31 +1,61 @@
-import { Chip, Typography } from "@mui/material";
-import { ReactElement } from "react";
+import { Button, Chip, Typography } from "@mui/material";
+import { ReactElement, useContext } from "react";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import { Question } from "../../models/question.model";
 import Spinner from "../Spinner/Spinner";
 import "./QuestionContainer.scss";
+import { useConfirmationDialog } from "../../contexts/ConfirmationDialogContext";
+import { SessionContext } from "../../contexts/SessionContext";
+import { useNavigate } from "react-router-dom";
 
 const QuestionContainer = (props: { questionData: Question | null }): ReactElement => {
   const { questionData } = props;
+  const { setConfirmationDialogTitle, setConfirmationDialogContent, setConfirmationCallBack, openConfirmationDialog } =
+    useConfirmationDialog();
+  const { clearSession } = useContext(SessionContext);
+  const navigate = useNavigate();
 
   return (
     <div>
       {questionData ? (
         <div className="question-container">
-          <Typography variant="h3" className="question-title">
-            {questionData?.title}
-          </Typography>
+          <div className="question-header">
+            <Typography variant="h3" className="question-title">
+              {questionData?.title}
+            </Typography>
 
-          <div className="details">
-            <Chip label={`Difficulty: ${questionData?.complexity}`} className="detail-chip light-grey-chip" />
-            <Chip label={`Topic: ${questionData?.categories.join(", ")}`} className="detail-chip light-grey-chip" />
-            <Chip
-              label={`URL: ${questionData?.link}`}
-              className="detail-chip light-grey-chip"
-              clickable
-              onClick={() => window.open(questionData?.link, "_blank")}
-              icon={<OpenInNewIcon style={{ color: "#caff33" }} />}
-            />
+            <div className="details">
+              <Chip label={`Difficulty: ${questionData?.complexity}`} className="detail-chip light-grey-chip" />
+              <Chip label={`Topic: ${questionData?.categories.join(", ")}`} className="detail-chip light-grey-chip" />
+              <Chip
+                label={`URL: ${questionData?.link}`}
+                className="detail-chip light-grey-chip"
+                clickable
+                onClick={() => window.open(questionData?.link, "_blank")}
+                icon={<OpenInNewIcon style={{ color: "#caff33" }} />}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Button
+              variant="outlined"
+              color="error"
+              className="leave-button"
+              onClick={() => {
+                setConfirmationDialogTitle("Leave Session");
+                setConfirmationDialogContent(
+                  "Are you sure you want to leave the session?\nYou will be able to rejoin if your partner is still in the session.",
+                );
+                setConfirmationCallBack(() => () => {
+                  clearSession();
+                  navigate("/");
+                });
+                openConfirmationDialog();
+              }}
+            >
+              Leave Session
+            </Button>
           </div>
         </div>
       ) : (
diff --git a/frontend/src/pages/CodeEditor/CodeEditor.scss b/frontend/src/pages/CodeEditor/CodeEditor.scss
index 39c86e7152..6b470bdc0b 100644
--- a/frontend/src/pages/CodeEditor/CodeEditor.scss
+++ b/frontend/src/pages/CodeEditor/CodeEditor.scss
@@ -14,10 +14,6 @@
   background: var(--Grey-10, #1a1a1a);
 }
 
-.buttons {
-  margin: 10px;
-}
-
 .chatbox-icon {
   z-index: 100;
   position: fixed;
diff --git a/frontend/src/pages/CodeEditor/CodeEditor.tsx b/frontend/src/pages/CodeEditor/CodeEditor.tsx
index e733b4d708..6060a11b9c 100644
--- a/frontend/src/pages/CodeEditor/CodeEditor.tsx
+++ b/frontend/src/pages/CodeEditor/CodeEditor.tsx
@@ -11,7 +11,6 @@ import QuestionService from "../../services/question.service";
 import { UserContext } from "../../contexts/UserContext";
 import { ChatMessage } from "../../models/communication.model";
 import { SessionContext, SessionState } from "../../contexts/SessionContext";
-import { useConfirmationDialog } from "../../contexts/ConfirmationDialogContext";
 import Peer, { MediaConnection } from "peerjs";
 import TestCases from "../../components/TestCases/TestCases";
 import { Circle } from "@mui/icons-material";
@@ -25,8 +24,6 @@ const VIDEO_PEER_SERVICE_PORT = process.env.REACT_APP_VIDEO_SERVICE_PORT;
 const CodeEditor: React.FC = () => {
   const { user } = useContext(UserContext);
   const { sessionState, questionId, clearSession, otherUserId, otherUserProfile } = useContext(SessionContext);
-  const { setConfirmationDialogTitle, setConfirmationDialogContent, setConfirmationCallBack, openConfirmationDialog } =
-    useConfirmationDialog();
   const navigate = useNavigate();
 
   const { roomNumber } = useParams();
@@ -314,25 +311,6 @@ const CodeEditor: React.FC = () => {
             setCustomTestCases={setCustomTestCases}
           />
         </div>
-
-        <div className="buttons">
-          <Button
-            variant="contained"
-            color="error"
-            className="buttons-leave"
-            onClick={() => {
-              setConfirmationDialogTitle("Leave Session");
-              setConfirmationDialogContent("Are you sure you want to leave the session?");
-              setConfirmationCallBack(() => () => {
-                clearSession();
-                navigate("/");
-              });
-              openConfirmationDialog();
-            }}
-          >
-            Leave Session
-          </Button>
-        </div>
       </div>
 
       {/* Floating Chatbox Icon */}