From aaf8300a1c1867b3a0a5ed2562713bf0182bd475 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Fri, 28 Feb 2025 13:08:44 +0000
Subject: [PATCH] FINISH: Sidebar Categories now shows image instead of text

---
 frontend/src/assets/styles/index.css          | 24 ++++-----
 .../src/components/Navigation/Sidebar.tsx     | 52 +++++++++++--------
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index 487d781..6f0b017 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -80,7 +80,7 @@ body[data-theme="light"] {
 }
 
 body[data-theme="dark"] {
-  --bg-color: black;
+   --bg-color: black;
   --text-color: white;
 
   --sideBar-bg: black;
@@ -89,7 +89,7 @@ body[data-theme="dark"] {
   --sideBar-profile-text: #ffffff;
   --profile-border: #ffffff;
 
-  --follow-bg: #dbb2ff;
+  --follow-bg: #a50000c6;
   --follow-text: rgb(255, 255, 255);
   --follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966);
 
@@ -98,7 +98,7 @@ body[data-theme="dark"] {
 
 
   --quickBar-title: rgb(255, 255, 255);
-  --quickBar-title-bg: rgb(0, 0, 0,);
+  --quickBar-title-bg: rgb(0, 0, 0);
   --quickBar-bg: #000000d3;
   --quickBar-text: #ffffff;
   --quickBar-border: #ffffff;
@@ -109,27 +109,27 @@ body[data-theme="dark"] {
   --user-pfp-border: #ffffff;
   --user-pfp-border-shadow: -10px 15px 25px rgba(0, 0, 0, 0.754);
 
-  --user-borderBg: rgb(0, 0, 0);
-  --user-box: rgb(27, 0, 54);
+  --user-borderBg: rgb(123, 0, 0);
+  --user-box: rgb(75, 0, 150);
   --user-box-strip: rgb(165, 0, 0);
   --user-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.754);
-  --user-sideBox: rgba(0, 0, 0, 0.9);
-  --user-contentBox: rgba(14, 12, 12, 0.75);
-  --user-follow-bg: #5c139b;
+  --user-sideBox: rgba(25, 25, 25, 0.938);
+  --user-contentBox: rgba(108, 0, 0, 0.764);
+  --user-follow-bg: #9a0000;
 
   --user-bg: rgb(16, 16, 16);
   --user-live-bg: rgb(127, 161, 5);
 
   /* Screenshot */
-  --screenshot-bg: rgba(64, 64, 64, 0.75);
-  --screenshot-bg-hover: rgb(64, 64, 64);
+  --screenshot-bg: rgb(78, 78, 78);
+  --screenshot-bg-hover: rgb(231, 231, 231);
   --screenshot-text: rgb(255, 255, 255);
-  --screenshot-text-hover: rgb(255, 255, 255);
+  --screenshot-text-hover: rgb(78, 78, 78);
 
   /* Brightness */
   --slider-header: rgb(255, 255, 255);
   --slider-text: rgb(255, 255, 255);
-  --slider-bg: rgb(0,0,0);
+  --slider-bg: #000000;
 }
 
 body[data-theme="blue"] {
diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx
index de444ae..eb29462 100644
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -69,15 +69,13 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
     };
   }, [showSideBar, setShowSideBar, isLoggedIn]);
 
-  // Fetch followed categories
   useEffect(() => {
     if (!isLoggedIn) return;
 
     const fetchFollowedCategories = async () => {
       try {
         const response = await fetch("/api/categories/following");
-        if (!response.ok)
-          throw new Error("Failed to fetch followed categories");
+        if (!response.ok) throw new Error("Failed to fetch followed categories");
         const data = await response.json();
         setFollowedCategories(data);
       } catch (error) {
@@ -92,11 +90,10 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
     <>
       <ToggleButton
         onClick={() => handleSideBar()}
-        extraClasses={`absolute group text-[1rem] top-[9vh] ${
-          showSideBar
-            ? "left-[16vw] duration-[0.5s]"
-            : "left-[20px] duration-[1s]"
-        } ease-in-out cursor-pointer z-[50]`}
+        extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar
+          ? "left-[16vw] duration-[0.5s]"
+          : "left-[20px] duration-[1s]"
+          } ease-in-out cursor-pointer z-[50]`}
         toggled={showSideBar}
       >
         <SidebarIcon className="h-[2vw] w-[2vw]" />
@@ -110,9 +107,8 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
       <div
         id="sidebar"
         className={`fixed top-0 left-0 w-[15vw] h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
-        transition-all duration-500 ease-in-out ${
-          showSideBar ? "translate-x-0" : "-translate-x-full"
-        } ${extraClasses}`}
+        transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"
+          } ${extraClasses}`}
       >
         {/* Profile Info */}
         <div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
@@ -179,18 +175,28 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
             <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
               Categories
             </h2>
-            <div className="flex flex-col flex-grow justify-evenly w-full">
-              {followedCategories.map((category: any) => (
-                <button
-                  key={`category-${category.category_name}`}
-                  className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
-                  onClick={() =>
-                    navigate(`/category/${category.category_name}`)
-                  }
-                >
-                  {category.category_name}
-                </button>
-              ))}
+
+            {/* Followed Categories */}
+            <div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
+              {followedCategories.map((category) => {
+                return (
+                  <div
+                    key={category.category_id}
+                    className="relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
+                     rounded-lg overflow-hidden hover:shadow-lg transition-all hover:opacity-50"
+                    onClick={() => navigate(`/category/${category.category_name}`)}
+                  >
+                    <img
+                      src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
+                      alt={category.category_name}
+                      className="w-full h-28 object-cover"
+                    />
+                    <div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
+                      {category.category_name}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>