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>