UPDATE: Updated styling for quality of life improvements

frontend/src/components/Layout/ListItem.tsx

@@ -91,6 +91,7 @@ const UserListItem: React.FC<UserListItemProps> = ({ title, username, isLive, on
 					}}
 					alt={`user ${username}`}
 					className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
+					style={{ backgroundColor: 'white' }}
 				/>
 				<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">{title}</button>
 

frontend/src/components/Navigation/Sidebar.tsx

@@ -99,6 +99,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
                         alt="profile picture"
                         className="w-[3em] h-[3em] object-cover rounded-full border-[0.15em] border-purple-500 cursor-pointer"
                         onClick={() => navigate(`/user/${username}`)}
+                        style={{ backgroundColor: 'white' }}
                     />
                     <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>
@@ -117,7 +118,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
                         <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
                     </div>
                     <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 mb-5">Streamers</h2>
+                        <h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default mb-5">Streamers</h2>
                         <div className="flex flex-col flex-grow justify-evenly w-full">
                             {followedStreamers.map((streamer) => (
                                 <div
@@ -139,7 +140,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
                     </div>
 
                     <div id="categories-followed" className="flex flex-col flex-grow items-center">
-                        <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">Categories</h2>
+                        <h2 className="border-b-2 border-t-2 w-[125%] text-2xl cursor-default">Categories</h2>
 
                         {/* Followed Categories */}
                         <div id="categories-followed" className="grid grid-cols-1 gap-4 p-4 w-full">

frontend/src/components/Stream/ChatPanel.tsx

@@ -205,7 +205,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId, onViewerCountChange })
 								}}
 								alt="User Avatar"
 								className="w-full h-full object-cover"
-								style={{ width: "2.5em", height: "2.5em" }}
+								style={{ width: "2.5em", height: "2.5em", backgroundColor: 'white'  }}
 							/>
 						</div>
 

frontend/src/pages/Following.tsx

@@ -152,7 +152,6 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
           )};
         </div>
       </div>
-      <Footer />
     </DynamicPageContent >
   );
 };

frontend/src/pages/UserPage.tsx

@@ -161,6 +161,7 @@ const UserPage: React.FC = () => {
 									}}
 									alt={`${profileData.username}'s profile`}
 									className="sm:w-full h-full object-cover rounded-full group-hover:brightness-50 relative z-0 transition-all"
+									style={{ backgroundColor: 'white' }}
 								/>
 
 								{/* If current user is the profile user then allow profile picture swap */}
@@ -268,30 +269,34 @@ const UserPage: React.FC = () => {
 					>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
-                 flex items-center justify-center w-full p-4 content-start"
+         flex items-center justify-center w-full p-4 content-start cursor-pointer"
+							onClick={() => handleNavigation(`/user/${username}/following?tab=streamers`)}
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following?tab=streamers`)}>
+							<button className="text-[var(--follow-text)] whitespace-pre-wrap pointer-events-none">
 								Following
 							</button>
 						</div>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
-                 flex items-center justify-center w-full p-4 content-start"
+         flex items-center justify-center w-full p-4 content-start cursor-pointer"
+							onClick={() => handleNavigation(`/user/${username}/vods`)}
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<button onClick={() => handleNavigation(`/user/${username}/vods`)}>Categories</button>
+							<button className="pointer-events-none">Vods</button>
-
 						</div>
 						<div
 							className="bg-[var(--user-follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300 
-                 flex items-center justify-center w-full p-4 content-start"
+         flex items-center justify-center w-full p-4 content-start cursor-pointer"
+							onClick={() => handleNavigation(`/user/${username}/following?tab=categories`)}
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<button onClick={() => handleNavigation(`/user/${username}/following?tab=categories`)}>Categories</button>
+							<div className="w-full h-full flex items-center justify-center">
+								<button className="w-full h-full">Categories</button>
+							</div>
 						</div>
 					</div>
 				</div>

frontend/src/pages/VideoPage.tsx

@@ -159,6 +159,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 								alt="streamer"
 								className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
 								onClick={() => navigate(`/user/${streamerName}`)}
+								style={{ backgroundColor: 'white' }}
 							/>
 							<button className="text-white font-bold hover:underline mt-[0.5em]" onClick={() => navigate(`/user/${streamerName}`)}>
 								{streamerName}

frontend/src/pages/Vods.tsx

@@ -104,7 +104,6 @@ const Vods: React.FC = () => {
           </div>
         </div>
       </div>
-      <Footer />
     </DynamicPageContent>
   );
 };