Add header to Settings page

src/pages/UserSettings.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Settings, User, Shield, Eye, Bell, MapPin, Download } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { Navigate } from 'react-router-dom';
+import { Header } from '@/components/layout/Header';
 import { AccountProfileTab } from '@/components/settings/AccountProfileTab';
 import { SecurityTab } from '@/components/settings/SecurityTab';
 import { PrivacyTab } from '@/components/settings/PrivacyTab';
@@ -17,11 +18,14 @@ export default function UserSettings() {
 
   if (loading) {
     return (
-      <div className="container mx-auto px-4 py-8">
-        <div className="max-w-4xl mx-auto">
-          <div className="animate-pulse">
-            <div className="h-8 bg-muted rounded w-48 mb-6"></div>
-            <div className="h-96 bg-muted rounded"></div>
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="max-w-4xl mx-auto">
+            <div className="animate-pulse">
+              <div className="h-8 bg-muted rounded w-48 mb-6"></div>
+              <div className="h-96 bg-muted rounded"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -72,8 +76,10 @@ export default function UserSettings() {
   ];
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
+    <div className="min-h-screen bg-background">
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-6xl mx-auto">
         {/* Header */}
         <div className="flex items-center gap-3 mb-8">
           <Settings className="w-8 h-8 text-primary" />
@@ -125,6 +131,7 @@ export default function UserSettings() {
             );
           })}
         </Tabs>
+        </div>
       </div>
     </div>
   );