FINISH: Sidebar Categories now shows image instead of text

frontend/src/assets/styles/index.css

@@ -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-borderBg: rgb(123, 0, 0);
-  --user-box: rgb(27, 0, 54);
+  --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-sideBox: rgba(25, 25, 25, 0.938);
-  --user-contentBox: rgba(14, 12, 12, 0.75);
+  --user-contentBox: rgba(108, 0, 0, 0.764);
-  --user-follow-bg: #5c139b;
+  --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: rgb(78, 78, 78);
-  --screenshot-bg-hover: rgb(64, 64, 64);
+  --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"] {

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)
+        if (!response.ok) throw new Error("Failed to fetch followed categories");
-          throw new Error("Failed to fetch followed categories");
         const data = await response.json();
         setFollowedCategories(data);
       } catch (error) {
@@ -92,8 +90,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
     <>
       <ToggleButton
         onClick={() => handleSideBar()}
-        extraClasses={`absolute group text-[1rem] top-[9vh] ${
+        extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar
-          showSideBar
           ? "left-[16vw] duration-[0.5s]"
           : "left-[20px] duration-[1s]"
           } ease-in-out cursor-pointer z-[50]`}
@@ -110,8 +107,7 @@ 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 ${
+        transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"
-          showSideBar ? "translate-x-0" : "-translate-x-full"
           } ${extraClasses}`}
       >
         {/* Profile Info */}
@@ -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) => (
+            {/* Followed Categories */}
-                <button
+            <div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">
-                  key={`category-${category.category_name}`}
+              {followedCategories.map((category) => {
-                  className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
+                return (
-                  onClick={() =>
+                  <div
-                    navigate(`/category/${category.category_name}`)
+                    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}
-                </button>
+                    </div>
-              ))}
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>