Fixes to Add Melody Page, minor UI Tweaks

frontend/src/App.jsx

@@ -15,8 +15,8 @@ function ProtectedRoute({ children }) {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
-        <p className="text-gray-500">Loading...</p>
+      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: "var(--bg-primary)" }}>
+        <p style={{ color: "var(--text-muted)" }}>Loading...</p>
       </div>
     );
   }
@@ -32,10 +32,10 @@ function DashboardPage() {
   const { user } = useAuth();
   return (
     <div>
-      <h1 className="text-2xl font-bold text-gray-900 mb-4">Dashboard</h1>
-      <p className="text-gray-600">
+      <h1 className="text-2xl font-bold mb-4" style={{ color: "var(--text-heading)" }}>Dashboard</h1>
+      <p style={{ color: "var(--text-secondary)" }}>
         Welcome, {user?.name}. You are logged in as{" "}
-        <span className="font-medium">{user?.role}</span>.
+        <span className="font-medium" style={{ color: "var(--accent)" }}>{user?.role}</span>.
       </p>
     </div>
   );