From cba900f8e0c278553b8fe7b1d250250d27f2a238 Mon Sep 17 00:00:00 2001
From: Chris-1010 <122332721@umail.ucc.ie>
Date: Thu, 27 Feb 2025 12:28:44 +0000
Subject: [PATCH] REFACTOR: Align icon imports; REFACTOR: Remove obsolete
 `EditButton` component

---
 frontend/src/components/Auth/AuthModal.tsx    |   2 +-
 frontend/src/components/Auth/LoginForm.tsx    |   2 +-
 frontend/src/components/Input/Button.tsx      |  17 --
 frontend/src/components/Input/SearchBar.tsx   |   2 +-
 frontend/src/components/Layout/Footer.tsx     |   2 +-
 frontend/src/components/Layout/ListRow.tsx    |   4 +-
 frontend/src/components/Navigation/Navbar.tsx |   6 +-
 .../src/components/Navigation/Sidebar.tsx     |   2 +-
 .../src/components/Settings/ThemeSetting.tsx  |  12 +-
 frontend/src/components/Stream/ChatPanel.tsx  |   4 +-
 frontend/src/pages/FollowedCategories.tsx     |   8 +-
 frontend/src/pages/Following.tsx              | 220 ++++++++++--------
 frontend/src/pages/StreamDashboardPage.tsx    |   4 +-
 frontend/src/pages/UserPage.tsx               |  37 +--
 14 files changed, 162 insertions(+), 160 deletions(-)

diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index 8b10573..7188c94 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ToggleButton } from "../Input/Button";
-import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
+import { LogInIcon, UserIcon } from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
 import ForgotPasswordForm from "./ForgotPasswordForm";
diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx
index 0a9d88b..23757aa 100644
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Input from "../Input/Input";
-import Button, { ToggleButton } from "../Input/Button";
+import Button from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
 import GoogleLogin from "./OAuth";
 import { CircleHelp as ForgotIcon } from "lucide-react";
diff --git a/frontend/src/components/Input/Button.tsx b/frontend/src/components/Input/Button.tsx
index a4bee8b..6e64a2c 100644
--- a/frontend/src/components/Input/Button.tsx
+++ b/frontend/src/components/Input/Button.tsx
@@ -23,23 +23,6 @@ const Button: React.FC<ButtonProps> = ({
   );
 };
 
