rename Box to Card

add cringe home message
add titles to homepage
2026-07-29 22:22:41 +01:00 · 2026-07-29 21:28:34 +01:00 · 2026-07-29 21:23:34 +01:00 · 2026-07-29 20:53:13 +01:00 · 2026-07-29 20:20:26 +01:00 · 2026-07-29 19:14:20 +01:00
21 changed files with 311 additions and 371 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,8 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/small_icon.png" />
    <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:wght@100;200;300;400;500;600;700&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>Vite + React + TS</title>
+    <title>The VoD System</title>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +0,0 @@
 #root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
 }
 .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
 }
 .logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
 }
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
 }
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
 }
 .card {
  padding: 2em;
 }
 .read-the-docs {
  color: #888;
 }
--- a/frontend/src/components/Box.tsx
+++ b/frontend/src/components/Box.tsx
@@ -1,14 +0,0 @@
 import clsx from "clsx";
 type Props = {
    children: React.ReactNode;
    className?: string;
 };
 const Box = ({ children, className }: Props) => (
    <div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
        {children}
    </div>
 );
 export default Box;
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -0,0 +1,14 @@
 import clsx from "clsx";
 type Props = {
    children: React.ReactNode;
    className?: string;
 };
 const Card = ({ children, className }: Props) => (
    <div className={clsx("bg-card shadow-md rounded-lg", className)}>
        {children}
    </div>
 );
 export default Card;
--- a/frontend/src/components/NoAccessPage.tsx
+++ b/frontend/src/components/NoAccessPage.tsx
@@ -0,0 +1,17 @@
 import {Lock} from "lucide-react";
 const NoAccessPage = () => {
    return (
        <div className="w-full min-h-screen flex flex-col items-center justify-center gap-3 text-center px-6">
            <Lock className="w-8 h-8 text-faint-mono/60 mb-1" strokeWidth={1.5} />
            <h2 className="font-heading text-2xl md:text-3xl text-faint-mono">
                Log in to see this page
            </h2>
            <p className="text-sm text-faint-mono/70 max-w-xs">
                Sign in with Google to view your clips and account details.
            </p>
        </div>
    );
 }
 export default NoAccessPage;
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,50 +1,106 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home, User as UserIcon, Video, Radio } from 'lucide-react';
+import { Plus, Film, Home, Video, Radio } from 'lucide-react';
-import type {User} from "../utils/types.ts";
+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="w-full my-1.5 mx-2 border-hover" />;
 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)}>
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
-            <div className="px-4 pt-5 pb-3">
+            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
-                <img
+
-                    className="w-36 mx-auto"
+            <nav className="flex flex-col flex-1 items-center">
-                    src="../../public/logo.png"
+                <Divider />
-                    alt="VoD System Logo"
+                <div className="flex flex-col gap-0.5 w-full">
                />
            </div>
            <nav className="flex flex-col flex-1 px-2 pb-4">
                <div className="flex flex-col gap-0.5">
                    <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
-                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Upload" />
                </div>
                <Divider />
                {user && (
-                    <>
+                    <div className="flex flex-col gap-0.5 w-full">
-                        <Divider />
+                        <div>
                        <div className="flex flex-col gap-0.5">
                            <SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
                            <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
                            <SidebarButton url="/my-vods" logo={<Video size={18}/>} label="VoDs" />
                        </div>
-                    </>
+                    </div>
                )}
                <div className="flex-1" />
-                {user && (
+                <div className={"p-2"}>
-                    <>
+                    {user ? (
                        <div>
                            <Divider />
-                        <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
+                            <div className={"flex gap-2 items-center pt-1"}>
-                    </>
+                                <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 text-sm"}>
                                    {user.name}
                                </label>
                                <button
                                    className={"font-body text-muted text-xs hover:bg-hover p-1 pt-1.5 rounded"}
                                    onClick={handleLogout}
                                >
                                    Sign Out
                                </button>
                            </div>
                        </div>
                    ) : (
                        <div>
                            <Divider />
                            <GoogleLogin
                                shape={"pill"}
                                useOneTap={false}
                                onSuccess={
                                (credentialResponse) => handleLogin(credentialResponse
                                )}
                            />
                        </div>
                    )}
                </div>
            </nav>
        </aside>
    );
--- a/frontend/src/components/Topbar.tsx
+++ b/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;
--- a/frontend/src/components/buttons/MenuButton.tsx
+++ b/frontend/src/components/buttons/MenuButton.tsx
@@ -1,15 +0,0 @@
 import React from "react";
 import clsx from "clsx";
 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)}
            {...props}
        />
    );
 };
 export default MenuButton;
