From f662c0832f1f7f45a4e1a926f3ec5a1d21e80fa7 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 19 Aug 2024 04:12:48 +0900
Subject: feat(frontend): adjust style of submit result

---
 frontend/app/components/Gaming/CodeBlock.tsx    |  2 +-
 frontend/app/components/Gaming/SubmitResult.tsx | 47 +++++++++++--------------
 2 files changed, 21 insertions(+), 28 deletions(-)

(limited to 'frontend/app')

diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index fc14b63..b7d45c0 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -13,7 +13,7 @@ export default function CodeBlock({ code, language }: Props) {
 	const highlighted = highlight(code, languages[language]!, language);
 
 	return (
-		<pre className="h-full w-full p-2 bg-white rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
+		<pre className="h-full w-full p-2 bg-gray-50 rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
 			<code dangerouslySetInnerHTML={{ __html: highlighted }} />
 		</pre>
 	);
diff --git a/frontend/app/components/Gaming/SubmitResult.tsx b/frontend/app/components/Gaming/SubmitResult.tsx
index 6f4cb0e..93e08a7 100644
--- a/frontend/app/components/Gaming/SubmitResult.tsx
+++ b/frontend/app/components/Gaming/SubmitResult.tsx
@@ -1,5 +1,3 @@
-import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import type { SubmitResult } from "../../models/SubmitResult";
 import BorderedContainer from "../BorderedContainer";
@@ -20,32 +18,27 @@ export default function SubmitResult({ result, submitButton }: Props) {
 					<SubmitStatusLabel status={result.status} />
 				</div>
 			</div>
-			<ul className="flex flex-col gap-2">
-				{result.execResults.map((r, idx) => (
-					<li key={r.testcase_id ?? -1} className="flex gap-2">
-						<div className="flex flex-col gap-2 p-2">
-							<ExecStatusIndicatorIcon status={r.status} />
-							{idx !== result.execResults.length - 1 && (
-								<div>
-									<FontAwesomeIcon
-										icon={faArrowDown}
-										fixedWidth
-										className="text-gray-500"
-									/>
+			<ul className="flex flex-col gap-4">
+				{result.execResults.map((r) => (
+					<li key={r.testcase_id ?? -1}>
+						<BorderedContainer>
+							<div className="flex flex-col gap-2">
+								<div className="flex gap-2">
+									<div className="my-auto">
+										<ExecStatusIndicatorIcon status={r.status} />
+									</div>
+									<div className="font-semibold">{r.label}</div>
 								</div>
-							)}
-						</div>
-						<div className="grow p-2">
-							<BorderedContainer>
-								<div className="font-semibold">{r.label}</div>
-								<pre className="overflow-y-hidden max-h-96 whitespace-pre-wrap break-words">
-									<code>
-										{r.stdout}
-										{r.stderr}
-									</code>
-								</pre>
-							</BorderedContainer>
-						</div>
+								{r.stdout + r.stderr && (
+									<pre className="overflow-y-hidden max-h-96 p-2 bg-gray-50 rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
+										<code>
+											{r.stdout}
+											{r.stderr}
+										</code>
+									</pre>
+								)}
+							</div>
+						</BorderedContainer>
 					</li>
 				))}
 			</ul>
-- 
cgit v1.2.3-70-g09d2