REFACTOR: Align icon imports;

REFACTOR: Remove obsolete `EditButton` component

frontend/src/pages/FollowedCategories.tsx

@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useAuth } from "../context/AuthContext";
-import { useSidebar } from "../context/SidebarContext";
-import { CircleMinus, CirclePlus, Sidebar as SidebarIcon } from "lucide-react";
+import { CircleMinus as RemoveIcon, CirclePlus as AddIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
-import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
 import Button from "../components/Input/Button";
 import { useCategoryFollow } from "../hooks/useCategoryFollow";
 import { ListItemProps as StreamData } from "../components/Layout/ListItem";
@@ -125,9 +123,9 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
                                     onClick={() => toggleFollow(category.category_id, category.category_name)}
                                 >
                                     {category.isFollowing ? (
-                                        <CircleMinus className="text-white w-5 h-5" />
+                                        <RemoveIcon className="text-white w-5 h-5" />
                                     ) : (
-                                        <CirclePlus className="text-white w-5 h-5" />
+                                        <AddIcon className="text-white w-5 h-5" />
                                     )}
                                 </Button>
 

frontend/src/pages/Following.tsx

@@ -8,122 +8,136 @@ import { CategoryType } from "../types/CategoryType";
 
 // Define TypeScript interfaces
 interface Streamer {
-    user_id: number;
-    username: string;
+  user_id: number;
+  username: string;
 }
 
 interface FollowingProps {
-    extraClasses?: string;
+  extraClasses?: string;
 }
 
 const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
-    const { showSideBar, setShowSideBar } = useSidebar();
-    const navigate = useNavigate();
-    const { username, isLoggedIn } = useAuth();
-    const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
+  const { showSideBar, setShowSideBar } = useSidebar();
+  const navigate = useNavigate();
+  const { username, isLoggedIn } = useAuth();
+  const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
 
-    // Fetch followed streamers
-    useEffect(() => {
-        const fetchFollowedStreamers = async () => {
-            try {
-                const response = await fetch("/api/user/following");
-                if (!response.ok) throw new Error("Failed to fetch followed streamers");
-                const data = await response.json();
-                setFollowedStreamers(data.streamers || []);
-            } catch (error) {
-                console.error("Error fetching followed streamers:", error);
-            }
-        };
-
-        if (isLoggedIn) {
-            fetchFollowedStreamers();
-        }
-    }, [isLoggedIn]);
-
-    // Handle sidebar toggle
-    const handleSideBar = () => {
-        setShowSideBar(!showSideBar);
+  // Fetch followed streamers
+  useEffect(() => {
+    const fetchFollowedStreamers = async () => {
+      try {
+        const response = await fetch("/api/user/following");
+        if (!response.ok) throw new Error("Failed to fetch followed streamers");
+        const data = await response.json();
+        setFollowedStreamers(data.streamers || []);
+      } catch (error) {
+        console.error("Error fetching followed streamers:", error);
+      }
     };
 
-    return (
-        <>
-            {/* Sidebar Toggle Button */}
-            <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]`}
-                toggled={showSideBar}
+    if (isLoggedIn) {
+      fetchFollowedStreamers();
+    }
+  }, [isLoggedIn]);
+
+  // Handle sidebar toggle
+  const handleSideBar = () => {
+    setShowSideBar(!showSideBar);
+  };
+
+  return (
+    <>
+      {/* Sidebar Toggle Button */}
+      <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]`}
+        toggled={showSideBar}
+      >
+        <SidebarIcon className="h-[2vw] w-[2vw]" />
+
+        {showSideBar && (
+          <small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
+            Press S
+          </small>
+        )}
+      </ToggleButton>
+
+      {/* Sidebar Container */}
+      <div
+        id="sidebar"
+        className={`top-0 left-0 w-screen 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}`}
+      >
+        {/* 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]">
+          <img
+            src="/images/monkey.png"
+            alt="profile picture"
+            className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
+            onClick={() => navigate(`/user/${username}`)}
+          />
+          <div className="text-center flex flex-col items-center justify-center">
+            <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
+              Logged in as
+            </h5>
+            <button
+              className="font-black text-[1.4rem] hover:underline"
+              onClick={() => navigate(`/user/${username}`)}
             >
-                <SidebarIcon className="h-[2vw] w-[2vw]" />
+              <div className="text-[var(--sideBar-profile-text)]">
+                {username}
+              </div>
+            </button>
+          </div>
+        </div>
 
-                {showSideBar && (
-                    <small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
-                        Press S
-                    </small>
-                )}
-            </ToggleButton>
+        {/* Following Section */}
+        <div
+          id="following"
+          className="flex flex-col flex-grow justify-evenly p-4 gap-4"
+        >
+          <div
+            className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
+            }
+            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
+          >
+            <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
+              Following
+            </h1>
+          </div>
 
-            {/* Sidebar Container */}
-            <div
-                id="sidebar"
-                className={`top-0 left-0 w-screen 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}`}
-            >
-                {/* 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]">
-                    <img
-                        src="/images/monkey.png"
-                        alt="profile picture"
-                        className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
-                        onClick={() => navigate(`/user/${username}`)}
-                    />
-                    <div className="text-center flex flex-col items-center justify-center">
-                        <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
-                            Logged in as
-                        </h5>
-                        <button
-                            className="font-black text-[1.4rem] hover:underline"
-                            onClick={() => navigate(`/user/${username}`)}
-                        >
-                            <div className="text-[var(--sideBar-profile-text)]">{username}</div>
-                        </button>
-                    </div>
-                </div>
-
-                {/* Following Section */}
-                <div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
-                    <div
-                        className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
-                        onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
-                        onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
-                    >
-                        <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
-                            Following
-                        </h1>
-                    </div>
-
-                    {/* Streamers Followed */}
-                    <div id="streamers-followed" className="flex flex-col flex-grow items-center">
-                        <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
-                            Streamers
-                        </h2>
-                        <div className="flex flex-col flex-grow justify-evenly w-full">
-                            {followedStreamers.map((streamer) => (
-                                <button
-                                    key={`streamer-${streamer.username}`}
-                                    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(`/user/${streamer.username}`)}
-                                >
-                                    {streamer.username}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                </div>
+          {/* Streamers Followed */}
+          <div
+            id="streamers-followed"
+            className="flex flex-col flex-grow items-center"
+          >
+            <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
+              Streamers
+            </h2>
+            <div className="flex flex-col flex-grow justify-evenly w-full">
+              {followedStreamers.map((streamer) => (
+                <button
+                  key={`streamer-${streamer.username}`}
+                  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(`/user/${streamer.username}`)}
+                >
+                  {streamer.username}
+                </button>
+              ))}
             </div>
-        </>
-    );
+          </div>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default Following;

frontend/src/pages/StreamDashboardPage.tsx

@@ -3,7 +3,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import Button from "../components/Input/Button";
 import Input from "../components/Input/Input";
 import { useCategories } from "../hooks/useContent";
-import { X as XIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
+import { X as CloseIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
 import { debounce } from "lodash";
 import VideoPlayer from "../components/Stream/VideoPlayer";
@@ -365,7 +365,7 @@ const StreamDashboardPage: React.FC = () => {
                       onClick={clearThumbnail}
                       className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
                     >
-                      <XIcon size={16} className="text-white" />
+                      <CloseIcon size={16} className="text-white" />
                     </button>
                   )}
                 </div>

frontend/src/pages/UserPage.tsx

@@ -5,11 +5,11 @@ import { useAuth } from "../context/AuthContext";
 import { useParams } from "react-router-dom";
 import { useFollow } from "../hooks/useFollow";
 import { useNavigate } from "react-router-dom";
-import Button, { EditButton } from "../components/Input/Button";
+import Button from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import LoadingScreen from "../components/Layout/LoadingScreen";
 import { StreamListItem } from "../components/Layout/ListItem";
-import { Camera } from "lucide-react";
+import { CameraIcon } from "lucide-react";
 
 interface UserProfileData {
   id: number;
@@ -40,8 +40,9 @@ const UserPage: React.FC = () => {
 
   const bgColors = {
     personal: "",
-    streamer: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 0, 0.5)]",  // offline streamer
-    user: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 241, 0.5)]",    
+    streamer:
+      "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 0, 0.5)]", // offline streamer
+    user: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 241, 0.5)]",
     admin:
       "bg-gradient-to-r from-[rgba(255,100,100,0.5)] via-transparent to-[rgba(100,100,255,0.5)]",
   };