--- a/frontend/src/components/buttons/SidebarButton.tsx
+++ b/frontend/src/components/buttons/SidebarButton.tsx
@@ -1,5 +1,5 @@
 import MenuButton from "./MenuButton.tsx";
 import { Link, useLocation } from "react-router-dom";
 import React from "react";
 type Props = {
    url: string;
@@ -13,9 +13,15 @@ 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"}`}>
+            <button className={`flex items-center gap-2.5 w-full text-sm 
            font-body p-2 hover:bg-hover hover:text-text-strong
            rounded-md 
            ${isActive ? 
                "bg-card text-text-strong font-medium shadow-sm"
                : 
                "text-text-primary"}`}>
                {logo}{label}
-            </MenuButton>
+            </button>
        </Link>
    )
 }
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,33 +1,27 @@
@import "tailwindcss";
@plugin "flowbite-react/plugin/tailwindcss";
@source "../.flowbite-react/class-list.json";
@theme {
-    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    /* Fonts */
    /*--font-heading: "Newsreader", serif; */
    --font-body: "IBM Plex Sans", sans-serif;
    --font-data: "IBM Plex Mono", monospace;
-    /* Breakpoints */
+    /* Colours */
-    --breakpoint-3xl: 1920px;
+    --color-background: #F7F4EE;
    --color-sidebar: #F2EEE6;
    --color-card: #FDFBF7;
    --color-accent: #A85A38;
    --color-accent-hover: #94492A;
    --color-live-card: #F0EBE1;
-    --color-primary: oklch(0.55 0.21 254);
+    /* Colour Fonts */
-    --color-primary-pressed: oklch(0.45 0.21 254);
+    --color-text-primary: #2B2620;
-    --color-secondary: oklch(0.94 0.01 250);
+    --color-text-strong: #35302A;
-    --color-accent: oklch(0.68 0.20 288);
+    --color-faint-mono: #A79C8E;
-    --color-text: oklch(0.17 0.01 270);
+    --color-muted: #9A9084;
-    --color-background: oklch(0.97 0.005 250);
+    --color-hover: #E7E0D2;
-    --color-surface: oklch(1 0 0);
+    --color-hairline: #F0EBE2;
    --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);
 }
 #range-slider .range-slider__range {
    background: var(--color-primary);
 }
 #range-slider .range-slider__thumb {
    background: var(--color-primary);
 }
 :root {
@@ -42,4 +36,10 @@
 body {
    background-color: var(--color-background);
    font-family: "IBM Plex Sans", sans-serif;
 }
@utility font-heading {
    font-family: "Newsreader", serif;
    font-weight: 400;
 }
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -1,51 +1,16 @@
 // 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 { useState } from "react";
 import type {User} from "../utils/types";
 import { getUser } from "../utils/api/users";
 import { getStreamStatus } from "../utils/api/stream";
 const MainLayout = () => {
-    const [sidebarToggled, setSidebarToggled] = useState(false);
+    const [sidebarToggled] = 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]);
    return (
-        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
+        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[280px_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
+            <div>
                className={"transition-all duration-300"}
                sidebarToggled={sidebarToggled}
                setSidebarToggled={setSidebarToggled}
                user={user}
                fetchUser={fetchUser}
                isStreaming={isStreaming}/>
            <div className="overflow-auto bg-background">
                <Outlet />
            </div>
        </div>
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,13 @@
 import './index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import {AuthProvider} from "./utils/AuthContext.tsx";
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <AuthProvider>
          <App />
      </AuthProvider>
  </StrictMode>,
 )
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -8,7 +8,7 @@ import ExportWidget from "../components/video/ExportWidget.tsx";
 import { compress } from "../utils/api/media"
 import { getJob } from "../utils/api/jobs"
 import type { VideoMetadata } from "../utils/types.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";
 const API_URL = import.meta.env.VITE_API_URL;
@@ -132,13 +132,13 @@ const ClipEdit = () => {
                onLoadedMetadata={handleVideoMetadataLoaded}
            />
-            <Box className={"w-4/5 h-full m-auto"}>
+            <Card className={"w-4/5 h-full m-auto"}>
                <MetadataBox setMetadata={setOutputMetadata} />
                <ConfigBox setMetadata={setOutputMetadata} />
-            </Box>
+            </Card>
            {metadata &&
-                <Box className={"mt-4 p-5"}>
+                <Card className={"mt-4 p-5"}>
                    <Playbar
                        video={videoRef.current}
                        videoMetadata={metadata}
@@ -166,10 +166,10 @@ const ClipEdit = () => {
                            {error}
                        </div>
                    )}
-                </Box>
+                </Card>
            }
-            <Box className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
+            <Card className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
                <ExportWidget
                    dataSend={sendData}
                    handleDownload={handleDownload}
@@ -177,7 +177,7 @@ const ClipEdit = () => {
                    progress={progress}
                    uploading={uploading}
                />
-            </Box>
+            </Card>
        </div>
    );
 };
