Merge pull request #29 from ashikka/fix/testcase-box-ui

fix: Testcase box UI
ashikka · Sep 24, 2021 · 54f31b0 · 54f31b0
2 parents ce99a9b + 4209c34
commit 54f31b0
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 111 deletions.
diff --git a/frontend/src/assets/loading.gif b/frontend/src/assets/loading.gif
diff --git a/frontend/src/components/testCaseBox/TestCaseBox.css b/frontend/src/components/testCaseBox/TestCaseBox.css
@@ -1,52 +1,51 @@
-.test-case-div{
-    width: 80%;
-    height: 250%;
-    background-color: transparent;
-    margin-top: 2rem;
-    border: 5px solid #3cc6f2;
+.compiling-box {
+  margin-top: 2rem;
+  background: linear-gradient(180deg, #28292c 0%, rgba(39, 40, 43, 0.82) 100%);
+  box-shadow: 0px 13px 40px #00000030, 0px 4px 4px #00000020;
+  border-radius: 16px;
+  padding: 1rem;
+  height: 12rem;
 }
 
-.compiling-box{
-    margin-top: 2rem;
-}
 
-.test-case-box{
-    font-size: 70%;
-    text-align: center;
-    padding: 1rem;
-    border: 2px solid #3cc6f2;
-    width: 200px;
+.test-case-box {
+  font-size: 70%;
+  text-align: center;
+  padding: 1rem;
+  border: 2px solid #4C53BE;
+  width: 200px;
 }
 
 .sample-case-detail {
-    white-space: pre-line;
-    text-decoration-style: underline solid  #3cc6f2;
-    margin-bottom: 30px;
+  white-space: pre-line;
+  text-decoration-style: underline solid #4C53BE;
+  margin-bottom: 30px;
 }
 
 .case-box {
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
 }
 
 .icon {
-    height: 20px;
+  height: 20px;
 }
 
 .icon-div {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .result {
-    margin-top: 20px;
-    font-size: 30px;
+  margin-top: 20px;
+  font-size: 20px;
+  margin-bottom: 1rem;
 }
 
 .red {
-    color: red;
+  color: red;
 }
 
 .green {
-    color: green;
+  color: green;
 }
diff --git a/frontend/src/components/testCaseBox/TestCaseBox.jsx b/frontend/src/components/testCaseBox/TestCaseBox.jsx
@@ -1,129 +1,132 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
+import React from "react";
+import { Row } from "react-bootstrap";
+import tick from "../../assets/tick.png";
+import cross from "../../assets/cross.png";
+import Loading from "../../assets/loading.gif";
 
-import tick from '../../assets/tick.png'
-import cross from '../../assets/cross.png';
-
-import './TestCaseBox.css';
+import "./TestCaseBox.css";
 
 const TestCaseBox = ({ status, compilerResponse }) => {
   const renderTestCaseBox = () => {
-    if (status === 'hidden') {
+    if (status === "hidden") {
       return null;
     }
-    if (status === 'compiling') {
-      return <div className="compiling-box">COMPILING...</div>;
+    if (status === "compiling") {
+      return (
+        <Row className="d-flex w-25 flex-row justify-content-center compiling-box">
+          <h4>Compiling...</h4>
+          <img className="w-25 h-25" src={Loading} alt="loading.gif" />
+        </Row>
+      );
     }
     return (
-      <div className="text-case-div">
+      <div
+        className="w-50 mt-5"
+        style={{
+          background:
+            "linear-gradient(180deg, #28292c 0%, rgba(39, 40, 43, 0.82) 100%)",
+          boxShadow: "0px 13px 40px #00000030, 0px 4px 4px #00000020",
+          borderRadius: "16px",
+          padding: "1rem",
+        }}
+      >
         {compilerResponse.tests.map((test, i) => {
           if (i === 0) {
-            if (test.remarks === 'Fail') {
+            if (test.remarks === "Fail") {
               return (
                 <>
-                  <div className="case-box">
-                    <div className="test-case-box">
-                      Sample Test Case
+                  <div className="d-flex flex-row justify-content-around">
+                    <div className="case-box">
+                      <div className="test-case-box">Sample Test Case</div>
+                      <div className="icon-div">
+                        <img src={cross} alt="CROSS" className="icon" />
+                      </div>
                     </div>
-                    <div className="icon-div">
-                      <img
-                        src={cross}
-                        alt="CROSS"
-                        className="icon"
-                      />
-                    </div>
-                  </div>
 
-                  <div className="sample-case-detail">
-                    Expected Output:
-                    <br />
-                    {test.expectedOutput}
-                    <br />
-                    <br />
-                    Obtained Output:
-                    <br />
-                    {test.obtainedOutput}
-                    <br />
-                    <br />
-                    Error:
-                    <br />
-                    {test.error ? test.error : 'No error'}
+                    <div className="sample-case-detail mt-5">
+                      <b>Expected Output:</b> {test.expectedOutput}
+                      <br />
+                      <b>Obtained Output:</b> {test.obtainedOutput}
+                      <br />
+                      <b>Error:</b> {test.error ? test.error : "No error"}
+                    </div>
                   </div>
                 </>
               );
-            } if (test.remarks === 'Time limit exceeded') {
+            }
+            if (test.remarks === "Time limit exceeded") {
               return (
                 <>
-                  <div className="case-box">
-                    <div className="test-case-box">
-                      Sample Test Case
-                    </div>
-                    <div className="icon-div">
-                      <img
-                        src={cross}
-                        alt="CROSS"
-                        className="icon"
-                      />
+                  <div className="d-flex flex-row justify-content-around">
+                    <div className="case-box">
+                      <div className="test-case-box">Sample Test Case</div>
+                      <div className="icon-div">
+                        <img src={cross} alt="CROSS" className="icon" />
+                      </div>
                     </div>
-                  </div>
 
-                  <div className="sample-case-detail">
-                    TIMEOUT ERROR
+                    <div className="sample-case-detail">TIMEOUT ERROR</div>
                   </div>
                 </>
               );
             }
             return (
-              <div className="case-box">
-                <div className="test-case-box">
-                  Sample Test Case
-                </div>
-                <div className="icon-div">
-                  <img
-                    src={tick}
-                    alt="CROSS"
-                    className="icon"
-                  />
+              <>
+                <div className="d-flex flex-row justify-content-around">
+                  <div className="case-box">
+                    <div className="test-case-box">Sample Test Case</div>
+                    <div className="icon-div">
+                      <img src={tick} alt="CROSS" className="icon" />
+                    </div>
+                  </div>
                 </div>
-              </div>
+              </>
             );
           }
           return (
-            <div className="case-box">
-              <div className="test-case-box">
-                Test Case
-                {' '}
-                {i + 1}
-              </div>
-              <div className="icon-div">
-                <img
-                  src={test.remarks === 'Fail' || test.remarks === 'Time limit exceeded' ? cross : tick}
-                  alt="CROSS"
-                  className="icon"
-                />
+            <>
+              <div style={{marginLeft: "2.7rem"}} >
+                <div className="case-box">
+                  <div className="test-case-box">Test Case {i + 1}</div>
+                  <div className="icon-div">
+                    <img
+                      src={
+                        test.remarks === "Fail" ||
+                        test.remarks === "Time limit exceeded"
+                          ? cross
+                          : tick
+                      }
+                      alt="CROSS"
+                      className="icon"
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
+            </>
           );
         })}
         <div
           className={`${
             compilerResponse.tests.find(
-              (test) => test.remarks === 'Fail' || test.remarks === 'Time limit exceeded',
+              (test) =>
+                test.remarks === "Fail" ||
+                test.remarks === "Time limit exceeded"
             )
-              ? 'red'
-              : 'green'
+              ? "red"
+              : "green"
           } result`}
         >
           {compilerResponse.tests.find(
-            (test) => test.remarks === 'Fail' || test.remarks === 'Time limit exceeded',
+            (test) =>
+              test.remarks === "Fail" || test.remarks === "Time limit exceeded"
           )
-            ? 'SUBMISSION UNSUCCESSFUL'
-            : 'SUBMISSION SUCCESSFUL'}
+            ? "SUBMISSION UNSUCCESSFUL"
+            : "SUBMISSION SUCCESSFUL"}
         </div>
       </div>
     );
   };
   return renderTestCaseBox();
 };
 
-export default TestCaseBox;
+export default TestCaseBox;
diff --git a/frontend/src/pages/CodingPage/CodingPage.jsx b/frontend/src/pages/CodingPage/CodingPage.jsx
@@ -4,7 +4,7 @@ import AceEditor from "react-ace";
 import { Dropdown, Row, Button } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import ReactMarkdown from "react-markdown";
-import TestCaseBox from '../../components/testCaseBox/TestCaseBox';
+import TestCaseBox from "../../components/testCaseBox/TestCaseBox";
 import api from "../../api";
 import { getQuestionsThunk } from "../../redux/slices/questionSlice";
 
@@ -190,10 +190,12 @@ const QuestionPage = () => {
         >
           Run
         </Button>
-        <TestCaseBox
+        <div>
+          <TestCaseBox
             status={testCaseBoxStatus}
             compilerResponse={compilerResponse}
           />
+        </div>
       </Row>
     </>
   );

diff --git a/frontend/src/pages/CodingPage/CodingPage.scss b/frontend/src/pages/CodingPage/CodingPage.scss
@@ -1,3 +1,11 @@
 .dropdown-item{
     color: white !important;
-}
+}
+
+.test-case-div {
+    margin-top: 2rem;
+    background: linear-gradient(180deg, #28292c 0%, rgba(39, 40, 43, 0.82) 100%) !important;
+    box-shadow: 0px 13px 40px #00000030, 0px 4px 4px #00000020;
+    border-radius: 16px;
+    padding: 1rem;
+  }