- Added Chat frontend, interfaces with backend;

- Updated styles for VideoPage;
- Added StreamerRoute component;
- Remove unused Login and Signup pages;
- Update to Navbar and Logo components for new structure on different pages;
- Update to auth flow to display error messages to user;

frontend/src/components/Layout/Logo.tsx

@@ -1,16 +1,20 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const Logo: React.FC = () => {
+interface LogoProps {
+  variant?: "home" | "default";
+}
+
+const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
   const gradient =
     "bg-gradient-to-br from-yellow-400 via-red-500 to-indigo-500 text-transparent bg-clip-text group-hover:mx-1 transition-all";
   return (
     <Link to="/" className="cursor-pointer">
-      <div className="logo group py-3 text-center text-[12vh] font-bold hover:scale-110 transition-all">
+      <div id="logo" className={`group py-3 text-center font-bold hover:scale-110 transition-all ${variant === "home" ? "text-[12vh]" : "text-[4vh]"}`}>
         <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
           Go on, have a...
         </h6>
-        <div className="flex w-fit min-w-[30vw] justify-evenly leading-none transition-all">
+        <div className="flex w-fit min-w-[30vw] justify-center leading-none transition-all">
           <span className={gradient}>G</span>
           <span className={gradient}>A</span>
           <span className={gradient}>N</span>

frontend/src/components/Layout/Navbar.tsx

@@ -13,7 +13,11 @@ import Input from "./Input";
 import AuthModal from "../Auth/AuthModal";
 import { useAuth } from "../../context/AuthContext";
 
-const Navbar: React.FC = () => {
+interface NavbarProps {
+  variant?: "home" | "default";
+}
+
+const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   const [showAuthModal, setShowAuthModal] = useState(false);
   const { isLoggedIn } = useAuth();
 
@@ -39,8 +43,8 @@ const Navbar: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col justify-around items-center h-[45vh]">
-      <Logo />
+    <div id="navbar" className={`flex justify-center items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}>
+      <Logo variant={variant} />
       <Button
         extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap"
         onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
@@ -69,13 +73,13 @@ const Navbar: React.FC = () => {
 
       <Button
         extraClasses="absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap"
-        onClick={() => console.log("Settings")}
+        onClick={() => console.log("Settings - TODO")}
       >
         <SettingsIcon className="h-15 w-15 mr-1" />
         Quick Settings
       </Button>
 
-      <div className="search-bar flex items-center">
+      <div id="search-bar" className="flex items-center">
         <Input
           type="text"
           placeholder="Search..."

frontend/src/components/Layout/StreamListRow.tsx

@@ -17,11 +17,14 @@ interface StreamListRowProps {
   title: string;
   description: string;
   streams: StreamItem[];
-  onStreamClick?: (streamId: string) => void;
+  onStreamClick: (streamId: number, streamerName: string) => void;
 }
 
 // Individual stream entry component
-const StreamListEntry: React.FC<StreamListEntryProps> = ({ stream, onClick }) => {
+const StreamListEntry: React.FC<StreamListEntryProps> = ({
+  stream,
+  onClick,
+}) => {
   return (
     <div
       className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
@@ -30,7 +33,7 @@ const StreamListEntry: React.FC<StreamListEntryProps> = ({ stream, onClick }) =>
       <div className="relative w-full pt-[56.25%]">
         {stream.thumbnail ? (
           <img
-            src={`images/`+stream.thumbnail}
+            src={`images/` + stream.thumbnail}
             alt={stream.title}
             className="absolute top-0 left-0 w-full h-full object-cover"
           />
@@ -65,7 +68,7 @@ const StreamListRow: React.FC<StreamListRowProps> = ({
           <StreamListEntry
             key={stream.id}
             stream={stream}
-            onClick={() => onStreamClick?.(stream.id)}
+            onClick={() => onStreamClick?.(stream.id, stream.streamer)}
           />
         ))}
       </div>