Fixes to Add Melody Page, minor UI Tweaks

frontend/src/layout/Header.jsx

@@ -4,21 +4,36 @@ export default function Header() {
   const { user, logout } = useAuth();
 
   return (
-    <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
-      <h2 className="text-lg font-semibold text-gray-800">
-        BellSystems Admin Panel
+    <header
+      className="px-6 py-3 flex items-center justify-between border-b"
+      style={{
+        backgroundColor: "var(--bg-header)",
+        borderColor: "var(--border-primary)",
+      }}
+    >
+      <h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
+        Admin Panel
       </h2>
 
       <div className="flex items-center gap-4">
-        <span className="text-sm text-gray-600">
+        <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
           {user?.name}
-          <span className="ml-2 px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded-full">
+          <span
+            className="ml-2 px-2 py-0.5 text-xs rounded-full"
+            style={{
+              backgroundColor: "var(--badge-blue-bg)",
+              color: "var(--badge-blue-text)",
+            }}
+          >
             {user?.role}
           </span>
         </span>
         <button
           onClick={logout}
-          className="text-sm text-red-600 hover:text-red-800 transition-colors"
+          className="text-sm transition-colors"
+          style={{ color: "var(--danger)" }}
+          onMouseEnter={(e) => (e.target.style.color = "var(--danger-hover)")}
+          onMouseLeave={(e) => (e.target.style.color = "var(--danger)")}
         >
           Sign out
         </button>

frontend/src/layout/MainLayout.jsx

@@ -4,7 +4,7 @@ import Sidebar from "./Sidebar";
 
 export default function MainLayout() {
   return (
-    <div className="flex min-h-screen bg-gray-100">
+    <div className="flex min-h-screen" style={{ backgroundColor: "var(--bg-primary)" }}>
       <Sidebar />
       <div className="flex-1 flex flex-col">
         <Header />

frontend/src/layout/Sidebar.jsx

@@ -20,8 +20,8 @@ const navItems = [
 const linkClass = (isActive) =>
   `block px-3 py-2 rounded-md text-sm transition-colors ${
     isActive
-      ? "bg-gray-700 text-white"
-      : "text-gray-300 hover:bg-gray-800 hover:text-white"
+      ? "bg-[var(--accent)] text-[var(--bg-primary)] font-medium"
+      : "text-[var(--text-secondary)] hover:bg-[var(--bg-card-hover)] hover:text-[var(--text-heading)]"
   }`;
 
 export default function Sidebar() {
@@ -33,8 +33,14 @@ export default function Sidebar() {
   );
 
   return (
-    <aside className="w-56 bg-gray-900 text-white min-h-screen p-4">
-      <div className="text-xl font-bold mb-8 px-2">BellSystems</div>
+    <aside className="w-56 min-h-screen p-4 border-r" style={{ backgroundColor: "var(--bg-sidebar)", borderColor: "var(--border-primary)" }}>
+      <div className="mb-8 px-2">
+        <img
+          src="/logo-dark.png"
+          alt="BellSystems"
+          className="h-10 w-auto"
+        />
+      </div>
       <nav className="space-y-1">
         {visibleItems.map((item) =>
           item.children ? (
@@ -68,7 +74,6 @@ function CollapsibleGroup({ label, children, currentPath }) {
   );
   const [open, setOpen] = useState(isChildActive);
 
-  // Auto-expand when a child becomes active
   const shouldBeOpen = open || isChildActive;
 
   return (
@@ -78,8 +83,8 @@ function CollapsibleGroup({ label, children, currentPath }) {
         onClick={() => setOpen(!shouldBeOpen)}
         className={`w-full flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors ${
           isChildActive
-            ? "text-white"
-            : "text-gray-300 hover:bg-gray-800 hover:text-white"
+            ? "text-[var(--text-heading)]"
+            : "text-[var(--text-secondary)] hover:bg-[var(--bg-card-hover)] hover:text-[var(--text-heading)]"
         }`}
       >
         <span>{label}</span>
@@ -102,8 +107,8 @@ function CollapsibleGroup({ label, children, currentPath }) {
               className={({ isActive }) =>
                 `block pl-4 pr-3 py-1.5 rounded-md text-sm transition-colors ${
                   isActive
-                    ? "bg-gray-700 text-white"
-                    : "text-gray-400 hover:bg-gray-800 hover:text-white"
+                    ? "bg-[var(--accent)] text-[var(--bg-primary)] font-medium"
+                    : "text-[var(--text-muted)] hover:bg-[var(--bg-card-hover)] hover:text-[var(--text-heading)]"
                 }`
               }
             >