Add dashboard header UI improvemenEnhanced the Dashboard Header UI with a cleaner and more modern design using improved spacing, gradients, shadows, hover effects, and responsive styling.ts and environment setup

src/components/DashboardHeader.tsx

@@ -1,4 +1,5 @@
-"use client"
+"use client";
+
 import NotificationBell from "@/components/NotificationBell";
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
@@ -21,6 +22,7 @@ export default function DashboardHeader() {
     async function loadSettings() {
       try {
         const res = await fetch("/api/user/settings");
+
         if (res.ok) {
           const data = await res.json();
           setIsPublic(data.is_public === true);
@@ -37,38 +39,65 @@ export default function DashboardHeader() {
   }, [session]);
 
   return (
-    <header className="mb-8 border-b border-[var(--border)] p-4 pb-6">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+    <header className="mb-8 rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-lg backdrop-blur-md p-5 md:p-6 transition-all duration-300 hover:shadow-2xl">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-5">
+
+        {/* Left Section */}
         <div>
-          <h1 className="text-2xl md:text-3xl font-bold text-[var(--foreground)]">
+          <h1 className="text-3xl md:text-4xl font-extrabold bg-gradient-to-r from-[var(--foreground)] to-[var(--accent)] bg-clip-text text-transparent">
             Dashboard
           </h1>
-          <p className="mt-1 text-[var(--muted-foreground)]">
-            Your coding activity at a glance
+
+          <p className="mt-2 text-sm md:text-base text-[var(--muted-foreground)]">
+            Your coding activity at a glance 🚀
           </p>
         </div>
 
+        {/* Right Section */}
         <div className="flex flex-wrap items-center gap-3">
+
           {isPublic === true && session?.githubLogin && (
             <a
               href={`/u/${session.githubLogin}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--control)] text-[var(--card-foreground)] text-sm font-medium hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] transition-colors"
+              className="px-4 py-2 rounded-xl bg-[var(--accent)] text-[var(--accent-foreground)] text-sm font-semibold shadow-md hover:scale-105 hover:shadow-xl transition-all duration-300"
               title="View your public profile"
             >
               Share Profile
             </a>
           )}
-          <KeyboardShortcuts />
-          <NotificationBell />
-          <UserAvatar />
-          <ThemeToggle />
-          <SignOutButton />
+
+          <div className="flex items-center gap-2 rounded-xl border border-[var(--border)] bg-[var(--card-muted)] px-3 py-2 shadow-sm">
+
+            <div className="hover:scale-110 transition-transform duration-200">
+              <KeyboardShortcuts />
+            </div>
+
+            <div className="hover:scale-110 transition-transform duration-200">
+              <NotificationBell />
+            </div>
+
+            <div className="hover:scale-110 transition-transform duration-200">
+              <UserAvatar />
+            </div>
+
+            <div className="hover:rotate-12 transition-transform duration-200">
+              <ThemeToggle />
+            </div>
+
+            <div className="hover:scale-110 transition-transform duration-200">
+              <SignOutButton />
+            </div>
+
+          </div>
         </div>
       </div>
 
-      <AccountToggle />
+      {/* Bottom Toggle */}
+      <div className="mt-5">
+        <AccountToggle />
+      </div>
     </header>
   );
 }