SVG usage somewhat uniformized

mraron · Sep 26, 2023 · 20926f9 · 20926f9
1 parent f095322
commit 20926f9
Show file tree

Hide file tree

Showing 25 changed files with 245 additions and 857 deletions.
diff --git a/frontend/src/components/concrete/other/Menubar.js b/frontend/src/components/concrete/other/Menubar.js
@@ -2,12 +2,6 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-    faBars,
-    faClose,
-    faMoon,
-    faSun,
-} from "@fortawesome/free-solid-svg-icons";
 import { DropdownRoutes } from "../../input/DropdownMenu";
 import { SVGDropdownMenuArrow } from "../../svg/SVGs";
 import { findRouteIndex } from "../../../util/findRouteIndex";
@@ -147,7 +141,7 @@ function ThemeButton() {
             className="border border-l-0 border-bordercol p-2 rounded-r-md hover:bg-grey-800"
             onClick={toggleTheme}>
             <FontAwesomeIcon
-                icon={theme === "light" ? faMoon : faSun}
+                icon={theme === "light" ? "fa-moon" : "fa-sun"}
                 className="w-6 h-4"
             />
         </button>
@@ -238,12 +232,12 @@ function MenuTopBar({ selected, isOpen, onToggle }) {
                         onClick={() => onToggle(this)}>
                         {isOpen ? (
                             <FontAwesomeIcon
-                                icon={faClose}
+                                icon="fa-close"
                                 className="w-5 h-5"
                             />
                         ) : (
                             <FontAwesomeIcon
-                                icon={faBars}
+                                icon="fa-bars"
                                 className="w-5 h-5"
                             />
                         )}

diff --git a/frontend/src/components/concrete/other/ProfileSidebar.js b/frontend/src/components/concrete/other/ProfileSidebar.js
@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClock, faLineChart } from "@fortawesome/free-solid-svg-icons";
+import { faLineChart } from "@fortawesome/free-solid-svg-icons";
 import MapDataFrame from "../../container/MapDataFrame";
 import SVGTitleComponent from "../../svg/SVGTitleComponent";
 import RoundedTable from "../../container/RoundedTable";
@@ -46,7 +46,7 @@ export function ProfileDataFrame({ userData }) {
     const titleComponent = (
         <SVGTitleComponent
             svg={
-                <FontAwesomeIcon icon={faLineChart} className="w-5 h-5 mr-2" />
+                <FontAwesomeIcon icon={faLineChart} className="w-4 h-4 mr-3" />
             }
             title={t("profile_sidebar.stats")}
         />
@@ -95,7 +95,12 @@ function ProfileSideBar() {
     const { userData, isLoggedIn } = useContext(UserContext);
     const titleComponent = (
         <SVGTitleComponent
-            svg={<FontAwesomeIcon icon={faClock} className="w-5 h-5 mr-2" />}
+            svg={
+                <FontAwesomeIcon
+                    icon="fa-regular fa-clock"
+                    className="w-4 h-4 mr-3"
+                />
+            }
             title={t("profile_sidebar.last_submissions")}
         />
     );

diff --git a/frontend/src/components/concrete/other/Ranklist.js b/frontend/src/components/concrete/other/Ranklist.js
@@ -1,7 +1,8 @@
 import { Link } from "react-router-dom";
-import { SVGCorrectSimple, SVGWrongSimple } from "../../svg/SVGs";
 import { routeMap } from "../../../config/RouteConfig";
 import RoundedFrame from "../../container/RoundedFrame";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
 
 function RanklistRow({ result, maxScore }) {
     const { username, score, submissionID, accepted } = result;
@@ -14,10 +15,16 @@ function RanklistRow({ result, maxScore }) {
             </Link>
             <div className="flex">
                 {accepted && (
-                    <SVGCorrectSimple cls="w-5 h-5 text-green-600 mr-2" />
+                    <FontAwesomeIcon
+                        icon="fa-check"
+                        className="w-4 h-4 highlight-green mr-2"
+                    />
                 )}
                 {!accepted && (
-                    <SVGWrongSimple cls="w-5 h-5 text-red-600 mr-2" />
+                    <FontAwesomeIcon
+                        icon="fa-xmark"
+                        className="w-4 h-4 highlight-red mr-2"
+                    />
                 )}
                 <Link
                     className="link whitespace-nowrap"

diff --git a/frontend/src/components/concrete/table/ProblemsTable.js b/frontend/src/components/concrete/table/ProblemsTable.js
@@ -1,14 +1,9 @@
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useContext } from "react";
+import React, { useContext } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { SVGEllipsis } from "../../svg/SVGs";
 import RoundedTable from "../../container/RoundedTable";
-import {
-    SVGAvatar,
-    SVGCorrectSimple,
-    SVGDotsSmall,
-    SVGPartiallyCorrect,
-    SVGWrongSimple,
-} from "../../svg/SVGs";
 import UserContext from "../../../contexts/user/UserContext";
 import { routeMap } from "../../../config/RouteConfig";
 
@@ -28,26 +23,29 @@ function Problem(data) {
                 <td className="padding-td-default w-0">
                     <div className="flex items-center justify-center">
                         {solvedStatus === 0 && (
-                            <SVGDotsSmall
+                            <SVGEllipsis
                                 cls="w-5 h-5 text-grey-300 shrink-0"
                                 title={t("solved_status.not_tried")}
                             />
                         )}
                         {solvedStatus === 1 && (
-                            <SVGWrongSimple
-                                cls="w-5 h-5 text-red-600 shrink-0"
+                            <FontAwesomeIcon
+                                icon="fa-xmark"
+                                className="w-4 h-4 highlight-red"
                                 title={t("solved_status.wrong")}
                             />
                         )}
                         {solvedStatus === 2 && (
-                            <SVGPartiallyCorrect
-                                cls="w-5 h-5 text-yellow-600 shrink-0"
+                            <FontAwesomeIcon
+                                icon="fa-check"
+                                className="w-4 h-4 highlight-yellow"
                                 title={t("solved_status.partially_correct")}
                             />
                         )}
                         {solvedStatus === 3 && (
-                            <SVGCorrectSimple
-                                cls="w-5 h-5 text-green-600 shrink-0"
+                            <FontAwesomeIcon
+                                icon="fa-check"
+                                className="w-4 h-4 highlight-green"
                                 title={t("solved_status.correct")}
                             />
                         )}
@@ -77,7 +75,10 @@ function Problem(data) {
                         ":problem",
                         problem,
                     )}?ac=1`}>
-                    <SVGAvatar cls="w-[1.1rem] h-[1.1rem] mr-1" />
+                    <FontAwesomeIcon
+                        icon="fa-user"
+                        className="w-3.5 h-3.5 mr-1"
+                    />
                     <span>{solverCount}</span>
                 </Link>
             </td>

diff --git a/frontend/src/components/concrete/table/SubmissionTable.js b/frontend/src/components/concrete/table/SubmissionTable.js
@@ -1,15 +1,10 @@
 import { useTranslation } from "react-i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import RoundedTable from "../../container/RoundedTable";
-import {
-    SVGClock,
-    SVGCorrectSimple,
-    SVGHDD,
-    SVGPartiallyCorrect,
-    SVGSpinner,
-    SVGWrongSimple,
-} from "../../svg/SVGs";
+import { SVGSpinner } from "../../svg/SVGs";
 import RoundedFrame from "../../container/RoundedFrame";
 import CopyableCode from "../../util/copy/CopyableCode";
+import React from "react";
 
 function TestCase13({
     index,
@@ -31,10 +26,16 @@ function TestCase13({
                         <div className="flex flex-col justify-center">
                             <div className="flex items-center justify-center mb-2">
                                 {group.failed && (
-                                    <SVGWrongSimple cls="w-7 h-7 text-red-600" />
+                                    <FontAwesomeIcon
+                                        icon="fa-xmark"
+                                        className="w-6 h-6 highlight-red"
+                                    />
                                 )}
                                 {!group.failed && group.completed && (
-                                    <SVGCorrectSimple cls="w-7 h-7 text-green-600" />
+                                    <FontAwesomeIcon
+                                        icon="fa-check"
+                                        className="w-6 h-6 highlight-green"
+                                    />
                                 )}
                                 {!group.failed && !group.completed && (
                                     <SVGSpinner cls="w-7 h-7" />
@@ -63,13 +64,22 @@ function TestCase13({
                             <SVGSpinner cls="w-5 h-5 mr-2 shrink-0" />
                         )}
                         {testCase.verdictType === 1 && (
-                            <SVGWrongSimple cls="w-5 h-5 text-red-600 mr-2 shrink-0" />
+                            <FontAwesomeIcon
+                                icon="fa-xmark"
+                                className="w-4 h-4 highlight-red mr-2"
+                            />
                         )}
                         {testCase.verdictType === 2 && (
-                            <SVGPartiallyCorrect cls="w-5 h-5 text-yellow-600 mr-2 shrink-0" />
+                            <FontAwesomeIcon
+                                icon="fa-check"
+                                className="w-4 h-4 highlight-yellow mr-2"
+                            />
                         )}
                         {testCase.verdictType === 3 && (
-                            <SVGCorrectSimple cls="w-5 h-5 text-green-600 mr-2 shrink-0" />
+                            <FontAwesomeIcon
+                                icon="fa-check"
+                                className="w-4 h-4 highlight-green mr-2"
+                            />
                         )}
                         <span className="whitespace-nowrap">
                             {testCase.verdictName}
@@ -82,7 +92,10 @@ function TestCase13({
                     <td
                         className={`padding-td-default border border-t-0 border-dividecol ${bottomBorderCase}`}>
                         <div className="flex items-center">
-                            <SVGWrongSimple cls="mr-2 w-5 h-5 text-red-600" />
+                            <FontAwesomeIcon
+                                icon="fa-xmark"
+                                className="w-4 h-4 highlight-red mr-2"
+                            />
                             <span className="whitespace-nowrap">
                                 {testCase.verdictName}
                             </span>
@@ -130,13 +143,22 @@ function TestCase0({ testCase, index }) {
                 <SVGSpinner cls="mr-3 w-6 h-6 shrink-0" />
             )}
             {testCase.verdictType === 1 && (
-                <SVGWrongSimple cls="mr-3 w-6 h-6 text-red-600 shrink-0" />
+                <FontAwesomeIcon
+                    icon="fa-xmark"
+                    className="w-5 h-5 highlight-red mr-3"
+                />
             )}
             {testCase.verdictType === 2 && (
-                <SVGPartiallyCorrect cls="mr-3 w-6 h-6 text-yellow-600 shrink-0" />
+                <FontAwesomeIcon
+                    icon="fa-check"
+                    className="w-5 h-5 highlight-yellow mr-3"
+                />
             )}
             {testCase.verdictType === 3 && (
-                <SVGCorrectSimple cls="mr-3 w-6 h-6 text-green-600 shrink-0" />
+                <FontAwesomeIcon
+                    icon="fa-check"
+                    className="w-5 h-5 highlight-green mr-3"
+                />
             )}
             <span>{index + 1}</span>
             <span className="mx-2">–</span>
@@ -167,14 +189,20 @@ function TestCase0({ testCase, index }) {
         <RoundedFrame cls="overflow-hidden" titleComponent={titleComponent}>
             <div className="py-3 px-5 flex justify-between border-b border-bordercol">
                 <div className="mr-2 whitespace-nowrap truncate flex items-center">
-                    <SVGClock cls="w-5 h-5 mr-2" />
+                    <FontAwesomeIcon
+                        icon="fa-regular fa-clock"
+                        className="w-4 h-4 mr-2"
+                    />
                     <span className="hidden sm:inline">
                         {t("submission_table.time")}:&nbsp;
                     </span>
                     <span>{testCase.timeSpent}</span>
                 </div>
                 <div className="ml-2 whitespace-nowrap truncate flex items-center">
-                    <SVGHDD cls="w-5 h-5 mr-2" />
+                    <FontAwesomeIcon
+                        icon="fa-regular fa-hdd"
+                        className="w-4 h-4 mr-2"
+                    />
                     <span className="hidden sm:inline">
                         {t("submission_table.memory")}:&nbsp;
                     </span>

diff --git a/frontend/src/components/concrete/table/SubmissionsTable.js b/frontend/src/components/concrete/table/SubmissionsTable.js
@@ -1,14 +1,10 @@
 import RoundedTable from "../../container/RoundedTable";
-import {
-    SVGCorrectSimple,
-    SVGPartiallyCorrect,
-    SVGSpinner,
-    SVGWrongSimple,
-} from "../../svg/SVGs";
+import { SVGSpinner } from "../../svg/SVGs";
 import { Link } from "react-router-dom";
 import { routeMap } from "../../../config/RouteConfig";
 import { useTranslation } from "react-i18next";
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 function Submission({ submission }) {
     const {
@@ -56,13 +52,22 @@ function Submission({ submission }) {
                         <SVGSpinner cls="w-5 h-5 mr-2 shrink-0" />
                     )}
                     {verdictType === 1 && (
-                        <SVGWrongSimple cls="w-5 h-5 text-red-600 mr-2 shrink-0" />
+                        <FontAwesomeIcon
+                            icon="fa-xmark"
+                            className="w-4 h-4 highlight-red mr-2"
+                        />
                     )}
                     {verdictType === 2 && (
-                        <SVGPartiallyCorrect cls="w-5 h-5 text-yellow-600 mr-2 shrink-0" />
+                        <FontAwesomeIcon
+                            icon="fa-check"
+                            className="w-4 h-4 highlight-yellow mr-2"
+                        />
                     )}
                     {verdictType === 3 && (
-                        <SVGCorrectSimple cls="w-5 h-5 text-green-600 mr-2 shrink-0" />
+                        <FontAwesomeIcon
+                            icon="fa-check"
+                            className="w-4 h-4 highlight-green mr-2"
+                        />
                     )}
                     <span className="whitespace-nowrap">{verdictName}</span>
                 </div>

diff --git a/frontend/src/components/container/modal/Modal.js b/frontend/src/components/container/modal/Modal.js
@@ -10,7 +10,7 @@ function Modal({ children, isOpen, onClose }) {
                     onClick={onClose}>
                     <button
                         onClick={onClose}
-                        className="flex items-center justify-center absolute top-2 right-2 p-2 rounded-full bg-transparent hover:bg-grey-100 dark:hover:bg-grey-800">
+                        className="flex items-center justify-center absolute top-3 right-3 p-2 rounded-full bg-transparent hover:bg-grey-100 dark:hover:bg-grey-700">
                         <FontAwesomeIcon
                             icon={faClose}
                             className="w-6 h-6 text-white"

diff --git a/frontend/src/components/container/modal/TagModal.js b/frontend/src/components/container/modal/TagModal.js
@@ -1,7 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { useContext } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faTags } from "@fortawesome/free-solid-svg-icons";
 import Modal from "./Modal";
 import RoundedFrame from "../RoundedFrame";
 import TagDropdown from "../../input/TagDropdown";
@@ -13,7 +12,7 @@ function TagModal({ isOpen, onClose }) {
     const { judgeData } = useContext(JudgeDataContext);
     const titleComponent = (
         <SVGTitleComponent
-            svg={<FontAwesomeIcon icon={faTags} className="w-5 h-5 mr-2" />}
+            svg={<FontAwesomeIcon icon="fa-tags" className="w-5 h-5 mr-2" />}
             title={t("tag_modal.title")}
         />
     );

diff --git a/frontend/src/components/input/Checkbox.js b/frontend/src/components/input/Checkbox.js
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { SVGCheckmark } from "../svg/SVGs";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 function Checkbox({ id, label, initChecked, onChange }) {
     const [checked, setChecked] = useState(initChecked);
@@ -26,8 +26,9 @@ function Checkbox({ id, label, initChecked, onChange }) {
                               hovered ? "bg-grey-825" : "bg-grey-850"
                           } border-bordercol`
                 } w-5 h-5 rounded-sm`}>
-                <SVGCheckmark
-                    cls={`w-3.5 h-3.5 text-white ${
+                <FontAwesomeIcon
+                    icon="fa-check"
+                    className={`w-3.5 h-3.5 text-white ${
                         checked ? "opacity-100" : "opacity-0"
                     }`}
                 />