From 34d2265fe70d95071b1ef27762a33a8bc741f436 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sat, 15 Aug 2026 18:09:11 +0100
Subject: [PATCH] update sidebar with new styling

---
 frontend/index.html                           |  5 ++
 frontend/src/components/Sidebar.tsx           | 48 +++++++++----------
 .../src/components/buttons/SidebarButton.tsx  | 14 ++++--
 frontend/src/index.css                        |  4 ++
 frontend/src/layouts/MainLayout.tsx           |  2 +-
 frontend/src/vite-env.d.ts                    |  1 +
 6 files changed, 45 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/vite-env.d.ts

diff --git a/frontend/index.html b/frontend/index.html
index 21829db..1dd4518 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,11 @@
   <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>The VoD System</title>
   </head>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index bb33d56..b2fd3c8 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -8,43 +8,43 @@ type props = {
     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 = ({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"
-                />
-            </div>
-            <nav className="flex flex-col flex-1 px-2 pb-4">
-                <div className="flex flex-col gap-0.5">
+        <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 w-3/4">
+                <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" />
                 </div>
 
+                <Divider />
+
                 {user && (
-                    <>
-                        <Divider />
-                        <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 className="flex flex-col gap-0.5 w-full">
+                            <div>
+                                <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 && (
-                    <>
-                        <Divider />
-                        <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
-                    </>
-                )}
+                <div className={"w-full"}>
+                    {user && (
+                        <>
+                            <Divider />
+                            <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
+                        </>
+                    )}
+                </div>
             </nav>
         </aside>
     );
diff --git a/frontend/src/components/buttons/SidebarButton.tsx b/frontend/src/components/buttons/SidebarButton.tsx
index 8c5d55f..7fe4905 100644
--- 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,11 +13,17 @@ 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>
     )
 }
 
-export default SidebarButton;
+export default SidebarButton;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d14266a..8d47248 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -15,6 +15,10 @@
     --color-text-primary: #2B2620;
     --color-text-strong: #35302A;
     --color-text-body: #554D44;
+
+    /* ── Lines, chips, placeholders ──────────────────────────────────────── */
+    --color-hairline: #F0EBE2;
+    --color-hover: #E7E0D2;
 }
 
 :root {
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 6ba6821..b79ba42 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -34,7 +34,7 @@ const MainLayout = () => {
     }, [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-[252px_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"}`}/>
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..151aa68
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
\ No newline at end of file