Refactor

package.json

@@ -5,9 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
-    "@mui/icons-material": "^5.10.6",
     "@reduxjs/toolkit": "^2.2.3",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^13.4.0",
@@ -22,6 +20,7 @@
     "monaco-editor": "^0.39.0",
     "msw": "^2.1.7",
     "react": "^18.2.0",
+    "react-cookie": "^7.1.4",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",

src/components/JudgeVerdictTable.tsx

@@ -1,9 +1,10 @@
+import { joinClasses } from "@/utils/common";
 import { JudgeModel } from "../typings/judge";
 
 const columns = [
-  { name: "RESULT", uid: "result" },
-  { name: "TIME USAGE", uid: "time_usage" },
-  { name: "MEMORY USAGE", uid: "memory_usage" },
+  { name: "Result", uid: "result" },
+  { name: "Time Usage", uid: "time_usage" },
+  { name: "Memory Usage", uid: "memory_usage" },
 ];
 
 export interface JudgeVerdictTableProps {
@@ -16,15 +17,20 @@ const JudgeVerdictTable: React.FC<JudgeVerdictTableProps> = (props) => {
     <div className={props.className}>
       <table className="table" aria-label="Judge Verdict Table">
         <thead>
-          <tr>
+          <tr className="border-base-content/10">
             {columns.map((column) => (
               <th key={column.uid}>{column.name}</th>
             ))}
           </tr>
         </thead>
         <tbody>
           {props.data.map((judgeVerdict) => (
-            <tr>
+            <tr
+              className={joinClasses(
+                props.data.length > 1 ? "border-base-content/10" : "border-0",
+              )}
+              key={judgeVerdict.id}
+            >
               <th>
                 <div
                   className={`badge badge-outline ${

src/components/NewsCard.tsx

@@ -1,6 +1,6 @@
 export default function NewsCard() {
   return (
-    <div className="card border shadow-xl">
+    <div className="card rounded border border-base-content/10 bg-base-100">
       <div className="card-body">
         <h1 className="card-title">
           Release Note

src/components/code-editor/CodeEditor.tsx

@@ -23,6 +23,10 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
           language: "cpp",
           theme: "vs-dark",
           automaticLayout: true,
+          scrollBeyondLastLine: false,
+          scrollbar: {
+            vertical: "auto",
+          },
         });
 
         props.onChange(editor!.getValue());

src/layouts/LanguageMenu.tsx → src/components/i18n/LanguageMenu.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { joinClasses } from "../utils/common";
+import { joinClasses } from "../../utils/common";
 import { changeLanguage } from "i18next";
-import { LANGUAGE_SELECTIONS } from "../i18n/i18n";
+import { LANGUAGE_SELECTIONS } from "../../i18n/i18n";
 import React from "react";
 import LanguageIcon from "@/components/icons/tabler/LanguageIcon";
 

src/components/icons/tabler/FileTextIcon.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { DefaultIconStrokeWidth } from "./defaults";
+
+const FileTextIcon: FC<{
+  className?: string;
+}> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={props.className}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+      <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+      <path d="M9 9l1 0" />
+      <path d="M9 13l6 0" />
+      <path d="M9 17l6 0" />
+    </svg>
+  );
+};
+
+export default FileTextIcon;

src/components/icons/tabler/LanguageIcon.tsx

@@ -11,9 +11,9 @@ const LanguageIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/Menu3Icon.tsx

@@ -11,9 +11,9 @@ const Menu3Icon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/MoonIcon.tsx

@@ -11,9 +11,9 @@ const MoonStarsIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/PackageIcon.tsx

@@ -10,9 +10,9 @@ const PackageIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/PencilIcon.tsx

@@ -10,9 +10,9 @@ const PencilIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/PlusIcon.tsx

@@ -11,9 +11,9 @@ const PlusIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/ReportIcon.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { DefaultIconStrokeWidth } from "./defaults";
+
+const ReportIcon: FC<{
+  className?: string;
+}> = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={props.className}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697" />
+      <path d="M18 14v4h4" />
+      <path d="M18 11v-4a2 2 0 0 0 -2 -2h-2" />
+      <path d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
+      <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
+      <path d="M8 11h4" />
+      <path d="M8 15h3" />
+    </svg>
+  );
+};
+
+export default ReportIcon;

src/components/icons/tabler/SunIcon.tsx

@@ -10,9 +10,9 @@ const SunIcon: FC<{
       fill="none"
       stroke="currentColor"
       // Make it thicker, since it looks thinner than the other icon
-      stroke-width="1.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/TrashIcon.tsx

@@ -10,9 +10,9 @@ const TrashIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />

src/components/icons/tabler/UsersIcon.tsx

@@ -10,9 +10,9 @@ const UsersIcon: FC<{
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width={DefaultIconStrokeWidth}
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth={DefaultIconStrokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={props.className}
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />