Fixed some inconsistant styles and fixed category queryparam in maplist pagecss

13 files changed, 82 insertions, 42 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index d443222..4c87357 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -37,15 +37,11 @@ h1 {
 }

 

 h2 {

-        font-size: 32px;

-}

-

-h2 {

-        font-size: 24px;

+        font-size: 42px;

 }

 

 h3 {

-        font-size: 20px;

+        font-size: 32px;

 }

 

 h4 {

@@ -61,7 +57,7 @@ h6 {
 }

 

 p {

-        font-size: 16px;

+        font-size: 24px;

 }

 

 body {

@@ -70,6 +66,7 @@ body {
         color: var(--color-white);

         font-family: var(--font-barlow-semicondensed-regular);

         margin: 0;

+        font-size: 22px;

 }

 

 main {

diff --git a/frontend/src/components/Sidebar/Content.tsx b/frontend/src/components/Sidebar/Content.tsx
index ceb9e67..6aade15 100644
--- a/frontend/src/components/Sidebar/Content.tsx
+++ b/frontend/src/components/Sidebar/Content.tsx
@@ -18,7 +18,7 @@ interface ContentProps {
 const _Content: React.FC<ContentProps> = ({ isSearching, selectedButtonIndex, handle_sidebar_click }) => {
 
     return (
-        <div className="h-full">
+        <div className="md:h-full">
 
             <div className="px-2 my-2.5">
                 <button onClick={() => handle_sidebar_click(0)} className={`${styles.button} ${selectedButtonIndex == 0 ? styles["button-selected"] : ""} ${isSearching ? styles["button-hidden"] : ""}`}>
diff --git a/frontend/src/components/Sidebar/Search.tsx b/frontend/src/components/Sidebar/Search.tsx
index 00d9e1e..49bcec7 100644
--- a/frontend/src/components/Sidebar/Search.tsx
+++ b/frontend/src/components/Sidebar/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 
 import { Search } from "@customTypes/Search";
@@ -7,21 +7,20 @@ import { UserProfile } from "@customTypes/Profile";
 
 interface SearchProps {
     profile?: UserProfile;
+    searchbarRef: React.RefObject<HTMLInputElement | null>;
 };
 
-const _Search: React.FC<SearchProps> = ({ profile }) => {
+const _Search: React.FC<SearchProps> = ({ profile, searchbarRef }) => {
     const [searchData, setSearchData] = React.useState<Search | undefined>(
         undefined
     );
 
-    const searchbarRef = useRef<HTMLInputElement>(null);
-
     const _handle_search_change = async (q: string) => {
         const searchResponse = await API.get_search(q);
         setSearchData(searchResponse);
     };
     return (
-        <div className="flex w-full flex-col justify-between p-3">
+        <div className="flex w-full flex-col p-3 not-md:absolute">
             <input
                 ref={searchbarRef}
                 type="text"
diff --git a/frontend/src/components/Sidebar/Sidebar.module.css b/frontend/src/components/Sidebar/Sidebar.module.css
index 9baf415..6e43254 100644
--- a/frontend/src/components/Sidebar/Sidebar.module.css
+++ b/frontend/src/components/Sidebar/Sidebar.module.css
@@ -7,6 +7,7 @@
     transition: all 0.2s ease;
     padding: 4px 0px;
     height: 48px;
+    gap: 24px;
 }
 
 .button:hover,
@@ -25,7 +26,7 @@ button>span {
     font-size: 22px;
     font-family: var(--font-barlow-semicondensed-regular);
     white-space: nowrap;
-    margin-left: 16px;
+    transition: all 0.2s ease;
 }
 
 .button-hidden>span {
diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index 77e23a6..f280a59 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useRef } from "react";
 import { useLocation } from "react-router-dom";
 import { UserProfile } from "@customTypes/Profile";
 
@@ -24,6 +24,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   const [isSearching, setIsSearching] = React.useState<boolean>(false);
   const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
 
+  const searchbarRef = useRef<HTMLInputElement>(null);
+
   const location = useLocation();
   const path = location.pathname;
 
@@ -34,6 +36,7 @@ const Sidebar: React.FC<SidebarProps> = ({
       if (clicked_sidebar_idx == 0 && !isSearching) {
         if (!isSearching) {
           setIsSearching(true);
+          searchbarRef.current?.focus();
         }
       } else {
         setIsSearching(false);
@@ -57,13 +60,13 @@ const Sidebar: React.FC<SidebarProps> = ({
   }, [path]);
 
   return (
-    <div className={`h-screen w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row not-md:bg-gradient-to-t not-md:from-block not-md:to-bright
+    <div className={`md:h-screen w-80 not-md:w-full text-white bg-block flex flex-col not-md:flex-row not-md:bg-gradient-to-t not-md:from-block not-md:to-bright
       }`}>
 
       {/* Header */}
       <_Header />
 
-      <div className="flex flex-1 overflow-hidden w-full not-md:hidden ">
+      <div className="flex flex-1 overflow-hidden w-full">
         <div className={`flex flex-col transition-all duration-300 ${isSearching ? "w-[64px]" : "w-full"}`}>
           {/* Sidebar Content */}
           <_Content isSearching={isSearching} selectedButtonIndex={selectedButtonIndex} handle_sidebar_click={handle_sidebar_click} />
@@ -73,7 +76,7 @@ const Sidebar: React.FC<SidebarProps> = ({
         </div>
 
         <div className={`flex bg-panel ${isSearching ? 'w-full' : "w-0"}`}>
-          <_Search profile={profile} />
+          <_Search profile={profile} searchbarRef={searchbarRef} />
         </div>
 
       </div>
diff --git a/frontend/src/pages/About/About.tsx b/frontend/src/pages/About/About.tsx
index 0db4bf2..0db6c8a 100644
--- a/frontend/src/pages/About/About.tsx
+++ b/frontend/src/pages/About/About.tsx
@@ -24,7 +24,7 @@ const About: React.FC = () => {
   }, []);
 
   return (
-    <div>
+    <div className="px-12 pt-6">
       <Helmet>
         <title>LPHUB | About</title>
       </Helmet>
diff --git a/frontend/src/pages/Games/Games.tsx b/frontend/src/pages/Games/Games.tsx
index ea46733..2f084f3 100644
--- a/frontend/src/pages/Games/Games.tsx
+++ b/frontend/src/pages/Games/Games.tsx
@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet";
 
 import GameEntry from "@components/GameEntry.tsx";
 import { Game } from "@customTypes/Game.ts";
+import BreadcrumbNav from "@components/BreadcrumbNav/BreadcrumbNav";
 
 interface GamesProps {
   games: Game[];
@@ -10,11 +11,12 @@ interface GamesProps {
 
 const Games: React.FC<GamesProps> = ({ games }) => {
   return (
-    <div className="py-12 px-12 w-full">
+    <div>
       <Helmet>
         <title>LPHUB | Games</title>
       </Helmet>
-      <section>
+
+      <section className="px-12 pt-8 w-full">
         <h1 className="text-3xl mb-8">Games</h1>
         <div className="flex flex-col w-full">
           {games.map((game, index) => (
diff --git a/frontend/src/pages/Home/Homepage.tsx b/frontend/src/pages/Home/Homepage.tsx
index e4c2261..9bbf768 100644
--- a/frontend/src/pages/Home/Homepage.tsx
+++ b/frontend/src/pages/Home/Homepage.tsx
@@ -3,11 +3,11 @@ import { Helmet } from "react-helmet";
 
 const Homepage: React.FC = () => {
   return (
-    <div>
+    <div className="px-12 pt-8">
       <Helmet>
         <title>LPHUB | Homepage</title>
       </Helmet>
-      <section className="p-8">
+      <section>
         <p />
         <h1 className="text-5xl font-barlow-condensed-bold mb-6 text-primary">Welcome to Least Portals Hub!</h1>
         <p className="text-lg mb-4 leading-relaxed">
diff --git a/frontend/src/pages/Maplist/Components/Map.tsx b/frontend/src/pages/Maplist/Components/Map.tsx
index 5451830..503c143 100644
--- a/frontend/src/pages/Maplist/Components/Map.tsx
+++ b/frontend/src/pages/Maplist/Components/Map.tsx
@@ -19,7 +19,7 @@ const Map: React.FC<MapProps> = ({ map, catNum }) => {
                     className="flex h-40 sm:h-48 bg-cover relative"
                     style={{ backgroundImage: `url(${map.image})` }}
                 >
-                    <div className="backdrop-blur-sm w-full flex items-center justify-center">
+                    <div className="backdrop-blur-[4px] w-full flex items-center justify-center">
                         <span className="text-3xl sm:text-5xl font-barlow-semicondensed-semibold text-white mr-1.5">
                             {map.is_disabled
                                 ? map.category_portals[0].portal_count
@@ -28,7 +28,11 @@ const Map: React.FC<MapProps> = ({ map, catNum }) => {
                                 )?.portal_count}
                         </span>
                         <span className="text-2xl sm:text-4xl font-barlow-semicondensed-regular text-white">
-                            portals
+                            {map.is_disabled
+                                ? map.category_portals[0].portal_count == 1 ? "portal" : "portals"
+                                : map.category_portals.find(
+                                    obj => obj.category.id === catNum + 1
+                                )?.portal_count == 1 ? "portal" : "portals"}
                         </span>
                     </div>
                 </div>
diff --git a/frontend/src/pages/Maplist/Maplist.tsx b/frontend/src/pages/Maplist/Maplist.tsx
index d8acdf0..0b64619 100644
--- a/frontend/src/pages/Maplist/Maplist.tsx
+++ b/frontend/src/pages/Maplist/Maplist.tsx
@@ -28,7 +28,7 @@ const Maplist: React.FC = () => {
 
   function _update_currently_selected(catNum2: number) {
     setCurrentlySelected(catNum2);
-    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    // navigate("/games/" + game?.id + "?cat=" + catNum2);
     setHasClicked(true);
   }
 
@@ -54,11 +54,16 @@ const Maplist: React.FC = () => {
     // location query params
     const queryParams = new URLSearchParams(location.search);
     if (queryParams.get("chapter")) {
-      let cat = parseFloat(queryParams.get("chapter") || "");
+      let chapter = parseFloat(queryParams.get("chapter") || "");
       if (gameId === 2) {
-        cat += 10;
+        chapter += 10;
       }
-      _fetch_chapters(cat.toString());
+      _fetch_chapters(chapter.toString());
+    }
+
+    if (queryParams.get("cat")) {
+      let cat = parseFloat(queryParams.get("cat") || "");
+      setCatNum(cat - 1);
     }
 
     const _fetch_game = async () => {
@@ -80,7 +85,7 @@ const Maplist: React.FC = () => {
     setLoad(true);
     _fetch_game();
     _fetch_game_chapters();
-  }, [location.search]);
+  }, [location]);
 
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
@@ -145,7 +150,7 @@ const Maplist: React.FC = () => {
           </div>
 
           <div>
-            <section>
+            <section className="relative">
               <div>
                 <span className="text-lg sm:text-lg translate-y-1.5 block mt-2.5 text-foreground">
                   {curChapter?.chapter.name.split(" - ")[0]}
@@ -155,14 +160,14 @@ const Maplist: React.FC = () => {
                 onClick={_handle_dropdown_click}
                 className="cursor-pointer select-none flex w-fit items-center"
               >
-                <span className="text-foreground text-base sm:text-2xl">
+                <span className="sm:text-4xl font-barlow-semicondensed-semibold">
                   {curChapter?.chapter.name.split(" - ")[1]}
                 </span>
                 <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
               </div>
 
               <div
-                className={`absolute z-[1000] bg-panel rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block"
+                className={`absolute z-10 bg-panel rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${dropdownActive === "none" ? "hidden" : "block"
                   }`}
               >
                 {gameChapters?.chapters.map((chapter, i) => {
diff --git a/frontend/src/pages/Maps/Maps.module.css b/frontend/src/pages/Maps/Maps.module.css
new file mode 100644
index 0000000..5c2b414
--- /dev/null
+++ b/frontend/src/pages/Maps/Maps.module.css
@@ -0,0 +1,22 @@
+.button-nav {
+    display: flex;
+    flex: 1;
+    gap: 12px;
+
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    background-color: var(--color-block);
+    transition: all 0.1s ease;
+    padding: 8px 0px;
+    font-size: 28px;
+}
+
+.button-nav:hover {
+    background-color: var(--color-panel);
+}
+
+.button-nav>span {
+    transform: translateY(-2px);
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Maps/Maps.tsx b/frontend/src/pages/Maps/Maps.tsx
index 03de289..3989b56 100644
--- a/frontend/src/pages/Maps/Maps.tsx
+++ b/frontend/src/pages/Maps/Maps.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import { Helmet } from "react-helmet";
 
+import styles from "./Maps.module.css";
+
 import { PortalIcon, FlagIcon, ChatIcon } from "../../images/Images.tsx";
 import Summary from "@components/Summary.tsx";
 import Leaderboards from "@components/Leaderboards.tsx";
@@ -63,22 +65,25 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
 
   if (!mapSummaryData) {
     // loading placeholder
+    // TODO: Don't do this
     return (
       <>
         <div className="">
           <BreadcrumbNav />
 
           <div className="px-12">
+            <h1>Loading...</h1>
+
             <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-              <button className="nav-button">
+              <button className={styles["button-nav"]}>
                 <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
                 <span>Summary</span>
               </button>
-              <button className="nav-button">
+              <button className={styles["button-nav"]}>
                 <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
                 <span>Leaderboards</span>
               </button>
-              <button className="nav-button">
+              <button className={styles["button-nav"]}>
                 <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
                 <span>Discussions</span>
               </button>
@@ -109,19 +114,21 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
       <div id="background-image">
         <img src={mapSummaryData.map.image} alt="" />
       </div>
-      <div className="">
+      <div>
         <BreadcrumbNav chapter={{ label: mapSummaryData.map.chapter_name, to: `/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}` }} />
         <div className="px-12">
-          <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-            <button className="nav-button" onClick={() => setNavState(0)}>
+          <h1>{mapSummaryData.map.map_name}</h1>
+
+          <section className="mt-2 flex w-full gap-[2px] rounded-[2000px] overflow-clip">
+            <button className={styles["button-nav"]} onClick={() => setNavState(0)}>
               <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
               <span>Summary</span>
             </button>
-            <button className="nav-button" onClick={() => setNavState(1)}>
+            <button className={styles["button-nav"]} onClick={() => setNavState(1)}>
               <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
               <span>Leaderboards</span>
             </button>
-            <button className="nav-button" onClick={() => setNavState(2)}>
+            <button className={styles["button-nav"]} onClick={() => setNavState(2)}>
               <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
               <span>Discussions</span>
             </button>
diff --git a/frontend/src/pages/Rules/Rules.tsx b/frontend/src/pages/Rules/Rules.tsx
index 20d301c..a94118a 100644
--- a/frontend/src/pages/Rules/Rules.tsx
+++ b/frontend/src/pages/Rules/Rules.tsx
@@ -25,7 +25,7 @@ const Rules: React.FC = () => {
   }, []);
 
   return (
-    <div className="pl-8 pt-2">
+    <div className="px-12 pt-6">
       <Helmet>
         <title>LPHUB | Rules</title>
       </Helmet>