change e testcase table UI and add CPP validator

resources/submission.scss

@@ -203,9 +203,7 @@ label[for="language"], label[for="status"] {
 }
 
 #test-cases {
-    .toggle .fa {
-        margin-left: -1.28571em;
-    }
+    font-size: 1.1em;
 
     .batch-cases {
         margin: 0;
@@ -215,28 +213,13 @@ label[for="language"], label[for="status"] {
         display: inline-block;
     }
 
-    .batch-cases .case-row td b {
-        font-weight: 500;
-    }
-
-    .case-row td:nth-child(3) {
-        padding-right: 0;
-        text-align: right;
-    }
-
-    .case-row td:nth-child(3) span {
-        float: right;
-    }
-
-    .case-row td:nth-child(4) {
-        text-align: right;
-    }
+    // .batch-cases .case-row td b {
+    //     font-weight: 500;
+    // }
 
     .case-info {
         margin: 0;
-        padding-left: 1em;
-        padding-bottom: 3px;
-        padding-top: 3px;
+        padding: 1em;
         border: 1px solid #2980b9;
         border-left-width: .5em;
         border-radius: 4px;
@@ -245,18 +228,50 @@ label[for="language"], label[for="status"] {
 
     .case-output {
         margin: 0;
-        margin-right: 1em;
+        margin-top: 1em;
+        box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
+        margin: 1rem 0;
+        padding: 1em 1em;
+        border-radius: .28571429rem;
+        border: 1px solid rgba(34,36,38,.15);
+        font-family: Consolas;
     }
 
-    table td {
-        margin: 0;
-        padding: 0 5px 0 0;
+    #testcases-table {
+        width: 100%;
+        border: 1px solid grey;
+        border-radius: 0.5em;
+        border-spacing: 0;
+
+        thead td:first-child {
+            border-top-left-radius: 0.5em;
+        }
+
+        thead td:last-child {
+            border-top-right-radius: 0.5em;
+        }
+
+        td {
+            padding: 0.6em 0.8em;
+            width: 18.75%;
+            border-bottom: 0.7px grey solid;
+        }
+
+        .case-row td:nth-child(2) {
+            width: 25%;
+        }
+
+        .case-row:hover {
+            cursor: pointer;
+        }
+
     }
 
     .toggle {
         font-weight: normal;
     }
 
+
     .case-feedback {
         vertical-align: top;
     }
@@ -266,6 +281,31 @@ label[for="language"], label[for="status"] {
     }
 }
 
+#overall-row:hover {
+    cursor: default !important;
+}
+
+.overall-result-AC {
+    background: linear-gradient(45deg, #a8ff78, #78ffd6);
+}
+
+.overall-result-WA {
+    background: linear-gradient(45deg, yellow, red);   
+}
+
+.overall-result-TLE {
+    background: linear-gradient(45deg, #D7DDE8, #757F99);
+}
+
+.overall-result-RTE,
+.overall-result-MLE {
+    background: linear-gradient(45deg,  #fceabb, #f8b500)
+}
+
+.col-title {
+    font-weight: bold;
+}
+
 .case-AC {
     color: green;
     font-weight: bold;