diff options
| author | nsfisis <nsfisis@gmail.com> | 2024-08-19 04:12:48 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2024-08-19 04:12:48 +0900 |
| commit | f662c0832f1f7f45a4e1a926f3ec5a1d21e80fa7 (patch) | |
| tree | 86d84d797e1b3672868fc78ac7ca4a1ea6a7fcff | |
| parent | 293a88e35bff458df5dc42efd690b3edf154f661 (diff) | |
| download | iosdc-japan-2024-albatross-f662c0832f1f7f45a4e1a926f3ec5a1d21e80fa7.tar.gz iosdc-japan-2024-albatross-f662c0832f1f7f45a4e1a926f3ec5a1d21e80fa7.tar.zst iosdc-japan-2024-albatross-f662c0832f1f7f45a4e1a926f3ec5a1d21e80fa7.zip | |
feat(frontend): adjust style of submit result
| -rw-r--r-- | frontend/app/components/Gaming/CodeBlock.tsx | 2 | ||||
| -rw-r--r-- | frontend/app/components/Gaming/SubmitResult.tsx | 47 |
2 files changed, 21 insertions, 28 deletions
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> |