--- a/frontend/src/pages/ClipUpload.tsx
+++ b/frontend/src/pages/ClipUpload.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import BlueButton from "../components/buttons/BlueButton.tsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 const ClipUpload = () => {
    const [file, setFile] = useState<File | null>(null);
@@ -18,7 +18,7 @@ const ClipUpload = () => {
    return (
        <div className="flex items-start justify-center p-8 min-h-full">
-            <Box className="flex flex-col gap-4 p-6 w-full max-w-md">
+            <Card className="flex flex-col gap-4 p-6 w-full max-w-md">
                <h1 className="text-lg font-semibold text-gray-900">Upload Clip</h1>
                <input
@@ -34,7 +34,7 @@ const ClipUpload = () => {
                <BlueButton onClick={press}>Upload</BlueButton>
                {error && <p className="text-sm text-red-500 text-center">{error}</p>}
-            </Box>
+            </Card>
        </div>
    )
 };
--- a/frontend/src/pages/EditClip.tsx
+++ b/frontend/src/pages/EditClip.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getClipById, patchClip } from "../utils/api/clips.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditClip = () => {
            {loading ? (
                <div className="text-gray-400 text-sm">Loading...</div>
            ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                    <div className="flex flex-col gap-1.5">
                        <label className="text-sm font-medium text-gray-700">Title</label>
                        <input
@@ -99,7 +99,7 @@ const EditClip = () => {
                            Cancel
                        </button>
                    </div>
-                </Box>
+                </Card>
            )}
        </div>
    );
--- a/frontend/src/pages/EditVod.tsx
+++ b/frontend/src/pages/EditVod.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getVodById, patchVod } from "../utils/api/vods.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditVod = () => {
            {loading ? (
                <div className="text-gray-400 text-sm">Loading...</div>
            ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                    <div className="flex flex-col gap-1.5">
                        <label className="text-sm font-medium text-gray-700">Title</label>
                        <input
@@ -99,7 +99,7 @@ const EditVod = () => {
                            Cancel
                        </button>
                    </div>
-                </Box>
+                </Card>
            )}
        </div>
    );
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,78 +1,84 @@
-import { Upload, Scissors, SlidersHorizontal, Radio, LayoutGrid, Play } from "lucide-react";
+import {useAuth} from "../utils/AuthContext.tsx";
 import NoAccessPage from "../components/NoAccessPage.tsx";
 import {Link} from "react-router-dom";
 import Card from "../components/Card.tsx";
