update topbar with new styling

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

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 />

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}