-interface EditButtonProps extends ButtonProps {}
-
-export const EditButton: React.FC<EditButtonProps> = ({
-  children = "",
-  extraClasses = "",
-  onClick,
-}) => {
-  return (
-    <button
-      className={`${extraClasses} p-[0.5em] bg-yellow-500 hover:bg-black rounded-[3rem] border-2 border-white shadow-lg transition-all duration-300`}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
-};
-
 interface ToggleButtonProps extends ButtonProps {
   toggled?: boolean;
 }
diff --git a/frontend/src/components/Input/SearchBar.tsx b/frontend/src/components/Input/SearchBar.tsx
index be397c6..708888d 100644
--- a/frontend/src/components/Input/SearchBar.tsx
+++ b/frontend/src/components/Input/SearchBar.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Input from "./Input";
-import { Search as SearchIcon } from "lucide-react";
+import { SearchIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 interface SearchBarProps {
diff --git a/frontend/src/components/Layout/Footer.tsx b/frontend/src/components/Layout/Footer.tsx
index 529685e..9eff8cb 100644
--- a/frontend/src/components/Layout/Footer.tsx
+++ b/frontend/src/components/Layout/Footer.tsx
@@ -1,4 +1,4 @@
-import { Mail as MailIcon } from "lucide-react";
+import { MailIcon } from "lucide-react";
 import { useState } from "react";
 
 const Footer = () => {
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index 0ae9e81..f61293a 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -1,6 +1,6 @@
 import {
-  ArrowLeft as ArrowLeftIcon,
-  ArrowRight as ArrowRightIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
 } from "lucide-react";
 import React, {
   forwardRef,
diff --git a/frontend/src/components/Navigation/Navbar.tsx b/frontend/src/components/Navigation/Navbar.tsx
index 85ba348..3e91eb6 100644
--- a/frontend/src/components/Navigation/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar.tsx
@@ -2,9 +2,9 @@ import React, { useEffect } from "react";
 import Logo from "../Layout/Logo";
 import Button, { ToggleButton } from "../Input/Button";
 import {
-  LogIn as LogInIcon,
-  LogOut as LogOutIcon,
-  Settings as SettingsIcon,
+  LogInIcon,
+  LogOutIcon,
+  SettingsIcon,
   Radio as LiveIcon,
 } from "lucide-react";
 import SearchBar from "../Input/SearchBar";
diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx
index 67bc78d..da7e580 100644
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Sidebar as SidebarIcon } from "lucide-react";
+import { SidebarIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
 import { useSidebar } from "../../context/SidebarContext";
diff --git a/frontend/src/components/Settings/ThemeSetting.tsx b/frontend/src/components/Settings/ThemeSetting.tsx
index ef9fb16..69440c2 100644
--- a/frontend/src/components/Settings/ThemeSetting.tsx
+++ b/frontend/src/components/Settings/ThemeSetting.tsx
@@ -1,38 +1,38 @@
 import React from "react";
-import { Sun, Moon, Droplet, Leaf, Flame } from "lucide-react";
+import { SunIcon, MoonIcon, DropletIcon, LeafIcon, FlameIcon } from "lucide-react";
 import { useTheme } from "../../context/ThemeContext";
 
 const themeConfig = {
   light: {
-    icon: Sun,
+    icon: SunIcon,
     color: "text-yellow-400",
     background: "bg-white",
     hoverBg: "hover:bg-gray-100",
     label: "Light Theme",
   },
   dark: {
-    icon: Moon,
+    icon: MoonIcon,
     color: "text-white",
     background: "bg-gray-800",
     hoverBg: "hover:bg-gray-700",
     label: "Dark Theme",
   },
   blue: {
-    icon: Droplet,
+    icon: DropletIcon,
     color: "text-blue-500",
     background: "bg-blue-50",
     hoverBg: "hover:bg-blue-100",
     label: "Blue Theme",
   },
   green: {
-    icon: Leaf,
+    icon: LeafIcon,
     color: "text-green-500",
     background: "bg-green-50",
     hoverBg: "hover:bg-green-100",
     label: "Green Theme",
   },
   orange: {
-    icon: Flame,
+    icon: FlameIcon,
     color: "text-orange-500",
     background: "bg-orange-50",
     hoverBg: "hover:bg-orange-100",
diff --git a/frontend/src/components/Stream/ChatPanel.tsx b/frontend/src/components/Stream/ChatPanel.tsx
index 526e5e4..13d8149 100644
--- a/frontend/src/components/Stream/ChatPanel.tsx
+++ b/frontend/src/components/Stream/ChatPanel.tsx
@@ -6,7 +6,7 @@ import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
 import { useChat } from "../../context/ChatContext";
-import { ArrowLeftFromLineIcon, ArrowRightFromLine } from "lucide-react";
+import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon } from "lucide-react";
 
 interface ChatMessage {
   chatter_username: string;
@@ -149,7 +149,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
         onClick={toggleChat}
         className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[3.3vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[50] duration-[0.3s] transition-all`}
       >
-        {showChat ? <ArrowRightFromLine /> : <ArrowLeftFromLineIcon />}
+        {showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
 
         <small className={`absolute ${showChat ? "right-0 group-hover:-right-[4vw]" : "left-0 group-hover:-left-[4vw]"} p-1 rounded-md group-hover:bg-white/10 w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
           Press C
diff --git a/frontend/src/pages/FollowedCategories.tsx b/frontend/src/pages/FollowedCategories.tsx
index 782e27d..73d4d71 100644
--- a/frontend/src/pages/FollowedCategories.tsx
+++ b/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>
 
diff --git a/frontend/src/pages/Following.tsx b/frontend/src/pages/Following.tsx
index 012b30e..0719523 100644
--- a/frontend/src/pages/Following.tsx
+++ b/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;
diff --git a/frontend/src/pages/StreamDashboardPage.tsx b/frontend/src/pages/StreamDashboardPage.tsx
index e2929b8..8afddf8 100644
--- a/frontend/src/pages/StreamDashboardPage.tsx
+++ b/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>
diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx
index da3f289..ef1957f 100644
--- a/frontend/src/pages/UserPage.tsx
+++ b/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>