Switched to tailwind/vite

8 files changed, 93 insertions, 107 deletions

diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 5a69bfe..a5bb291 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Helmet } from "react-helmet";
 
-import "@css/About.css";
-
 const About: React.FC = () => {
   const [aboutText, setAboutText] = React.useState<string>("");
 
@@ -26,7 +24,7 @@ const About: React.FC = () => {
   }, []);
 
   return (
-    <div id="about">
+    <div className="p-8 text-foreground font-[--font-barlow-semicondensed-regular] prose prose-invert max-w-none">
       <Helmet>
         <title>LPHUB | About</title>
       </Helmet>
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index d7dacde..1ef0f57 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -3,41 +3,23 @@ import { Helmet } from "react-helmet";
 
 import GameEntry from "@components/GameEntry";
 import { Game } from "@customTypes/Game";
-import "@css/Maps.css";
 
 interface GamesProps {
   games: Game[];
 }
 
 const Games: React.FC<GamesProps> = ({ games }) => {
-  const _page_load = () => {
-    const loaders = document.querySelectorAll(".loader");
-    loaders.forEach(loader => {
-      (loader as HTMLElement).style.display = "none";
-    });
-  };
-
-  React.useEffect(() => {
-    document
-      .querySelectorAll(".games-page-item-body")
-      .forEach((game, index) => {
-        game.innerHTML = "";
-      });
-    _page_load();
-  }, []);
-
   return (
-    <div className="games-page">
+    <div className="ml-10 min-h-screen w-[calc(100%-320px)] text-foreground font-[--font-barlow-semicondensed-regular] overflow-y-auto scrollbar-thin">
       <Helmet>
         <title>LPHUB | Games</title>
       </Helmet>
-      <section>
-        <div className="games-page-content">
-          <div className="games-page-item-content">
-            {games.map((game, index) => (
-              <GameEntry game={game} key={index} />
-            ))}
-          </div>
+      <section className="py-12 px-12 w-full">
+        <h1 className="text-3xl font-bold mb-8">Games</h1>
+        <div className="flex flex-col w-full">
+          {games.map((game, index) => (
+            <GameEntry game={game} key={index} />
+          ))}
         </div>
       </section>
     </div>
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index f0c5821..2d16b8d 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -3,23 +3,23 @@ import { Helmet } from "react-helmet";
 
 const Homepage: React.FC = () => {
   return (
-    <main>
+    <main className="text-foreground font-[--font-barlow-semicondensed-regular]">
       <Helmet>
         <title>LPHUB | Homepage</title>
       </Helmet>
-      <section>
+      <section className="p-8">
         <p />
-        <h1>Welcome to Least Portals Hub!</h1>
-        <p>
+        <h1 className="text-5xl font-[--font-barlow-condensed-bold] mb-6 text-primary">Welcome to Least Portals Hub!</h1>
+        <p className="text-lg mb-4 leading-relaxed">
           At the moment, LPHUB is in beta state. This means that the site has
           only the core functionalities enabled for providing both collaborative
           information and competitive leaderboards.
         </p>
-        <p>
+        <p className="text-lg mb-4 leading-relaxed">
           The website should feel intuitive to navigate around. For any type of
           feedback, reach us at LPHUB Discord server.
         </p>
-        <p>
+        <p className="text-lg mb-4 leading-relaxed">
           By using LPHUB, you agree that you have read the 'Leaderboard Rules'
           and the 'About LPHUB' pages.
         </p>
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index a7242ef..8343129 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -2,7 +2,6 @@ import React, { useEffect } from "react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
-import "@css/Maplist.css";
 import { API } from "@api/Api";
 import { Game } from "@customTypes/Game";
 import { GameChapter, GamesChapters } from "@customTypes/Chapters";
@@ -92,44 +91,52 @@ const Maplist: React.FC = () => {
       <Helmet>
         <title>LPHUB | Maplist</title>
       </Helmet>
-      <section style={{ marginTop: "20px" }}>
+      
+      <section className="mt-5">
         <Link to="/games">
-          <button className="nav-button" style={{ borderRadius: "20px" }}>
-            <i className="triangle"></i>
-            <span>Games List</span>
+          <button className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2">
+            <i className="triangle mr-2"></i>
+            <span className="px-2">Games List</span>
           </button>
         </Link>
       </section>
+
       {load ? (
         <div></div>
       ) : (
         <section>
-          <h1>{game?.name}</h1>
+          <h1 className="font-[--font-barlow-condensed-bold] text-6xl my-0 text-foreground">
+            {game?.name}
+          </h1>
+
           <div
+            className="text-center rounded-3xl overflow-hidden bg-cover bg-[25%] mt-3 relative"
             style={{ backgroundImage: `url(${game?.image})` }}
-            className="game-header"
           >
-            <div className="blur">
-              <div className="game-header-portal-count">
-                <h2 className="portal-count">
+            <div className="backdrop-blur-sm flex flex-col w-full">
+              <div className="h-full flex flex-col justify-center items-center">
+                <h2 className="my-5 font-[--font-barlow-semicondensed-semibold] text-8xl text-foreground">
                   {
                     game?.category_portals.find(
                       obj => obj.category.id === catNum + 1
                     )?.portal_count
                   }
                 </h2>
-                <h3>portals</h3>
+                <h3 className="font-[--font-barlow-semicondensed-regular] mx-2.5 text-4xl my-0 text-foreground">
+                  portals
+                </h3>
               </div>
-              <div className="game-header-categories">
+
+              <div className="flex h-12 bg-surface gap-0.5">
                 {game?.category_portals.map((cat, index) => (
                   <button
                     key={index}
-                    className={
+                    className={`border-0 text-foreground font-[--font-barlow-semicondensed-regular] text-xl cursor-pointer transition-all duration-100 w-full ${
                       currentlySelected === cat.category.id ||
                       (cat.category.id - 1 === catNum && !hasClicked)
-                        ? "game-cat-button selected"
-                        : "game-cat-button"
-                    }
+                        ? "bg-surface"
+                        : "bg-surface1 hover:bg-surface"
+                    }`}
                     onClick={() => {
                       setCatNum(cat.category.id - 1);
                       _update_currently_selected(cat.category.id);
@@ -143,31 +150,32 @@ const Maplist: React.FC = () => {
           </div>
 
           <div>
-            <section className="chapter-select-container">
+            <section>
               <div>
-                <span
-                  style={{
-                    fontSize: "18px",
-                    transform: "translateY(5px)",
-                    display: "block",
-                    marginTop: "10px",
-                  }}
-                >
+                <span className="text-lg translate-y-1.5 block mt-2.5 text-foreground">
                   {curChapter?.chapter.name.split(" - ")[0]}
                 </span>
               </div>
-              <div onClick={_handle_dropdown_click} className="dropdown">
-                <span>{curChapter?.chapter.name.split(" - ")[1]}</span>
-                <i className="triangle"></i>
+              <div 
+                onClick={_handle_dropdown_click} 
+                className="cursor-pointer select-none flex w-fit items-center"
+              >
+                <span className="text-foreground text-2xl">
+                  {curChapter?.chapter.name.split(" - ")[1]}
+                </span>
+                <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
               </div>
+              \
               <div
-                className="dropdown-elements"
-                style={{ display: dropdownActive }}
+                className={`absolute z-[1000] bg-surface1 rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${
+                  dropdownActive === "none" ? "hidden" : "block"
+                }`}
               >
                 {gameChapters?.chapters.map((chapter, i) => {
                   return (
                     <div
-                      className="dropdown-element"
+                      key={i}
+                      className="cursor-pointer text-xl rounded-[2000px] p-1 hover:bg-surface text-foreground"
                       onClick={() => {
                         _fetch_chapters(chapter.id.toString());
                         _handle_dropdown_click();
@@ -179,49 +187,52 @@ const Maplist: React.FC = () => {
                 })}
               </div>
             </section>
-            <section className="maplist">
+
+            <section className="grid grid-cols-4 gap-5 my-5">
               {curChapter?.maps.map((map, i) => {
                 return (
-                  <div className="maplist-entry">
+                  <div key={i} className="bg-surface rounded-3xl overflow-hidden">
                     <Link to={`/maps/${map.id}`}>
-                      <span>{map.name}</span>
+                      <span className="text-center text-xl w-full block my-1.5 text-foreground">
+                        {map.name}
+                      </span>
                       <div
-                        className="map-entry-image"
+                        className="flex h-48 bg-cover relative"
                         style={{ backgroundImage: `url(${map.image})` }}
                       >
-                        <div className="blur map">
-                          <span>
+                        <div className="backdrop-blur-sm w-full flex items-center justify-center">
+                          <span className="text-4xl font-[--font-barlow-semicondensed-semibold] text-white mr-1.5">
                             {map.is_disabled
                               ? map.category_portals[0].portal_count
                               : map.category_portals.find(
                                   obj => obj.category.id === catNum + 1
                                 )?.portal_count}
                           </span>
-                          <span>portals</span>
+                          <span className="text-4xl font-[--font-barlow-semicondensed-regular] text-white">
+                            portals
+                          </span>
                         </div>
                       </div>
-                      <div className="difficulty-bar">
-                        {/* <span>Difficulty:</span> */}
-                        <div
-                          className={
-                            map.difficulty === 0
-                              ? "one"
-                              : map.difficulty === 1
-                                ? "two"
-                                : map.difficulty === 2
-                                  ? "three"
-                                  : map.difficulty === 3
-                                    ? "four"
-                                    : map.difficulty === 4
-                                      ? "five"
-                                      : "one"
-                          }
-                        >
-                          <div className="difficulty-point"></div>
-                          <div className="difficulty-point"></div>
-                          <div className="difficulty-point"></div>
-                          <div className="difficulty-point"></div>
-                          <div className="difficulty-point"></div>
+
+                      {/* Difficulty rating */}
+                      <div className="flex mx-2.5 my-4">
+                        <div className="flex w-full items-center justify-center gap-1.5 rounded-[2000px] ml-0.5 translate-y-px">
+                          {[1, 2, 3, 4, 5].map((point) => (
+                            <div
+                              key={point}
+                              className={`flex h-0.5 w-full rounded-3xl ${
+                                point <= (map.difficulty + 1)
+                                  ? map.difficulty === 0
+                                    ? "bg-green-500"
+                                    : map.difficulty === 1 || map.difficulty === 2
+                                    ? "bg-lime-500"
+                                    : map.difficulty === 3
+                                    ? "bg-red-400"
+                                    : "bg-red-600"
+                                  : "bg-surface1"
+                              }`}
+                            />
+                          ))}
                         </div>
                       </div>
                     </Link>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fbdb8f3..75753ac 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -2,14 +2,13 @@ import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
-import { PortalIcon, FlagIcon, ChatIcon } from "@images/Images";
+import { PortalIcon, FlagIcon, ChatIcon } from "../images/Images";
 import Summary from "@components/Summary";
 import Leaderboards from "@components/Leaderboards";
 import Discussions from "@components/Discussions";
 import ModMenu from "@components/ModMenu";
 import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map";
 import { API } from "@api/Api";
-import "@css/Maps.css";
 
 interface MapProps {
   token?: string;
@@ -82,15 +81,15 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
 
           <section id="section2" className="summary1">
             <button className="nav-button">
-              <img src={PortalIcon} alt="" />
+              <img src={PortalIcon} alt="" className="w-6 h-6" />
               <span>Summary</span>
             </button>
             <button className="nav-button">
-              <img src={FlagIcon} alt="" />
+              <img src={FlagIcon} alt="" className="w-6 h-6" />
               <span>Leaderboards</span>
             </button>
             <button className="nav-button">
-              <img src={ChatIcon} alt="" />
+              <img src={ChatIcon} alt="" className="w-6 h-6" />
               <span>Discussions</span>
             </button>
           </section>
@@ -151,15 +150,15 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
 
         <section id="section2" className="summary1">
           <button className="nav-button" onClick={() => setNavState(0)}>
-            <img src={PortalIcon} alt="" />
+            <img src={PortalIcon} alt="" className="w-6 h-6" />
             <span>Summary</span>
           </button>
           <button className="nav-button" onClick={() => setNavState(1)}>
-            <img src={FlagIcon} alt="" />
+            <img src={FlagIcon} alt="" className="w-6 h-6" />
             <span>Leaderboards</span>
           </button>
           <button className="nav-button" onClick={() => setNavState(2)}>
-            <img src={ChatIcon} alt="" />
+            <img src={ChatIcon} alt="" className="w-6 h-6" />
             <span>Discussions</span>
           </button>
         </section>
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index e2d6000..f44f587 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -19,7 +19,6 @@ import { UserProfile } from "@customTypes/Profile";
 import { Game, GameChapters } from "@customTypes/Game";
 import { Map } from "@customTypes/Map";
 import { ticks_to_time } from "@utils/Time";
-import "@css/Profile.css";
 import { API } from "@api/Api";
 import useConfirm from "@hooks/UseConfirm";
 import useMessage from "@hooks/UseMessage";
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index 91027a0..7cdc08b 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Helmet } from "react-helmet";
 
-import "@css/Rules.css";
-
 const Rules: React.FC = () => {
   const [rulesText, setRulesText] = React.useState<string>("");
 
@@ -27,7 +25,7 @@ const Rules: React.FC = () => {
   }, []);
 
   return (
-    <main>
+    <main className="p-8 text-foreground font-[--font-barlow-semicondensed-regular] prose prose-invert max-w-none">
       <Helmet>
         <title>LPHUB | Rules</title>
       </Helmet>
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index 0198034..4b8a456 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -19,7 +19,6 @@ import { Game, GameChapters } from "@customTypes/Game";
 import { Map } from "@customTypes/Map";
 import { API } from "@api/Api";
 import { ticks_to_time } from "@utils/Time";
-import "@css/Profile.css";
 import useMessage from "@hooks/UseMessage";
 
 interface UserProps {