rename Box to Card

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;

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;

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home, Video, Radio, PlaySquareIcon} from 'lucide-react';
+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";
@@ -9,7 +9,7 @@ type props = {
     className?: string
 }
 
-const Divider = () => <hr className="my-1.5 mx-2 border-hover" />;
+const Divider = () => <hr className="w-full my-1.5 mx-2 border-hover" />;
 
 const Sidebar = ({ className }: props) => {
     const { user, setUser } = useAuth()
@@ -40,21 +40,19 @@ const Sidebar = ({ className }: props) => {
     }
 
     return (
-        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center", className)}>
-            <div className="pb-4 flex flex-row justify-between items-center">
-                <PlaySquareIcon className="text-terracotta" size={40} />
-                <h2 className={"font-heading text-xl"}>The VoD System</h2>
-            </div>
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
+            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
 
             <nav className="flex flex-col flex-1 items-center">
+                <Divider />
                 <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" />
+                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Upload" />
                 </div>
+                <Divider />
 
                 {user && (
                     <div className="flex flex-col gap-0.5 w-full">
-                        <Divider />
                         <div>
                             <SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
                             <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />

frontend/src/index.css

@@ -13,6 +13,7 @@
     --color-card: #FDFBF7;
     --color-accent: #A85A38;
     --color-accent-hover: #94492A;
+    --color-live-card: #F0EBE1;
 
     /* Colour Fonts */
     --color-text-primary: #2B2620;

frontend/src/layouts/MainLayout.tsx

@@ -7,7 +7,7 @@ const MainLayout = () => {
     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]`}>
+        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[280px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
             <div>

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>
     );
 };

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>
     )
 };

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>
     );

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>
     );

frontend/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import {useAuth} from "../utils/AuthContext.tsx";
 import NoAccessPage from "../components/NoAccessPage.tsx";
 import {Link} from "react-router-dom";
+import Card from "../components/Card.tsx";
 
 type TimeOfDay = "morning" | "afternoon" | "evening" | "night";
 
@@ -43,7 +44,6 @@ function getGreetingSubtext(date: Date = new Date()): string {
     return options[Math.floor(Math.random() * options.length)];
 }
 
-
 const Home = () => {
     const { user } = useAuth();
     const now = new Date();
@@ -59,19 +59,26 @@ const Home = () => {
     }
 
     return (
-        <div>
-            <div className={"p-10 flex flex-row justify-between"}>
+        <div className={"w-10/12 m-auto pt-10"}>
+            <div className={"flex flex-row justify-between items-start pb-10"}>
                 <div>
                     <p className={"font-data text-faint-mono text-sm tracking-widest"}>{formatted.toLocaleUpperCase()}</p>
                     <h1 className={"font-heading font text-5xl text-text-strong tracking-[-0.015em]"}>{getGreetingSubtext(new Date())}</h1>
                 </div>
 
-                <Link to={"/stream"}>
-                    <button className={"bg-accent rounded-md text-hover text-sm p-1 pl-2 pr-2 hover:bg-accent-hover shadow-md"}>
-                        Open Stream Panel
-                    </button>
+                <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>
+
         </div>
     );
 };

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>
     );
 };

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>
     );
 };

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>