From 6f64d1cac05e98481008b84aef5d496cea0f66ba Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sat, 15 Aug 2026 18:19:48 +0100
Subject: [PATCH] update topbar with new styling

---
 frontend/src/components/Dropdown.tsx | 6 +++---
 frontend/src/components/Sidebar.tsx  | 5 ++++-
 frontend/src/components/Topbar.tsx   | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index db384e0..17d00c9 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -9,7 +9,7 @@ type DropdownItemProps = {
 
 const DropdownItem = ({ item, onClick, className }: DropdownItemProps) => (
     <li
-        className={clsx("cursor-pointer hover:bg-gray-50 px-3 py-2 text-sm text-gray-700", className)}
+        className={clsx("cursor-pointer hover:bg-hover px-3 py-2 text-sm rounded-md", className)}
         onClick={() => onClick(item)}
     >
         {item}
@@ -40,12 +40,12 @@ const Dropdown = ({ label, children, className }: DropdownProps) => {
         <div className={clsx(className, "relative inline-block text-left")} ref={ref}>
             <button
                 onClick={() => setIsOpen(v => !v)}
-                className="inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors duration-150"
+                className="inline-flex items-center gap-1 px-3 py-2 text-sm transition-colors duration-150"
             >
                 {label}
             </button>
             {isOpen && (
-                <ul className="absolute right-0 mt-1 w-36 origin-top-right rounded-lg bg-white border border-gray-200 shadow-md z-50 py-1 overflow-hidden">
+                <ul className="absolute right-0 mt-1 w-36 origin-top-right rounded-lg bg-background border border-hairline shadow-md z-50 py-1 overflow-hidden">
                     {children}
                 </ul>
             )}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index b2fd3c8..167d691 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -13,7 +13,10 @@ 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-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
-            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
+            <div className={"flex items-center gap-2"}>
+                <Video size={24} className={"mb-1"}/>
+                <h2 className={"font-heading text-2xl"}>VoD System</h2>
+            </div>
 
             <nav className="flex flex-col flex-1 items-center w-3/4">
                 <Divider />
diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
index ccf897f..4fcca7b 100644
--- a/frontend/src/components/Topbar.tsx
+++ b/frontend/src/components/Topbar.tsx
@@ -58,13 +58,13 @@ const Topbar = ({
     }
 
     return (
-        <div className={clsx(className, "flex justify-between items-center px-4 py-2 bg-white border-b border-gray-200")}>
+        <div className={clsx(className, "flex justify-between items-center px-4 py-2 bg-sidebar border-b border-hairline")}>
             <MenuButton onClick={() => setSidebarToggled(!sidebarToggled)}>
                 {sidebarToggled ? <Menu size={24}/> :  <X size={24}/>}
             </MenuButton>
 
             { user ? (
-                <div>
+                <div className={"hover:bg-hover rounded-lg p-0.5"}>
                     <img
                         className={"w-8 h-8 rounded-full inline-block"}
                         src={user.profilePictureUrl}