-const features = [
+type TimeOfDay = "morning" | "afternoon" | "evening" | "night";
-    {
+
-        icon: Upload,
+function getTimeOfDay(date: Date = new Date()): TimeOfDay {
-        title: "Upload & compress",
+    const hour = date.getHours();
-        description: "Drop in a video file, set your clip range and export settings, then compress.",
+
-    },
+    if (hour >= 5 && hour < 12) return "morning";
-    {
+    if (hour >= 12 && hour < 17) return "afternoon";
-        icon: Scissors,
+    if (hour >= 17 && hour < 22) return "evening";
-        title: "Trim",
+    return "night";
-        description: "Set start and end points with a range slider. Preview as you go.",
+}
-    },
+
-    {
+function getGreetingSubtext(date: Date = new Date()): string {
-        icon: SlidersHorizontal,
+    const timeOfDay = getTimeOfDay(date);
-        title: "Export settings",
+
-        description: "Choose resolution, frame rate, and an optional file size cap.",
+    const messages: Record<TimeOfDay, string[]> = {
-    },
+        morning: [
-    {
+            "Good morning.",
-        icon: Radio,
+            "Coffee first, then clips.",
-        title: "RTMP streaming",
+            "Here's what's waiting for you.",
-        description: "Point OBS at your stream key and go live. Find the key in your profile.",
+        ],
-    },
+        afternoon: [
-    {
+            "Good afternoon.",
-        icon: LayoutGrid,
+            "A quiet moment for your clips.",
-        title: "Clip library",
+            "Catching up?",
-        description: "Browse all your clips. Watch, rename, edit the description, or delete.",
+        ],
-    },
+        evening: [
-    {
+            "Good evening.",
-        icon: Play,
+            "Settle in.",
-        title: "Built-in player",
+            "Time to unwind.",
-        description: "Scrub, adjust volume, go fullscreen. Runs in the browser.",
+        ],
-    },
+        night: [
-];
+            "Still up?",
            "Quiet night for it.",
            "Good night, when you're ready.",
        ]
    }
    const options = messages[timeOfDay];
    return options[Math.floor(Math.random() * options.length)];
 }
 const Home = () => {
    const { user } = useAuth();
    const now = new Date();
    const formatted: string = new Intl.DateTimeFormat('en-IE', {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
    }).format(now);
    if (user == null) {
        return (<NoAccessPage />)
    }
    return (
-        <div className="flex flex-col items-center px-8 py-12 min-h-full">
+        <div className={"w-10/12 m-auto pt-10"}>
-            {/* Hero */}
+            <div className={"flex flex-row justify-between items-start pb-10"}>
            <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-semibold text-gray-900 mb-3 leading-tight">
                    A home for your clips.
                </h1>
                <p className="text-base 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={"font-data text-faint-mono text-sm tracking-widest"}>{formatted.toLocaleUpperCase()}</p>
-                            <p className="text-sm text-gray-500 leading-relaxed">{description}</p>
+                    <h1 className={"font-heading font text-5xl text-text-strong tracking-[-0.015em]"}>{getGreetingSubtext(new Date())}</h1>
-                        </div>
+                </div>
-                    </div>
+
-                ))}
+                <Link to={"/stream"} className={"bg-accent rounded-md text-hover text-sm p-2 hover:bg-accent-hover shadow-md"}>
                     Open Stream Panel
                </Link>
            </div>
            <Card className={"bg-live-card pb-10"}>
                <p></p>
            </Card>
            <div>
                <h2 className={"font-heading text-2xl"}>Recent VoDs</h2>
            </div>
            {/* Format note */}
            <p className="text-xs text-gray-400">
                Supports MP4, MOV, WebM, and OGG.
            </p>
        </div>
    );
 };
--- a/frontend/src/pages/MediaPlayer.tsx
+++ b/frontend/src/pages/MediaPlayer.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Lock, Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
 import { AuthError } from "../utils/api/client.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import { dateToTimeAgo, formatTime, stringToDate } from "../utils/utils.ts";
 // Both VoDs and clips share the same on-screen shape.
@@ -339,10 +339,10 @@ const MediaPlayer = ({ noun, getMediaUrl, fetchDetails }: MediaPlayerProps) => {
                </div>
            )}
-            <Box className="p-4 flex-shrink-0">
+            <Card className="p-4 flex-shrink-0">
                <p className="text-xl font-semibold text-gray-900">{item?.title || "(No Title)"}</p>
                <p className="text-sm text-gray-500 mt-1">{timeAgo}</p>
-            </Box>
+            </Card>
        </div>
    );
 };
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Eye, EyeOff, Copy, Check } from "lucide-react";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import { getUser } from "../utils/api/users.ts";
 import type { User } from "../utils/types.ts";
 import { formatLocalDate } from "../utils/utils.ts";
