refactoring theme settings + some visual changes

mraron · Sep 25, 2023 · bee5910 · bee5910
1 parent 3e0c0a9
commit bee5910
Show file tree

Hide file tree

Showing 37 changed files with 330 additions and 218 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -62,7 +62,8 @@
     },
     "devDependencies": {
         "prettier": "3.0.3",
-        "tailwindcss": "^3.3.3"
+        "tailwindcss": "^3.3.3",
+        "tw-colors": "^3.0.3"
     },
     "proxy": "http://localhost:5555"
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -17,10 +17,10 @@
         <title>React App</title>
     </head>
 
-    <bod
+    <body
         style="font-family: 'Roboto', sans-serif; min-width: 440px">
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div
-            class="h-full antialiased" id="root"></div>
-    </bod>
+            class="h-full antialiased bg-grey-900 text-textcol" id="root"></div>
+    </body>
 </html>
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -20,7 +20,7 @@ window.flash = (message, type = "success") =>
     FlashEvent.emit("flash", { message, type });
 
 function App() {
-    const { judgeData, setJudgeData, allLoaded } = useContext(JudgeDataContext);
+    const { setJudgeData, allLoaded } = useContext(JudgeDataContext);
 
     useEffect(() => {
         const fetchJudgeData = async () => {
@@ -72,7 +72,7 @@ function App() {
                             <div className="pb-20">
                                 <Menubar />
                             </div>
-                            <div className="invert dark:invert-0">
+                            <div>
                                 <RoutingComponent />
                             </div>
                         </Router>

diff --git a/frontend/src/components/concrete/other/Menubar.js b/frontend/src/components/concrete/other/Menubar.js
@@ -41,7 +41,7 @@ function MenuOption({ label, route, selected, horizontal, onClick }) {
                     horizontal ? "border-b-3 pt-1" : "border-l-3 p-3"
                 } ${
                     selected
-                        ? "border-inv-indigo-500 dark:border-indigo-600 bg-grey-775"
+                        ? "border-indigo-600 bg-grey-775"
                         : "border-transparent hover:bg-grey-800"
                 }`}
                 to={route}>
@@ -56,7 +56,7 @@ function getProfileDropdownButton(isLoggedIn) {
         const { t } = useTranslation();
         return (
             <button
-                className={`border border-grey-675 rounded-tl-md rounded-bl-md flex items-center justify-between px-3 py-2 w-full h-full ${
+                className={`border border-bordercol rounded-tl-md rounded-bl-md flex items-center justify-between px-3 py-2 w-full h-full ${
                     isOpen
                         ? "bg-grey-775 hover:bg-grey-725"
                         : "bg-grey-850 hover:bg-grey-800"
@@ -106,7 +106,7 @@ function ProfileSettings() {
                 routes={profileRoutes}
                 routeLabels={profileRouteLabels.map(t)}
             />
-            <div className="px-3 flex items-center justify-center border border-l-0 border-grey-675">
+            <div className="px-3 flex items-center justify-center border border-l-0 border-bordercol">
                 <button
                     className={`px-2 ${
                         i18n.resolvedLanguage === "hu"
@@ -144,7 +144,7 @@ function ThemeButton() {
     };
     return (
         <button
-            className="border border-l-0 border-default p-2 rounded-r-md hover:bg-grey-800 transition duration-200"
+            className="border border-l-0 border-bordercol p-2 rounded-r-md hover:bg-grey-800"
             onClick={toggleTheme}>
             <FontAwesomeIcon
                 icon={theme === "light" ? faMoon : faSun}
@@ -188,14 +188,14 @@ function MenuSideBar({ selected, isOpen, onClose }) {
     return (
         <aside
             ref={menuRef}
-            className={`h-full z-10 pt-20 overflow-y-auto xl:hidden fixed right-0 bg-grey-825 border-l-1 border-default ${
+            className={`h-full z-10 pt-20 overflow-y-auto xl:hidden fixed right-0 bg-grey-825 border-l-1 border-bordercol ${
                 isOpen ? "w-80 opacity-100" : "w-0 opacity-0"
-            } ease-in-out transition-all duration-200 invert dark:invert-0`}>
+            } ease-in-out transition-width-opacity duration-200`}>
             <div className="flex flex-col justify-center">
                 <div className="w-full flex px-4 mb-4">
                     <ProfileSettings />
                 </div>
-                <ol className="divide-y divide-default border-t border-b border-grey-750">
+                <ol className="divide-y divide-dividecol border-t border-b border-grey-750">
                     {menuOptions}
                 </ol>
             </div>
@@ -217,7 +217,7 @@ function MenuTopBar({ selected, isOpen, onToggle }) {
         );
     });
     return (
-        <div className="z-20 flex justify-center bg-grey-825 border-b-1 border-grey-725 fixed w-full top-0 invert dark:invert-0">
+        <div className="z-20 flex justify-center bg-grey-825 border-b-1 border-grey-750 fixed w-full top-0">
             <div className="w-full max-w-7xl flex justify-between items-center">
                 <div className="flex w-full">
                     <Link to="/" className="font-semibold text-lg mx-8 my-4">
@@ -234,7 +234,7 @@ function MenuTopBar({ selected, isOpen, onToggle }) {
                     <button
                         id="menuButton"
                         aria-label="Open menu"
-                        className="flex items-center justify-center p-2 rounded-full hover:bg-grey-800 transition duration-200"
+                        className="flex items-center justify-center p-2 rounded-full hover:bg-grey-800"
                         onClick={() => onToggle(this)}>
                         {isOpen ? (
                             <FontAwesomeIcon

diff --git a/frontend/src/components/concrete/other/ProfileSidebar.js b/frontend/src/components/concrete/other/ProfileSidebar.js
@@ -18,10 +18,10 @@ export function ProfilePictureFrame({ userData }) {
     return (
         <RoundedFrame>
             <div className="flex flex-col items-center p-8 pb-4">
-                <Link to={profileRoute} className="invert dark:invert-0">
+                <Link to={profileRoute}>
                     <img
                         alt="avatar"
-                        className="object-contain border border-default hover:border-grey-450 transition duration-200"
+                        className="object-contain border border-bordercol hover:border-grey-450"
                         src={userData.pictureSrc}
                     />
                 </Link>
@@ -31,7 +31,7 @@ export function ProfilePictureFrame({ userData }) {
                         to={profileRoute}>
                         {userData.username}
                     </Link>
-                    <span className="text-2xl font-semibold text-indigo-500 mx-2 invert dark:invert-0">
+                    <span className="text-2xl font-semibold text-indigo-500 mx-2">
                         &#8226;
                     </span>
                     <span className="truncate">{userData.rating}</span>
@@ -66,7 +66,7 @@ export function ProfileDataFrame({ userData }) {
 
 function SubmissionsFrame({ titleComponent, submissions }) {
     const rows = submissions.map((item, index) => (
-        <tr className="divide-x divide-default" key={index}>
+        <tr className="divide-x divide-dividecol" key={index}>
             <td className="padding-td-default">
                 <Link
                     className="link"
@@ -85,7 +85,7 @@ function SubmissionsFrame({ titleComponent, submissions }) {
     ));
     return (
         <RoundedTable titleComponent={titleComponent}>
-            <tbody className="divide-y divide-default">{rows}</tbody>
+            <tbody className="divide-y divide-dividecol">{rows}</tbody>
         </RoundedTable>
     );
 }

diff --git a/frontend/src/components/concrete/other/Ranklist.js b/frontend/src/components/concrete/other/Ranklist.js
@@ -14,10 +14,10 @@ function RanklistRow({ result, maxScore }) {
             </Link>
             <div className="flex">
                 {accepted && (
-                    <SVGCorrectSimple cls="w-5 h-5 text-green-500 mr-2 invert dark:invert-0" />
+                    <SVGCorrectSimple cls="w-5 h-5 text-green-600 mr-2" />
                 )}
                 {!accepted && (
-                    <SVGWrongSimple cls="w-5 h-5 text-red-500 mr-2 invert dark:invert-0" />
+                    <SVGWrongSimple cls="w-5 h-5 text-red-600 mr-2" />
                 )}
                 <Link
                     className="link whitespace-nowrap"
@@ -38,7 +38,7 @@ function Ranklist({ ranklist, title, titleComponent }) {
             title={title}
             titleComponent={titleComponent}
             cls="overflow-hidden">
-            <div className="divide-y divide-default bg-grey-850">{rows}</div>
+            <div className="divide-y divide-dividecol bg-grey-850">{rows}</div>
         </RoundedFrame>
     );
 }

diff --git a/frontend/src/components/concrete/table/ProblemsTable.js b/frontend/src/components/concrete/table/ProblemsTable.js
@@ -23,7 +23,7 @@ function Problem(data) {
         </span>
     ));
     return (
-        <tr className={"divide-x divide-default"}>
+        <tr className={"divide-x divide-dividecol"}>
             {isLoggedIn && (
                 <td className="padding-td-default w-0">
                     <div className="flex items-center justify-center">
@@ -35,19 +35,19 @@ function Problem(data) {
                         )}
                         {solvedStatus === 1 && (
                             <SVGWrongSimple
-                                cls="w-5 h-5 text-red-500 shrink-0 invert dark:invert-0"
+                                cls="w-5 h-5 text-red-600 shrink-0"
                                 title={t("solved_status.wrong")}
                             />
                         )}
                         {solvedStatus === 2 && (
                             <SVGPartiallyCorrect
-                                cls="w-5 h-5 text-yellow-500 shrink-0 invert dark:invert-0"
+                                cls="w-5 h-5 text-yellow-600 shrink-0"
                                 title={t("solved_status.partially_correct")}
                             />
                         )}
                         {solvedStatus === 3 && (
                             <SVGCorrectSimple
-                                cls="w-5 h-5 text-green-500 shrink-0 invert dark:invert-0"
+                                cls="w-5 h-5 text-green-600 shrink-0"
                                 title={t("solved_status.correct")}
                             />
                         )}
@@ -94,7 +94,7 @@ function ProblemsTable({ problems }) {
     return (
         <RoundedTable>
             <thead className="bg-grey-800">
-                <tr className="divide-x divide-default">
+                <tr className="divide-x divide-dividecol">
                     <th
                         className="padding-td-default"
                         colSpan={isLoggedIn ? 2 : 1}>
@@ -114,7 +114,7 @@ function ProblemsTable({ problems }) {
                     </th>
                 </tr>
             </thead>
-            <tbody className="divide-y divide-default">{problemsContent}</tbody>
+            <tbody className="divide-y divide-dividecol">{problemsContent}</tbody>
         </RoundedTable>
     );
 }