updated

nishant0708 · Nov 20, 2024 · a7c1472 · a7c1472
1 parent 85f67f5
commit a7c1472
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 104 deletions.
diff --git a/src/AlertModal/AlertModal.css b/src/AlertModal/AlertModal.css
@@ -1,93 +1,93 @@
-
-/* Modal Overlay */
-.alert_overlay {
-    background-color: rgba(0, 0, 0, 0.75);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-    bottom: 0;
-    display: flex;
-    backdrop-filter: blur(12px);
-    justify-content: center;
-    align-items: center;
-  }
-
-  /* Modal Content */
-  .alert_modal {
-    background-color: #333;
-    color: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    max-width: 400px;
-    width: 100%;
-    text-align: center;
-  }
-
-  .alert_modal-content h2 {
-    margin-top: 0;
-    font-size: 24px;
-  }
-
-  .alert_modal-content p {
-    margin-bottom: 20px;
-    font-size: 18px;
-  }
-
-  .alert_success-icon {
-    width: 80px; /* Adjust the width */
-    height: 80px; /* Adjust the height */
-    margin: 20px 0;
-  }
-
-  .alert_close-button {
-    background-color: #555;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .alert_confirm-button {
-    background-color: #555;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 2px;
-  }
-  .alert_confirm-button:first-child
-  {
-      background-color: green;
-  }
-  .alert_confirm-button:nth-child(2)
-  {
-      background-color: red;
-  }
-  .alert_confirm-button:hover
-  {
-      cursor: pointer;
-  }
-  .alert_confirm-button:first-child:hover
-  {
-    background-color: rgba(0, 128, 0, 0.384);
-  }
-  .alert_confirm-button:nth-child(2):hover
-  {
-    background-color: rgba(255, 0, 0, 0.384);
-  }
-  .alert_close-button:hover {
-    background-color: #777;
-  }
-
-  .alert_display-flex
-  {
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    gap: 5px;
+
+/* Modal Overlay */
+.alert_overlay {
+    background-color: rgba(0, 0, 0, 0.75);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9111;
+    bottom: 0;
+    display: flex;
+    backdrop-filter: blur(12px);
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* Modal Content */
+  .alert_modal {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 400px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .alert_modal-content h2 {
+    margin-top: 0;
+    font-size: 24px;
+  }
+
+  .alert_modal-content p {
+    margin-bottom: 20px;
+    font-size: 18px;
+  }
+
+  .alert_success-icon {
+    width: 80px; /* Adjust the width */
+    height: 80px; /* Adjust the height */
+    margin: 20px 0;
+  }
+
+  .alert_close-button {
+    background-color: #555;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .alert_confirm-button {
+    background-color: #555;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+  }
+  .alert_confirm-button:first-child
+  {
+      background-color: green;
+  }
+  .alert_confirm-button:nth-child(2)
+  {
+      background-color: red;
+  }
+  .alert_confirm-button:hover
+  {
+      cursor: pointer;
+  }
+  .alert_confirm-button:first-child:hover
+  {
+    background-color: rgba(0, 128, 0, 0.384);
+  }
+  .alert_confirm-button:nth-child(2):hover
+  {
+    background-color: rgba(255, 0, 0, 0.384);
+  }
+  .alert_close-button:hover {
+    background-color: #777;
+  }
+
+  .alert_display-flex
+  {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    gap: 5px;
   }
diff --git a/src/CompletedTest/CompletedTest.jsx b/src/CompletedTest/CompletedTest.jsx
@@ -6,11 +6,14 @@ import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
 import remarkBreaks from "remark-breaks";
 
-const Test = ({ output}) => {
-  // Split stdout and stderr
-  console.log(output);
-  const stdout = output?.stdout ||  "";
-  const stderr = output.stderr || "";
+const Test = ({ output }) => {
+  const stdout = output?.stdout || "";
+  const stderr = output?.stderr || "";
+
+  // Helper function to wrap content in Markdown code blocks
+  const wrapInCodeBlock = (text) => {
+    return `\`\`\`\n${text}\n\`\`\``; // Markdown code block syntax
+  };
 
   return (
     <div className="compiler-test">
@@ -19,25 +22,24 @@ const Test = ({ output}) => {
         Test Output
       </div>
       <div className="test-output">
-        {/* Display stdout in white */}
+        {/* Render stdout */}
         {stdout && (
           <ReactMarkdown
-            className="stdout-output" // Add class for stdout
+            className="stdout-output"
             remarkPlugins={[remarkBreaks]}
             rehypePlugins={[rehypeSanitize]}
           >
-
-            {stdout}
+            {wrapInCodeBlock(stdout)}
           </ReactMarkdown>
         )}
-        {/* Display stderr in red */}
+        {/* Render stderr */}
         {stderr && (
           <ReactMarkdown
-            className="stderr-output" // Add class for stderr
+            className="stderr-output"
             remarkPlugins={[remarkBreaks]}
             rehypePlugins={[rehypeSanitize]}
           >
-            {stderr}
+            {wrapInCodeBlock(stderr)}
           </ReactMarkdown>
         )}
       </div>