@@ -107,12 +108,12 @@ const UserPage: React.FC = () => {
 
   return (
     <DynamicPageContent
-      className={`min-h-screen ${profileData.isLive
-        ? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
-        : bgColors[userPageVariant]
-        } text-white flex flex-col`}
+      className={`min-h-screen ${
+        profileData.isLive
+          ? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
+          : bgColors[userPageVariant]
+      } text-white flex flex-col`}
     >
-
       <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
         <div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
           {/* Profile Section - TOP  */}
@@ -140,7 +141,9 @@ const UserPage: React.FC = () => {
                rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
               style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
             >
-              <label className={`relative ${isUser ? 'cursor-pointer group' : ''}`}>
+              <label
+                className={`relative ${isUser ? "cursor-pointer group" : ""}`}
+              >
                 <img
                   src="/images/monkey.png"
                   alt={`${profileData.username}'s profile`}
@@ -151,13 +154,15 @@ const UserPage: React.FC = () => {
                   <>
                     <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
                     <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                      <Camera size={32} className="text-white bg-black/50 p-1 rounded-full" />
+                      <CameraIcon
+                        size={32}
+                        className="text-white bg-black/50 p-1 rounded-full"
+                      />
                     </div>
                     <input type="file" className="hidden" />
                   </>
                 )}
               </label>
-
             </div>
 
             {/* Username - Now Directly Below PFP */}
@@ -284,7 +289,8 @@ const UserPage: React.FC = () => {
               }
               onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
             >
-              <button className="text-[var(--follow-text)] whitespace-pre-wrap"
+              <button
+                className="text-[var(--follow-text)] whitespace-pre-wrap"
                 onClick={() => navigate(`/user/${username}/following`)}
               >
                 Following
@@ -312,10 +318,11 @@ const UserPage: React.FC = () => {
               }
               onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
             >
-              <button onClick={() => navigate(`/user/${username}/yourCategories`)}>
+              <button
+                onClick={() => navigate(`/user/${username}/yourCategories`)}
+              >
                 Categories
               </button>
-
             </div>
           </div>
         </div>