Merge pull request #115 from CS3219-AY2425S1/apiTest_XL

Make changes to outputWindow
CS3219-AY2425S1 · Nov 13, 2024 · e67c43e · e67c43e
2 parents 66a178d + d4deb25
commit e67c43e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 35 deletions.
diff --git a/backend/collaboration-service/handler/socketHandler.js b/backend/collaboration-service/handler/socketHandler.js
@@ -195,7 +195,6 @@ const handleSocketIO = (apiGatewaySocket) => {
       activeUserInRoom[roomId] - 1
     );
 
-    console.log("HELP", activeUserInRoom[roomId]);
     setTimeout(() => {
       if (!isRefreshOrClose) { //reconnected
         activeUserInRoom[roomId] += 1; 

diff --git a/frontend/src/components/OutputWindow.js b/frontend/src/components/OutputWindow.js
@@ -1,31 +1,31 @@
+import "./styles/OutputWindow.css";
+
 const OutputWindow = ({ outputDetails }) => {
   const getOutput = () => {
     let statusId = outputDetails?.status?.id;
 
     if (statusId === 6) {
       // Compilation error
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "red" }}>
+        <pre className="output-text error-text">
           {atob(outputDetails?.compile_output)}
         </pre>
       );
     } else if (statusId === 3) {
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "green" }}>
+        <pre className="output-text success-text">
           {outputDetails.stdout
             ? `${atob(outputDetails.stdout)}`
             : "Compiled successfully"}
         </pre>
       );
     } else if (statusId === 5) {
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "red" }}>
-          {`Time Limit Exceeded`}
-        </pre>
+        <pre className="output-text error-text">{`Time Limit Exceeded`}</pre>
       );
     } else {
       return (
-        <pre style={{ padding: "8px", fontSize: "12px", color: "red" }}>
+        <pre className="output-text error-text">
           {atob(outputDetails?.stderr)}
         </pre>
       );
@@ -34,21 +34,11 @@ const OutputWindow = ({ outputDetails }) => {
 
   return (
     <>
-      <h1 style={{ fontWeight: "bold", fontSize: "24px", marginBottom: "8px" }}>
-        Output
-      </h1>
-      <div
-        style={{
-          width: "100%",
-          height: "220px", 
-          backgroundColor: "#1e293b",
-          borderRadius: "8px",
-          color: "white",
-          overflowY: "auto",
-          padding: "8px", 
-        }}
-      >
-        {outputDetails ? <>{getOutput()}</> : null}
+      <div className="output-window">
+        <h1 className="output-title">Output</h1>
+        <div className="output-container">
+          {outputDetails ? getOutput() : null}
+        </div>
       </div>
     </>
   );

diff --git a/frontend/src/components/styles/CodeEditor.css b/frontend/src/components/styles/CodeEditor.css
@@ -35,16 +35,3 @@
 #codeButton:active {
   background-color: #e0e0e0;
 }
-
-#outputWindow {
-  background-color: #f9f9f9; /* Light grey background for output */
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 15px;
-  margin-top: 20px;
-  font-family: monospace; /* Use a monospace font for code output */
-  white-space: pre-wrap; /* Preserve whitespace */
-  max-height: 400px; /* Limit height for scrolling */
-  overflow-y: auto; /* Add scrollbar if content overflows */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
-}
diff --git a/frontend/src/components/styles/OutputWindow.css b/frontend/src/components/styles/OutputWindow.css
@@ -0,0 +1,28 @@
+.output-title {
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.output-container {
+  border: 2px solid var(--sds-color-border-default-default);
+  height: 220px;
+  background-color: #1e293b;
+  border-radius: 8px;
+  color: white;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.output-text {
+  padding: 8px;
+  font-size: 12px;
+}
+
+.success-text {
+  color: green;
+}
+
+.error-text {
+  color: red;
+}