Fix 404 nav links, add user dropdown, improve dark mode design

Copilot · JustinhSE · web-flow · commit ee412917e8ce · 2026-03-31T19:03:15.000Z
Agent-Logs-Url: https://github.com/Debugging-Disciples/community-software/sessions/24a1b0c8-d097-4eee-98fb-afedc5f4f4ec Co-authored-by: JustinhSE <84724234+JustinhSE@users.noreply.github.com>
diff --git a/app/globals.css b/app/globals.css
@@ -1,17 +1,19 @@
 @import "tailwindcss";
 
 @theme {
-  --color-tech-dark: #000000;
-  --color-tech-darker: #0a0a0a;
+  --color-tech-dark: #0f172a;
+  --color-tech-darker: #0b1220;
+  --color-tech-surface: #1e293b;
+  --color-tech-border: rgba(255, 255, 255, 0.08);
   --color-brand-cyan: #06b6d4;
   --color-brand-purple: #8b5cf6;
   --color-tech-blue: #3b82f6;
   --color-fafafa: #fafafa;
 }
 
 :root {
-  --foreground-rgb: 250, 250, 250;
-  --background: #000000;
+  --foreground-rgb: 226, 232, 240;
+  --background: #0f172a;
 }
 
 body {
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className="font-sans bg-tech-dark text-white min-h-screen">
+      <body className="font-sans bg-tech-dark text-slate-200 min-h-screen antialiased">
         <AuthProvider>{children}</AuthProvider>
       </body>
     </html>
diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
@@ -51,12 +51,12 @@ export default async function ProfilePage({ params }: { params: Promise<{ id: st
   const isOwnProfile = (session.user as { id?: string }).id === id;
 
   return (
-    <div className="min-h-screen bg-tech-dark text-white">
+    <div className="min-h-screen bg-tech-dark text-slate-200">
       <div
-        className="fixed inset-0 opacity-30 pointer-events-none"
+        className="fixed inset-0 opacity-20 pointer-events-none"
         style={{
           backgroundImage:
-            "radial-gradient(circle at 25px 25px, rgba(59,130,246,0.15) 1px, transparent 0), radial-gradient(circle at 75px 75px, rgba(139,92,246,0.15) 1px, transparent 0)",
+            "radial-gradient(circle at 25px 25px, rgba(59,130,246,0.10) 1px, transparent 0), radial-gradient(circle at 75px 75px, rgba(139,92,246,0.08) 1px, transparent 0)",
           backgroundSize: "100px 100px",
         }}
       />
diff --git a/components/DashboardClient.tsx b/components/DashboardClient.tsx
@@ -125,7 +125,7 @@ const ctaCards = [
     href: "#",
   },
   {
-    id: "4",
+    id: "update-profile",
     icon: "👤",
     title: "Update Your Profile",
     description: "Help others get to know you better",
@@ -161,16 +161,21 @@ function MiniAvatar({ image, name }: { image: string | null; name: string }) {
 
 export function DashboardClient({ session, trendingResources }: DashboardClientProps) {
   const user = session.user;
+  const userId = (user as { id?: string }).id;
   const joinDate = "March 2024"; // In production, comes from Slack API
 
+  const resolvedCtaCards = ctaCards.map((card) =>
+    card.id === "update-profile" ? { ...card, href: userId ? `/profile/${userId}` : "#" } : card
+  );
+
   return (
-    <div className="min-h-screen text-white" style={{ background: "linear-gradient(to bottom, #0a0a0a, #000000)" }}>
-      {/* Circuit pattern background */}
+    <div className="min-h-screen text-white" style={{ background: "linear-gradient(160deg, #0f172a 0%, #0b1628 50%, #0f172a 100%)" }}>
+      {/* Subtle background texture */}
       <div
-        className="fixed inset-0 opacity-30 pointer-events-none"
+        className="fixed inset-0 opacity-20 pointer-events-none"
         style={{
           backgroundImage:
-            "radial-gradient(circle at 25px 25px, rgba(59,130,246,0.15) 1px, transparent 0), radial-gradient(circle at 75px 75px, rgba(139,92,246,0.15) 1px, transparent 0)",
+            "radial-gradient(circle at 25px 25px, rgba(59,130,246,0.10) 1px, transparent 0), radial-gradient(circle at 75px 75px, rgba(139,92,246,0.08) 1px, transparent 0)",
           backgroundSize: "100px 100px",
         }}
       />
@@ -181,7 +186,7 @@ export function DashboardClient({ session, trendingResources }: DashboardClientP
         {/* Welcome card */}
         <div
           className="p-6 rounded-2xl border border-white/10"
-          style={{ background: "linear-gradient(to bottom right, rgba(255,255,255,0.05), rgba(255,255,255,0.10))", backdropFilter: "blur(12px)" }}
+          style={{ background: "linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.9))", backdropFilter: "blur(12px)" }}
         >
           <h1 className="text-3xl font-bold mb-1">
             <span
@@ -200,8 +205,8 @@ export function DashboardClient({ session, trendingResources }: DashboardClientP
           <div
             className="p-6 rounded-2xl"
             style={{
-              background: "rgba(10,10,10,0.8)",
-              border: "1px solid rgba(6,182,212,0.3)",
+              background: "rgba(30,41,59,0.7)",
+              border: "1px solid rgba(6,182,212,0.25)",
               borderRadius: 16,
             }}
           >
@@ -259,7 +264,7 @@ export function DashboardClient({ session, trendingResources }: DashboardClientP
                 <div
                   key={event.id}
                   className="p-4 rounded-xl border border-white/10 flex items-center gap-3"
-                  style={{ background: "linear-gradient(to right, rgba(6,182,212,0.10), rgba(139,92,246,0.10))", backdropFilter: "blur(8px)" }}
+                  style={{ background: "rgba(30,41,59,0.6)", backdropFilter: "blur(8px)" }}
                 >
                   <span className="text-2xl flex-shrink-0">{event.icon}</span>
                   <div className="flex-1 min-w-0">
@@ -290,7 +295,7 @@ export function DashboardClient({ session, trendingResources }: DashboardClientP
                 🏆 Top Members This Month
               </h2>
             </div>
-            <div className="rounded-2xl overflow-hidden border border-white/10" style={{ background: "rgba(255,255,255,0.03)" }}>
+            <div className="rounded-2xl overflow-hidden border border-white/10" style={{ background: "rgba(30,41,59,0.5)" }}>
               {topMembers.map((member, idx) => (
                 <div
                   key={member.rank}
@@ -330,7 +335,7 @@ export function DashboardClient({ session, trendingResources }: DashboardClientP
         {/* Community Activity Feed */}
         <section>
           <h2 className="text-xl font-semibold text-white mb-4">Community Activity</h2>
-          <div className="rounded-2xl border border-white/10 overflow-hidden" style={{ background: "rgba(255,255,255,0.03)" }}>
+          <div className="rounded-2xl border border-white/10 overflow-hidden" style={{ background: "rgba(30,41,59,0.5)" }}>
             {communityFeed.map((section, sIdx) => (
               <div key={section.id}>
                 {/* Section divider */}
@@ -371,12 +376,12 @@ export function DashboardClient({ session, trendingResources }: DashboardClientP
         <section>
           <h2 className="text-xl font-semibold text-white mb-4">Suggested Actions</h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {ctaCards.map((card) => (
+            {resolvedCtaCards.map((card) => (
               <div
                 key={card.id}
                 className="p-5 rounded-2xl border border-white/10 flex flex-col gap-3"
                 style={{
-                  background: "linear-gradient(to bottom right, rgba(6,182,212,0.10), rgba(139,92,246,0.10))",
+                  background: "rgba(30,41,59,0.6)",
                   backdropFilter: "blur(8px)",
                   borderLeftWidth: 3,
                   borderLeftColor: card.accent,
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -4,6 +4,7 @@ import { signOut } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 
 interface NavbarProps {
   user?: {
@@ -15,76 +16,120 @@ interface NavbarProps {
 
 const navLinks = [
   { href: "/dashboard", label: "Home" },
-  { href: "/leaderboards", label: "Leaderboards" },
-  { href: "/prayers", label: "Prayers" },
-  { href: "/questions", label: "Questions" },
+  { href: "/leaderboard", label: "Leaderboard" },
+  { href: "/prayer", label: "Prayers" },
   { href: "/resources", label: "Resources" },
-  { href: "/directory", label: "Directory" },
-  { href: "/events", label: "Events" },
 ];
 
 export function Navbar({ user }: NavbarProps) {
   const pathname = usePathname();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setDropdownOpen(false);
+      }
+    }
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [dropdownOpen]);
 
   return (
-    <nav className="relative z-20 border-b border-white/10 bg-tech-darker/80 backdrop-blur-sm">
-      <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+    <nav className="relative z-20 border-b border-white/10 bg-tech-darker/90 backdrop-blur-md sticky top-0">
+      <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between gap-4">
         <Link href="/dashboard" className="flex items-center gap-2 shrink-0">
-          <span className="text-2xl">🐛</span>
-          <span className="font-bold text-white">Debugging Disciples</span>
+          <span className="text-xl">🐛</span>
+          <span className="font-bold text-white text-sm sm:text-base tracking-tight">Debugging Disciples</span>
         </Link>
 
-        <div className="flex items-center gap-1 overflow-x-auto scrollbar-none mx-4">
+        <div className="flex items-center gap-0.5 overflow-x-auto scrollbar-none">
           {navLinks.map(({ href, label }) => {
-  // 1. Exact match for the current page
-  const isExact = pathname === href;
-  
-  // 2. Nested match: pathname starts with href + '/'
-  // We check for the '/' to avoid matching /settings-old when the link is /settings
-  const isNested = pathname.startsWith(`${href}/`);
-  
-  // 3. Special handling for root/dashboard to avoid highlighting everything
-  const isActive = (href === '/dashboard' || href === '/') 
-    ? isExact 
-    : (isExact || isNested);
-
-  return (
-    <Link
-      key={href}
-      href={href}
-      // Accessibility: Tell screen readers this is the current page
-      aria-current={isActive ? 'page' : undefined}
-      className={`px-3 py-1.5 rounded-lg text-sm whitespace-nowrap transition-colors ${
-        isActive
-          ? "text-brand-cyan bg-brand-cyan/10 font-medium"
-          : "text-gray-400 hover:text-brand-cyan hover:bg-white/5"
-      }`}
-    >
-      {label}
-    </Link>
-  );
-})}
+            const isExact = pathname === href;
+            const isNested = pathname.startsWith(`${href}/`);
+            const isActive = href === "/dashboard" ? isExact : isExact || isNested;
 
+            return (
+              <Link
+                key={href}
+                href={href}
+                aria-current={isActive ? "page" : undefined}
+                className={`px-3 py-1.5 rounded-lg text-sm whitespace-nowrap transition-colors ${
+                  isActive
+                    ? "text-brand-cyan bg-brand-cyan/10 font-medium"
+                    : "text-slate-400 hover:text-white hover:bg-white/5"
+                }`}
+              >
+                {label}
+              </Link>
+            );
+          })}
         </div>
 
         {user && (
-          <div className="flex items-center gap-3 shrink-0">
-            {user.image && (
-              <div className="relative w-8 h-8 rounded-full overflow-hidden border-2 border-brand-cyan/50">
-                <Image
-                  src={user.image}
-                  alt={user.name ?? "User"}
-                  fill
-                  className="object-cover"
-                />
-              </div>
-            )}
+          <div className="relative shrink-0" ref={dropdownRef}>
             <button
-              onClick={() => signOut({ callbackUrl: "/" })}
-              className="text-sm text-gray-400 hover:text-white transition-colors"
+              onClick={() => setDropdownOpen((prev) => !prev)}
+              className="flex items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-white/5 transition-colors group"
+              aria-expanded={dropdownOpen}
+              aria-haspopup="true"
             >
-              Sign out
+              {user.image ? (
+                <div className="relative w-8 h-8 rounded-full overflow-hidden border-2 border-brand-cyan/40 flex-shrink-0">
+                  <Image
+                    src={user.image}
+                    alt={user.name ?? "User"}
+                    fill
+                    className="object-cover"
+                    sizes="32px"
+                  />
+                </div>
+              ) : (
+                <div className="w-8 h-8 rounded-full border-2 border-brand-cyan/40 bg-gradient-to-br from-brand-cyan/20 to-brand-purple/20 flex items-center justify-center text-brand-cyan font-bold text-xs flex-shrink-0">
+                  {(user.name ?? "U").trim().split(/\s+/).filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase()}
+                </div>
+              )}
+              <span className="hidden sm:block text-sm text-slate-200 font-medium max-w-[120px] truncate group-hover:text-white transition-colors">
+                {user.name?.trim().split(/\s+/)[0] ?? "User"}
+              </span>
+              <svg
+                className={`w-4 h-4 text-slate-400 flex-shrink-0 transition-transform duration-200 ${dropdownOpen ? "rotate-180" : ""}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
             </button>
+
+            {dropdownOpen && (
+              <div
+                className="absolute right-0 mt-2 w-56 rounded-xl border border-white/10 shadow-2xl z-50 overflow-hidden"
+                style={{ background: "rgba(11,18,32,0.97)", backdropFilter: "blur(16px)" }}
+              >
+                <div className="px-4 py-3 border-b border-white/10">
+                  <p className="text-white text-sm font-semibold truncate">{user.name}</p>
+                  {user.email && <p className="text-slate-400 text-xs mt-0.5 truncate">{user.email}</p>}
+                </div>
+                <div className="p-1.5">
+                  <button
+                    onClick={() => {
+                      setDropdownOpen(false);
+                      signOut({ callbackUrl: "/" });
+                    }}
+                    className="w-full text-left flex items-center gap-2.5 px-3 py-2 text-sm text-slate-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors"
+                  >
+                    <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                    </svg>
+                    Sign out
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
         )}
       </div>
diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,22 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.slack-edge.com",
+      },
+      {
+        protocol: "https",
+        hostname: "secure.gravatar.com",
+      },
+      {
+        protocol: "https",
+        hostname: "*.slack-edge.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
