FIX: General fixes and update to HomePage

frontend/src/components/Checkout/CheckoutForm.tsx

@@ -21,7 +21,7 @@ export const Return: React.FC = () => {
     const sessionId = urlParams.get("session_id");
 
     if (sessionId) {
-      fetch(`${API_URL}/session-status?session_id=${sessionId}`)
+      fetch(`/api/session-status?session_id=${sessionId}`)
         .then((res) => res.json())
         .then((data) => {
           setStatus(data.status);
@@ -56,7 +56,7 @@ interface CheckoutFormProps {
 
 const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose }) => {
   const fetchClientSecret = () => {
-    return fetch(`${API_URL}/create-checkout-session`, {
+    return fetch(`/api/create-checkout-session`, {
       method: "POST",
     })
       .then((res) => res.json())

frontend/src/components/Layout/ListRow.tsx

@@ -19,40 +19,6 @@ interface ListRowProps {
   onClick: (itemId: number, itemName: string) => void;
 }
 
-// Individual list entry component
-const ListItem: React.FC<ListItemProps> = ({
-  type,
-  title,
-  streamer,
-  viewers,
-  thumbnail,
-  onItemClick,
-}) => {
-  return (
-    <div
-      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
-      onClick={onItemClick}
-    >
-      <div className="relative w-full pt-[56.25%] ">
-        {thumbnail ? (
-          <img
-            src={thumbnail}
-            alt={title}
-            className="absolute top-0 left-0 w-full h-full object-cover"
-          />
-        ) : (
-          <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
-        )}
-      </div>
-      <div className="p-3 bg-white">
-        <h3 className="font-semibold text-lg">{title}</h3>
-        {type === "stream" && <p className="text-red-600">{streamer}</p>}
-        <p className="text-sm text-white">{viewers} viewers</p>
-      </div>
-    </div>
-  );
-};
-
 // Row of entries
 const ListRow: React.FC<ListRowProps> = ({
   title,
@@ -62,10 +28,10 @@ const ListRow: React.FC<ListRowProps> = ({
   extraClasses="",
 }) => {
   return (
-    <div className={`flex flex-col space-y-4 py-6 px-5 mx-2 mt-5 rounded-md ${extraClasses}`}>
+    <div className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}>
       <div className="space-y-1">
-        <h2 className="text-2xl font-bold text-white">{title}</h2>
-        <p className="text-white">{description}</p>
+        <h2 className="text-2xl font-bold">{title}</h2>
+        <p>{description}</p>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {items.map((item) => (
@@ -85,4 +51,38 @@ const ListRow: React.FC<ListRowProps> = ({
   );
 };
 
+// Individual list entry component
+const ListItem: React.FC<ListItemProps> = ({
+  type,
+  title,
+  streamer,
+  viewers,
+  thumbnail,
+  onItemClick,
+}) => {
+  return (
+    <div
+      className="flex flex-col bg-purple-900 rounded-lg overflow-hidden cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all"
+      onClick={onItemClick}
+    >
+      <div className="relative w-full pt-[56.25%] ">
+        {thumbnail ? (
+          <img
+            src={thumbnail}
+            alt={title}
+            className="absolute top-0 left-0 w-full h-full object-cover"
+          />
+        ) : (
+          <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
+        )}
+      </div>
+      <div className="p-3">
+        <h3 className="font-semibold text-lg text-center">{title}</h3>
+        {type === "stream" && <p className="font-bold">{streamer}</p>}
+        <p className="text-sm text-gray-300">{viewers} viewers</p>
+      </div>
+    </div>
+  );
+};
+
 export default ListRow;

frontend/src/components/Layout/Navbar.tsx

@@ -23,6 +23,7 @@ const Navbar: React.FC<NavbarProps> = ({
   const [showAuthModal, setShowAuthModal] = useState(false);
   const { isLoggedIn } = useAuth();
   const [showSideBar, setShowSideBar] = useState(false);
+  
   useEffect(() => {
     if (showAuthModal) {
       document.body.style.overflow = "hidden";

frontend/src/components/Stream/StreamerRoute.tsx

@@ -12,7 +12,7 @@ const StreamerRoute: React.FC = () => {
   useEffect(() => {
     const checkStreamStatus = async () => {
       try {
-        const response = await fetch(`/api/streamer/${streamerName}/status`);
+        const response = await fetch(`/api/user/${streamerName}/status`);
         const data = await response.json();
         setIsLive(Boolean(data.is_live));
         setStreamId(data.most_recent_stream);
@@ -44,7 +44,7 @@ const StreamerRoute: React.FC = () => {
 
   // streamId=0 is a special case for the streamer's latest stream
   return isLive ? (
-    <VideoPage streamId={streamId} />
+    <VideoPage streamerId={streamId} />
   ) : streamerName ? (
     <UserPage />
   ) : (