@@ -33,7 +33,7 @@ const Profile = () => {
        <div className="px-8 py-10 max-w-2xl mx-auto">
            <h1 className="text-2xl font-semibold text-gray-900 mb-6">Profile</h1>
-            <Box className="p-6 mb-4 flex items-center gap-5">
+            <Card className="p-6 mb-4 flex items-center gap-5">
                <img
                    src={user.profilePictureUrl}
                    referrerPolicy="no-referrer"
@@ -48,9 +48,9 @@ const Profile = () => {
                        Member since {formatLocalDate(user.createdAt)}
                    </p>
                </div>
-            </Box>
+            </Card>
-            <Box className="p-6">
+            <Card className="p-6">
                <h2 className="text-sm font-semibold text-gray-800 mb-1">Stream Key</h2>
                <p className="text-sm text-gray-500 mb-4">
                    Use this key in OBS or any RTMP-compatible software to start streaming.
@@ -78,7 +78,7 @@ const Profile = () => {
                        {copied ? <Check size={16} className="text-green-600" /> : <Copy size={16} />}
                    </button>
                </div>
-            </Box>
+            </Card>
        </div>
    );
 };
--- a/frontend/src/pages/StreamControl.tsx
+++ b/frontend/src/pages/StreamControl.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lucide-react";
 import clsx from "clsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 import { getUser } from "../utils/api/users.ts";
 import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts";
@@ -244,7 +244,7 @@ const StreamControl = () => {
            <h1 className="text-2xl font-semibold text-gray-900">Stream Control</h1>
            {/* Hero status bar */}
-            <Box className={clsx(
+            <Card className={clsx(
                "p-6 flex items-center justify-between gap-6 border-l-4",
                isStreaming ? "border-l-red-500" : "border-l-gray-200"
            )}>
@@ -271,12 +271,12 @@ const StreamControl = () => {
                ) : (
                    <Radio size={28} className="text-gray-200" />
                )}
-            </Box>
+            </Card>
            {isStreaming && (
                <>
                    {/* Quick mark toolbar */}
-                    <Box className="p-4 flex flex-col gap-3">
+                    <Card className="p-4 flex flex-col gap-3">
                        <div className="flex items-center gap-3">
                            <Bookmark size={18} className="text-accent flex-shrink-0" />
                            <input
@@ -328,11 +328,11 @@ const StreamControl = () => {
                                })}
                            </div>
                        )}
-                    </Box>
+                    </Card>
                    {/* Forefront actions */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                            <CardHeader icon={Scissors} title="Clip the last few seconds" />
                            <div className="flex flex-col gap-1.5">
                                <label className={labelClass}>Duration (seconds)</label>
@@ -348,9 +348,9 @@ const StreamControl = () => {
                            <textarea placeholder="Description" value={clipDescription} onChange={(e) => setClipDescription(e.target.value)} rows={2} className={inputClass + " resize-none"} />
                            {clipError && <p className="text-sm text-red-500">{clipError}</p>}
                            <BlueButton onClick={handleClip} className="self-start mt-auto">Clip</BlueButton>
-                        </Box>
+                        </Card>
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                            <CardHeader icon={Film} title="Save between two markers" accent="accent" />
                            {markers.length < 2 ? (
                                <p className="text-sm text-gray-400">Add at least two markers above to save a section between them.</p>
@@ -377,10 +377,10 @@ const StreamControl = () => {
                                </>
                            )}
                            <BlueButton onClick={handleSaveByMarkers} disabled={markers.length < 2} className="self-start mt-auto">Save</BlueButton>
-                        </Box>
+                        </Card>
                    </div>
-                    <Box className="p-5 flex flex-col gap-3">
+                    <Card className="p-5 flex flex-col gap-3">
                        <CardHeader icon={Activity} title="Recent actions" />
                        {jobs.length === 0 ? (
                            <p className="text-sm text-gray-400">Clip and save actions will show up here.</p>
@@ -389,7 +389,7 @@ const StreamControl = () => {
                                {jobs.map((job) => <JobStatus key={job.uuid} job={job} />)}
                            </div>
                        )}
-                    </Box>
+                    </Card>
                </>
            )}
        </div>
--- a/frontend/src/utils/AuthContext.tsx
+++ b/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;
 }
Author	SHA1	Message	Date
Dylan De Faoite	bb771e630b	rename Box to Card All checks were successful CI / Maven unit tests (push) Successful in 14s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 22:22:41 +01:00
Dylan De Faoite	3c50d6aaf4	add cringe home message All checks were successful CI / Maven unit tests (push) Successful in 20s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 21:28:34 +01:00
Dylan De Faoite	9dcab44465	add titles to homepage All checks were successful CI / Maven unit tests (push) Successful in 13s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 21:23:34 +01:00
Dylan De Faoite	6ddffd8e2b	fix sidebar spacing issues All checks were successful CI / Maven unit tests (push) Successful in 13s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 20:53:13 +01:00
Dylan De Faoite	c86e5e5568	add colour and remove topbar All checks were successful CI / Maven unit tests (push) Successful in 14s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 20:20:26 +01:00
Dylan De Faoite	2f9ddadb91	add new fonts All checks were successful CI / Maven unit tests (push) Successful in 14s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 19:14:20 +01:00