Fixes to Add Melody Page, minor UI Tweaks

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)]"
                 }`
               }
             >