From 082b01ef512cf2902dc5e8d158675951151cec0b Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Tue, 4 Mar 2025 00:19:07 +0000
Subject: [PATCH] STYLE: Added Styling for Categories, Vods and Following

---
 frontend/src/pages/Following.tsx | 100 +++++++++++++++----------------
 frontend/src/pages/Vods.tsx      |  90 +++++++++++++++++-----------
 2 files changed, 105 insertions(+), 85 deletions(-)

diff --git a/frontend/src/pages/Following.tsx b/frontend/src/pages/Following.tsx
index b4a43c4..5b9a32c 100644
--- a/frontend/src/pages/Following.tsx
+++ b/frontend/src/pages/Following.tsx
@@ -5,6 +5,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { useFollow } from "../hooks/useFollow";
 import FollowUserButton from "../components/Input/FollowUserButton";
 import FollowButton from "../components/Input/FollowButton";
+import Footer from "../components/Layout/Footer";
 
 interface Streamer {
   user_id: number;
@@ -78,63 +79,62 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
   }, [isLoggedIn]);
 
   return (
-    <DynamicPageContent>
-      <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 ${extraClasses}`}
-      >
-        {activeTab === "streamers" && (
-          <div
-            id="followed-users"
-            className={`grid grid-cols-2 gap-4 p-4 w-full`}>
-            {followedStreamers.map((streamer: any) => (
-              <div
-                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 font-bold transition-colors"
-              /*onClick={() => navigate(`/user/${streamer.username}`)}*/
-              >
-                {streamer.username}
-                <FollowUserButton
-                  user={{
-                    user_id: streamer.user_id,
-                    username: streamer.username,
-                    isFollowing: followingStatus[streamer.user_id] || true,
-                  }}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-
-        {activeTab === "categories" && (
-          <div id="categories-followed" className="grid grid-cols-4 gap-4 p-4 w-full">
-            {followedCategories.map((category) => {
-              return (
+    <DynamicPageContent className="overflow-x-hidden h-full">
+      <div className="flex items-center justify-center mb-20">
+        <div
+          id="follow_page"
+          className={`w-[96vw] h-full bg-slate-50/35 rounded-lg overflow-x-hidden flex flex-col text-center scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
+        >
+          {activeTab === "streamers" && (
+            <div
+              id="followed-users"
+              className={`grid grid-cols-2 gap-4 p-4 w-full`}>
+              {followedStreamers.map((streamer: any) => (
                 <div
-                  key={category.category_id}
-                  className="relative flex flex-col items-center justify-center border border-[--text-color] rounded-lg overflow-hidden hover:shadow-lg transition-all"
-                  onClick={() => navigate(`/category/${category.category_name}`)}
+                  key={`streamer-${streamer.username}`}
+                  className="h-full cursor-pointer bg-black w-full py-2 rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
+                /*onClick={() => navigate(`/user/${streamer.username}`)}*/
                 >
-                  <FollowButton category={category} />
-                  <img
-                    src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
-                    alt={category.category_name}
-                    className="w-full h-28 object-cover"
+                  {streamer.username}
+                  <FollowUserButton
+                    user={{
+                      user_id: streamer.user_id,
+                      username: streamer.username,
+                      isFollowing: followingStatus[streamer.user_id] || true,
+                    }}
                   />
-                  <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>
-        )};
+          {activeTab === "categories" && (
+            <div id="categories-followed" className="grid grid-cols-3 gap-4 p-10 w-full">
+              {followedCategories.map((category) => {
+                return (
+                  <div
+                    key={category.category_id}
+                    className="relative flex flex-col items-center justify-center rounded-lg overflow-hidden hover:shadow-lg transition-all"
+                    onClick={() => navigate(`/category/${category.category_name}`)}
+                  >
+                    <FollowButton category={category} />
+                    <img
+                      src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
+                      alt={category.category_name}
+                      className="w-full h-[200px] 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>
-
-
-
+      <Footer />
     </DynamicPageContent >
   );
 };
diff --git a/frontend/src/pages/Vods.tsx b/frontend/src/pages/Vods.tsx
index 970eaa6..265cf1f 100644
--- a/frontend/src/pages/Vods.tsx
+++ b/frontend/src/pages/Vods.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useAuth } from "../context/AuthContext";
 import { useNavigate, useParams } from "react-router-dom";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import Footer from "../components/Layout/Footer";
 
 interface Vod {
   vod_id: number;
@@ -46,45 +47,64 @@ const Vods: React.FC = () => {
   if (error) return <p className="text-center text-red-500">{error}</p>;
 
   return (
-    <DynamicPageContent>
-      <div className="p-4">
-        <h1 className="text-2xl font-bold mb-4">{username}'s VODs</h1>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {ownedVods.length === 0 ? (
-            <p className="col-span-full text-center">No VODs available.</p>
-          ) : (
-            ownedVods.map((vod) => {
-              const thumbnailUrl = `/stream/${username}/vods/${vod.vod_id}.png`;
+    <DynamicPageContent className="h-full">
+      <div className="mt-[3em] w-screen h-[100vh] max-h-[500px] flex items-center justify-center">
+        <div
+          id="follow_page"
+          className={`w-[96vw] h-full bg-slate-50/35 rounded-lg overflow-x-hidden flex flex-col text-center scrollbar-hide transition-all duration-500 ease-in-out`}
+        >
+          <div className="p-4">
+            <h1 className="text-2xl font-bold mb-4">{username}'s VODs</h1>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {ownedVods.length === 0 ? (
+                <p className="col-span-full text-center">No VODs available.</p>
+              ) : (
+                ownedVods.map((vod) => {
+                  const thumbnailUrl = `/stream/${username}/vods/${vod.vod_id}.png`;
 
-              return (
-                <div
-                  key={vod.vod_id}
-                  className="border rounded-lg p-4 bg-gray-800 text-white cursor-pointer hover:bg-gray-700 transition"
-                  onClick={() => navigate(`/stream/${username}/vods/${vod.vod_id}`)}
-                >
-                  {/* Thumbnail */}
-                  <img
-                    src={thumbnailUrl}
-                    alt={`Thumbnail for ${vod.title}`}
-                    className="w-full h-40 object-cover rounded-md mb-2"
-                    onError={(e) => {
-                      e.currentTarget.onerror = null;
-                      e.currentTarget.src = "/default-thumbnail.png";
-                    }}
-                  />
+                  return (
+                    <div
+                      key={vod.vod_id}
+                      className="mt-5 h-full rounded-lg p-4 bg-gray-800 text-white cursor-pointer hover:bg-gray-700 transition"
+                      onClick={() => navigate(`/stream/${username}/vods/${vod.vod_id}`)}
+                    >
+                      {/* Thumbnail */}
+                      <img
+                        src={thumbnailUrl}
+                        alt={`Thumbnail for ${vod.title}`}
+                        className="w-full h-[200px] object-cover rounded-md mb-2"
+                        onError={(e) => {
+                          e.currentTarget.onerror = null;
+                          e.currentTarget.src = "/default-thumbnail.png";
+                        }}
+                      />
+                      {/* Video Info */}
+                      <div className="flex flex-col space-y-1">
 
-                  {/* Video Info */}
-                  <h2 className="text-lg font-semibold">{vod.title}</h2>
-                  <p className="text-sm">📅 {new Date(vod.datetime).toLocaleString()}</p>
-                  <p className="text-sm">🎮 {vod.category_name}</p>
-                  <p className="text-sm">⏱ {Math.floor(vod.length / 60)} min</p>
-                  <p className="text-sm">👀 {vod.views} views</p>
-                </div>
-              );
-            })
-          )}
+                        {/* Video Title */}
+                        <h2 className="text-white font-bold text-lg">{vod.title}</h2>
+
+                        {/* Channel Name */}
+                        <div className="flex items-center space-x-2">
+                          <p className="text-white text-sm">{username}</p>
+                        </div>
+
+                        {/* Views and Date */}
+                        <div className="flex space-x-2 text-white text-sm">
+                          <p>{vod.views} views</p>
+                          <p>{new Date(vod.datetime).toLocaleString()}</p>
+                        </div>
+                      </div>
+
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
         </div>
       </div>
+      <Footer />
     </DynamicPageContent>
   );
 };