add colour and remove topbar

frontend/src/components/Sidebar.tsx

@@ -1,27 +1,50 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home, User as UserIcon, Video, Radio } from 'lucide-react';
-import type {User} from "../utils/types.ts";
+import { Plus, Film, Home, Video, Radio } from 'lucide-react';
+import {useAuth} from "../utils/AuthContext.tsx";
+import {type CredentialResponse, GoogleLogin} from "@react-oauth/google";
+import {getUser, login, logout} from "../utils/api/users.ts";
 
 type props = {
-    user: User | null;
     className?: string
 }
 
-const Divider = () => <hr className="my-1.5 mx-2 border-gray-100" />;
+const Divider = () => <hr className="my-1.5 mx-2 border-hairline" />;
+
+const Sidebar = ({ className }: props) => {
+    const { user, setUser } = useAuth()
+
+    const handleLogin = (response: CredentialResponse) => {
+        if (!response.credential) {
+            console.error("No credential received from Google login.");
+            return;
+        }
+
+        login(response.credential)
+            .then(() => {
+                getUser().then(userData => setUser(userData))
+            })
+            .catch((error) => {
+                console.error("Login failed:", error);
+            });
+    }
+    const handleLogout = () => {
+        logout()
+            .then(() =>
+                setUser(null)
+            )
+            .catch((error) => {
+                console.error("Logout failed:", error);
+            });
+    }
 
-const Sidebar = ({user, className}: props) => {
     return (
-        <aside className={clsx("h-screen flex flex-col bg-white border-r border-gray-200", className)}>
-            <div className="px-4 pt-5 pb-3">
-                <img
-                    className="w-36 mx-auto"
-                    src="../../public/logo.png"
-                    alt="VoD System Logo"
-                />
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center", className)}>
+            <div className="text-xl pb-4">
+                <h2 className={"font-heading font"}>The VoD System</h2>
             </div>
-            <nav className="flex flex-col flex-1 px-2 pb-4">
-                <div className="flex flex-col gap-0.5">
+            <nav className="flex flex-col flex-1 items-center">
+                <div className="flex flex-col gap-0.5 w-full">
                     <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
                     <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
                 </div>
@@ -39,11 +62,41 @@ const Sidebar = ({user, className}: props) => {
 
                 <div className="flex-1" />
 
-                {user && (
-                    <>
+                {user ? (
+                    <div>
                         <Divider />
-                        <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
-                    </>
+                        <div className={"m-auto"}>
+                            <img
+                                className={"w-8 h-8 rounded-full inline-block"}
+                                src={user.profilePictureUrl}
+                                referrerPolicy="no-referrer"
+                                alt={"Profile Picture"}
+                            />
+
+                            <label className={"font-body text-text-strong"}>
+                                {user.name}
+                            </label>
+
+                            <button
+                                className={"font-body text-muted text-xs hover:bg-hover p-1 rounded"}
+                                onClick={handleLogout}
+                            >
+                                Sign Out
+                            </button>
+
+                        </div>
+                    </div>
+                ) : (
+                    <div>
+                        <Divider />
+                        <GoogleLogin
+                            shape={"pill"}
+                            useOneTap={false}
+                            onSuccess={
+                            (credentialResponse) => handleLogin(credentialResponse
+                            )}
+                        />
+                    </div>
                 )}
             </nav>
         </aside>

frontend/src/components/Topbar.tsx

@@ -1,103 +0,0 @@
-import { Menu, X } from 'lucide-react';
-import { login, logout } from "../utils/api/users.ts";
-import { Dropdown, DropdownItem } from "./Dropdown.tsx";
-import { GoogleLogin } from '@react-oauth/google';
-
-import type { User } from "../utils/types.ts";
-import type { CredentialResponse } from '@react-oauth/google';
-
-import MenuButton from "./buttons/MenuButton.tsx";
-import clsx from "clsx";
-import {useNavigate} from "react-router-dom";
-
-
-type props = {
-    sidebarToggled: boolean;
-    setSidebarToggled: (toggled: boolean) => void;
-    user: User | null;
-    fetchUser: () => void;
-    isStreaming: boolean;
-    className?: string;
-}
-
-const Topbar = ({
-                    sidebarToggled,
-                    setSidebarToggled,
-                    user,
-                    fetchUser,
-                    isStreaming,
-                    className}: props) => {
-
-    const navigate = useNavigate();
-
-    const handleLogin = (response: CredentialResponse) => {
-        if (!response.credential) {
-            console.error("No credential received from Google login.");
-            return;
-        }
-
-        login(response.credential)
-            .then(() => {
-                fetchUser();
-                navigate(0);
-            })
-            .catch((error) => {
-                console.error("Login failed:", error);
-            });
-    }
-
-    const handleLogout = () => {
-        logout()
-            .then(() => {
-                fetchUser();
-                navigate("/");
-            })
-            .catch((error) => {
-                console.error("Logout failed:", error);
-            });
-    }
-
-    return (
-        <div className={clsx(className, "flex justify-between items-center px-4 py-2 bg-white border-b border-gray-200")}>
-            <MenuButton onClick={() => setSidebarToggled(!sidebarToggled)}>
-                {sidebarToggled ? <Menu size={24}/> :  <X size={24}/>}
-            </MenuButton>
-
-            { user ? (
-                <div>
-                    <img
-                        className={"w-8 h-8 rounded-full inline-block"}
-                        src={user.profilePictureUrl}
-                        referrerPolicy="no-referrer"
-                    />
-
-                    <Dropdown label={
-                        <span className="flex items-center gap-1.5">
-                            {user.name}
-                            {isStreaming && (
-                                <span className="relative flex h-2 w-2">
-                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
-                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
-                                </span>
-                            )}
-                        </span>
-                    }>
-                        <DropdownItem item="Profile"
-                                      onClick={() => navigate("/profile")} />
-                        <DropdownItem item="Logout"
-                                      onClick={() => handleLogout()}
-                                      className={"text-red-500 font-medium"} />
-                    </Dropdown>
-                </div>
-            ) :
-            (
-                <GoogleLogin
-                    shape={"pill"}
-                    useOneTap={false}
-                    onSuccess={(credentialResponse) => handleLogin(credentialResponse)} />
-            )}
-        </div>
-    )
-}
-
-export default Topbar;

frontend/src/components/buttons/MenuButton.tsx

@@ -6,7 +6,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
     return (
         <button
-            className={clsx("p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150", className)}
+            className={clsx("p-2 rounded-md font-body text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150", className)}
             {...props}
         />
     );

frontend/src/components/buttons/SidebarButton.tsx

@@ -13,7 +13,11 @@ const SidebarButton = ({url, logo, label}: Props) => {
 
     return (
         <Link className="w-full" to={url}>
-            <MenuButton className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm font-medium rounded-md ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-600"}`}>
+            <MenuButton className={`flex items-center gap-2.5 w-full text-sm font-body 
+            ${isActive ? 
+                "bg-card text-text-strong font-medium shadow-sm"
+                : 
+                "text-text-primary"}`}>
                 {logo}{label}
             </MenuButton>
         </Link>