add colour and remove topbar

frontend/index.html

@@ -6,7 +6,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Newsreader&family=IBM+Plex+Sans&family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@100..900&family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>The VoD System</title>

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>

frontend/src/index.css

@@ -2,25 +2,23 @@
 @plugin "flowbite-react/plugin/tailwindcss";
 
 @theme {
+    /* Fonts */
     --font-heading: "Newsreader", serif;
     --font-body: "IBM Plex Sans", sans-serif;
     --font-data: "IBM Plex Mono", monospace;
 
-    /* Breakpoints */
-    --breakpoint-3xl: 1920px;
+    /* Colours */
+    --color-background: #F7F4EE;
+    --color-sidebar: #F2EEE6;
+    --color-card: #FDFBF7;
 
-    --color-primary: oklch(0.55 0.21 254);
-    --color-primary-pressed: oklch(0.45 0.21 254);
-    --color-secondary: oklch(0.94 0.01 250);
-    --color-accent: oklch(0.68 0.20 288);
-    --color-text: oklch(0.17 0.01 270);
-    --color-background: oklch(0.97 0.005 250);
-    --color-surface: oklch(1 0 0);
-    --color-border: oklch(0.91 0.008 250);
-
-    /* Easing */
-    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
-    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+    /* Colour Fonts */
+    --color-text-primary: #2B2620;
+    --color-text-strong: #35302A;
+    --color-faint-mono: #A79C8E;
+    --color-muted: #9A9084;
+    --color-hover: #E7E0D2;
+    --color-hairline: #F0EBE2;
 }
 
 :root {
@@ -36,11 +34,3 @@
 body {
     background-color: var(--color-background);
 }
-
-#range-slider .range-slider__range {
-    background: var(--color-primary);
-}
-
-#range-slider .range-slider__thumb {
-    background: var(--color-primary);
-}

frontend/src/layouts/MainLayout.tsx

@@ -1,50 +1,15 @@
 // layout/MainLayout.jsx
 import Sidebar from '../components/Sidebar'
-import Topbar from '../components/Topbar'
 import { Outlet } from 'react-router-dom';
-import {useEffect, useState} from "react";
-import type {User} from "../utils/types";
-import { getUser } from "../utils/api/users";
-import { getStreamStatus } from "../utils/api/stream";
+import { useState } from "react";
 
 const MainLayout = () => {
-    const [sidebarToggled, setSidebarToggled] = useState(false);
-    const [user, setUser] = useState<null | User>(null);
-    const [isStreaming, setIsStreaming] = useState(false);
-
-    const fetchUser = async () => {
-        try {
-            const userData = await getUser();
-            setUser(userData);
-        } catch (error) {
-            console.error('Failed to fetch user:', error);
-        }
-    };
-
-    useEffect(() => {
-        fetchUser();
-    }, []);
-
-    useEffect(() => {
-        if (!user) return;
-        const poll = () => getStreamStatus().then(setIsStreaming).catch(() => {});
-        poll();
-        const interval = setInterval(poll, 10000);
-        return () => clearInterval(interval);
-    }, [user]);
+    const [sidebarToggled] = useState(false);
 
     return (
         <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
-                user={user}
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
-            <Topbar
-                className={"transition-all duration-300"}
-                sidebarToggled={sidebarToggled}
-                setSidebarToggled={setSidebarToggled}
-                user={user}
-                fetchUser={fetchUser}
-                isStreaming={isStreaming}/>
             <div className="overflow-auto bg-background">
                 <Outlet />
             </div>

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import './index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
+import {AuthProvider} from "./utils/AuthContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+      <AuthProvider>
+          <App />
+      </AuthProvider>
   </StrictMode>,
 )

frontend/src/pages/Home.tsx

@@ -1,78 +1,15 @@
-import { Upload, Scissors, SlidersHorizontal, Radio, LayoutGrid, Play } from "lucide-react";
-
-const features = [
-    {
-        icon: Upload,
-        title: "Upload & compress",
-        description: "Drop in a video file, set your clip range and export settings, then compress.",
-    },
-    {
-        icon: Scissors,
-        title: "Trim",
-        description: "Set start and end points with a range slider. Preview as you go.",
-    },
-    {
-        icon: SlidersHorizontal,
-        title: "Export settings",
-        description: "Choose resolution, frame rate, and an optional file size cap.",
-    },
-    {
-        icon: Radio,
-        title: "RTMP streaming",
-        description: "Point OBS at your stream key and go live. Find the key in your profile.",
-    },
-    {
-        icon: LayoutGrid,
-        title: "Clip library",
-        description: "Browse all your clips. Watch, rename, edit the description, or delete.",
-    },
-    {
-        icon: Play,
-        title: "Built-in player",
-        description: "Scrub, adjust volume, go fullscreen. Runs in the browser.",
-    },
-];
-
 const Home = () => {
+    const now = new Date();
+
+    const formatted: string = new Intl.DateTimeFormat('en-IE', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short',
+    }).format(now);
+
     return (
         <div className="flex flex-col items-center px-8 py-12 min-h-full">
-            {/* Hero */}
-            <div className="flex flex-col items-center text-center max-w-2xl mb-14">
-                <img
-                    src="/logo.png"
-                    alt="VoD System Logo"
-                    className="h-24 mb-6 object-contain"
-                />
-                <h1 className="text-4xl font-heading text-gray-900 mb-3 leading-tight">
-                    A home for your clips.
-                </h1>
-                <p className="text-body text-gray-500 leading-relaxed">
-                    Upload, trim, and export video clips. Stream live if you need to.
-                </p>
-            </div>
-
-            {/* Feature grid */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-4xl mb-10">
-                {features.map(({ icon: Icon, title, description }) => (
-                    <div
-                        key={title}
-                        className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-3 shadow-sm"
-                    >
-                        <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                            <Icon size={18} className="text-primary" />
-                        </div>
-                        <div>
-                            <p className="font-semibold text-gray-900 text-sm mb-1">{title}</p>
-                            <p className="text-sm text-gray-500 leading-relaxed">{description}</p>
-                        </div>
-                    </div>
-                ))}
-            </div>
-
-            {/* Format note */}
-            <p className="text-xs text-gray-400">
-                Supports MP4, MOV, WebM, and OGG.
-            </p>
+            <p className={"font-data text-faint-mono"}>{formatted}</p>
         </div>
     );
 };

frontend/src/utils/AuthContext.tsx

@@ -0,0 +1,42 @@
+import React, {createContext, useContext, useState, useEffect, type ReactNode} from 'react';
+import { getUser } from "./api/users.ts";
+import type {User} from "./types.ts";
+
+// for what the Auth object will look like
+interface AuthContextValue {
+    user: User | null;
+    setUser: React.Dispatch<React.SetStateAction<User | null>>;
+    loading: boolean;
+}
+
+interface AuthProviderProps {
+    children: ReactNode;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export function AuthProvider({children}: AuthProviderProps) {
+    const [user, setUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        getUser()
+            .then(setUser)
+            .catch(() => setUser(null))
+            .finally(() => setLoading(false));
+    }, []);
+
+    return (
+        <AuthContext.Provider value={{ user, setUser, loading }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth(): AuthContextValue {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}