organised pages, started work on theme

3 files changed, 30 insertions, 25 deletions

diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index b18c9d9..7ae3850 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -11,12 +11,12 @@ interface GameCategoryProps {
 const GameCategory: React.FC<GameCategoryProps> = ({ cat, game }) => {
   return (
     <Link
-      className="bg-surface text-center w-full h-[100px] rounded-3xl text-foreground m-3 hover:bg-surface1 transition-colors flex flex-col justify-between p-4"
+      className="bg-block text-center w-full rounded-3xl text-foreground transition-colors flex flex-col justify-between p-2"
       to={"/games/" + game.id + "?cat=" + cat.category.id}
     >
-      <p className="text-3xl font-semibold">{cat.category.name}</p>
+      <span className="text-2xl font-barlow-semicondensed-regular">{cat.category.name}</span>
       <br />
-      <p className="font-bold text-4xl">{cat.portal_count}</p>
+      <span className="text-5xl font-barlow-semicondensed-semibold">{cat.portal_count}</span>
     </Link>
   );
 };
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index f8fd179..6f2b194 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -18,18 +18,18 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
 
   return (
     <Link to={"/games/" + game.id} className="w-full">
-      <div className="w-full h-64 bg-mantle rounded-3xl overflow-hidden my-6">
+      <div className="w-full h-64 bg-panel rounded-3xl overflow-hidden my-6">
         <div className="w-full h-1/2 bg-cover overflow-hidden relative">
           <div
             style={{ backgroundImage: `url(${game.image})` }}
             className="w-full h-full backdrop-blur-sm blur-sm bg-cover"
           ></div>
           <span className="absolute inset-0 flex justify-center items-center">
-            <b className="text-[56px] font-[--font-barlow-condensed-bold] text-white">{game.name}</b>
+            <b className="text-[56px] font-barlow-condensed-bold text-white">{game.name}</b>
           </span>
         </div>
         <div className="flex justify-center items-center h-1/2">
-          <div className="flex flex-row justify-between w-full">
+          <div className="flex flex-row justify-between w-full gap-3 m-3">
             {catInfo.map((cat, index) => {
               return (
                 <GameCategory key={index} cat={cat} game={game} />
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 88a5297..0083a3e 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -23,15 +23,15 @@ interface SidebarProps {
   onUploadRun: () => void;
 }
 
-function OpenSidebarIcon(){
+function OpenSidebarIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-panel-right-close-icon lucide-panel-right-close"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-panel-right-close-icon lucide-panel-right-close"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M15 3v18" /><path d="m8 9 3 3-3 3" /></svg>
   )
 }
 
-function ClosedSidebarIcon(){
+function ClosedSidebarIcon() {
   return (
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-panel-right-open-icon lucide-panel-right-open"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>  )
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-panel-right-open-icon lucide-panel-right-open"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M15 3v18" /><path d="m10 15-3-3 3-3" /></svg>)
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -43,7 +43,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   const [searchData, setSearchData] = React.useState<Search | undefined>(
     undefined
   );
-  const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
+  // const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
   const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
   const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
 
@@ -100,17 +100,16 @@ const Sidebar: React.FC<SidebarProps> = ({
   const getButtonClasses = (buttonIndex: number) => {
     const baseClasses = "flex items-center gap-3 w-full text-left bg-inherit cursor-pointer border-none rounded-lg py-3 px-3 transition-all duration-300 hover:bg-surface1";
     const selectedClasses = selectedButtonIndex === buttonIndex ? "bg-primary text-background" : "bg-transparent text-foreground";
-    
+
     return `${baseClasses} ${selectedClasses}`;
   };
 
   const iconClasses = "w-6 h-6 flex-shrink-0";
 
   return (
-    <div className={`fixed top-0 left-0 h-screen bg-surface border-r border-border transition-all duration-300 z-10 overflow-hidden ${
-      isSidebarOpen ? 'w-80' : 'w-20'
-    }`}>
-      <div className="flex items-center h-20 px-4 border-b border-border">
+    <div className={`w-80 not-md:w-full text-white bg-block
+      }`}>
+      <div className="flex items-center px-4 border-b border-border">
         <Link to="/" tabIndex={-1} className="flex items-center flex-1 cursor-pointer select-none min-w-0">
           <img src={LogoIcon} alt="Logo" className="w-12 h-12 flex-shrink-0" />
           {isSidebarOpen && (
@@ -124,7 +123,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             </div>
           )}
         </Link>
-        
+
         <button
           onClick={_handle_sidebar_toggle}
           className="ml-2 p-2 rounded-lg hover:bg-surface1 transition-colors text-foreground"
@@ -135,9 +134,9 @@ const Sidebar: React.FC<SidebarProps> = ({
       </div>
 
       {/* Sidebar Content */}
-      <div 
+      <div
         ref={sidebarRef}
-        className="flex flex-col h-[calc(100vh-80px)] overflow-y-auto overflow-x-hidden"
+        className="flex flex-col overflow-y-auto overflow-x-hidden"
       >
         {isSidebarOpen && (
           <div className="p-4 border-b border-border min-w-0">
@@ -145,7 +144,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               <img src={SearchIcon} alt="Search" className={iconClasses} />
               <span className="text-white font-[--font-barlow-semicondensed-regular] truncate">Search</span>
             </div>
-            
+
             <div className="min-w-0">
               <input
                 ref={searchbarRef}
@@ -214,7 +213,9 @@ const Sidebar: React.FC<SidebarProps> = ({
             ].map(({ to, refIndex, icon, alt, label }) => (
               <Link to={to} tabIndex={-1} key={refIndex}>
                 <button
-                  ref={el => sidebarButtonRefs.current[refIndex] = el}
+                  ref={el => {
+                    sidebarButtonRefs.current[refIndex] = el
+                  }}
                   className={getButtonClasses(refIndex)}
                   onClick={() => handle_sidebar_click(refIndex)}
                 >
@@ -254,8 +255,10 @@ const Sidebar: React.FC<SidebarProps> = ({
           </div>
 
           <Link to="/rules" tabIndex={-1}>
-            <button 
-              ref={el => sidebarButtonRefs.current[5] = el}
+            <button
+              ref={el => {
+                sidebarButtonRefs.current[5] = el
+              }}
               className={getButtonClasses(5)}
               onClick={() => handle_sidebar_click(5)}
             >
@@ -265,8 +268,10 @@ const Sidebar: React.FC<SidebarProps> = ({
           </Link>
 
           <Link to="/about" tabIndex={-1}>
-            <button 
-              ref={el => sidebarButtonRefs.current[6] = el}
+            <button
+              ref={el => {
+                sidebarButtonRefs.current[6] = el
+              }}
               className={getButtonClasses(6)}
               onClick={() => handle_sidebar_click(6)}
             >