update sidebar with new styling

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>

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

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

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 {

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"}`}/>

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />