fix: improve text contrast in Light Mode for WCAG 2.1 AA Compliance (#660)

src/components/NextBestActionWidget.tsx

@@ -1,4 +1,4 @@
-'use client';
+'use client';
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
@@ -42,13 +42,13 @@ export default function NextBestActionWidget() {
           <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100 leading-tight">
             Your next best action
           </h2>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+          <p className="text-xs text-slate-600 dark:text-gray-400 mt-0.5">
             Personalised to your recent activity
           </p>
         </div>
       </div>
       {recs.length === 0 ? (
-        <p className="text-sm text-gray-400 dark:text-gray-500 py-2">
+        <p className="text-sm text-slate-600 dark:text-gray-500 py-2">
           Explore DevPath and we will suggest your next step here.
         </p>
       ) : (
@@ -68,7 +68,7 @@ export default function NextBestActionWidget() {
               <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 leading-snug">
                 {rec.title}
               </h3>
-              <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed flex-1">
+              <p className="text-xs text-slate-600 dark:text-gray-400 leading-relaxed flex-1">
                 {rec.description}
               </p>
               <Link

src/components/NotificationDropdown.tsx

@@ -213,7 +213,7 @@ export function NotificationDropdown() {
               {/* Notifications List */}
               <div className="overflow-y-auto max-h-[500px]">
                 {notifications.length === 0 ? (
-                  <div className="p-8 text-center text-gray-500">
+                  <div className="p-8 text-center text-slate-600">
                     <Bell className="w-12 h-12 mx-auto mb-3 opacity-50" />
                     <p>No notifications yet</p>
                   </div>
@@ -260,10 +260,10 @@ export function NotificationDropdown() {
                           <p className="font-semibold text-sm text-gray-900 dark:text-white">
                             {notif.title}
                           </p>
-                          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">
+                          <p className="text-sm text-slate-600 dark:text-gray-400 mt-1 line-clamp-2">
                             {notif.message}
                           </p>
-                          <p className="text-xs text-gray-500 mt-2">
+                          <p className="text-xs text-slate-600 mt-2">
                             {notif.createdAt?.seconds
                               ? new Date(
                                   notif.createdAt.seconds * 1000

src/components/ProjectCard.tsx

@@ -50,7 +50,7 @@ export function ProjectCard({ project }: { project: Project }) {
           {/* Author */}
           <div className="flex items-center gap-2 mb-2">
             <div className="w-6 h-6 rounded-full bg-black/10 dark:bg-white/10" />
-            <p className="text-sm text-gray-600 dark:text-gray-400">
+            <p className="text-sm text-slate-600 dark:text-gray-400">
               {project.author}
             </p>
           </div>
@@ -79,7 +79,7 @@ export function ProjectCard({ project }: { project: Project }) {
           </div>
 
           {/* Stats */}
-          <div className="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400 mt-4 pt-4 border-t border-black/5 dark:border-white/10">
+          <div className="flex items-center gap-6 text-sm text-slate-600 dark:text-gray-400 mt-4 pt-4 border-t border-black/5 dark:border-white/10">
             <button
               aria-label="Action button"
               onClick={(e) => {
@@ -147,7 +147,7 @@ export function ProjectCard({ project }: { project: Project }) {
                   <h2 className="text-3xl font-bold mb-2 text-gray-900 dark:text-white">
                     {project.title}
                   </h2>
-                  <p className="text-gray-600 dark:text-gray-400">
+                  <p className="text-slate-600 dark:text-gray-400">
                     by {project.author}
                   </p>
                 </div>

src/components/profile/UserProfile.tsx

@@ -562,10 +562,11 @@ export default function UserProfile() {
                   {(() => {
                     if (!user.createdAt) return 'Dec 2023';
                     try {
+                      const createdAt = user.createdAt as any;
                       const d = new Date(
-                        user.createdAt.seconds
-                          ? user.createdAt.seconds * 1000
-                          : user.createdAt
+                        createdAt.seconds
+                          ? createdAt.seconds * 1000
+                          : createdAt
                       );
                       if (isNaN(d.getTime())) return 'Dec 2023';
                       return d.toLocaleDateString(undefined, {

src/components/providers/theme-provider.tsx

@@ -22,6 +22,16 @@ function ThemeStoreBridge() {
 }
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>;
+  }
+
   return (
     <NextThemesProvider {...props}>
       <ThemeStoreBridge />

src/context/AuthContext.tsx

@@ -242,7 +242,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                   email: firebaseUser.email,
                   name: firebaseUser.displayName || '',
                   photoURL: firebaseUser.photoURL || '',
-                  role: 'member',
+                  role: 'member' as const,
                   points: 0,
                   streak: 0,
                   level: 0,
@@ -263,7 +263,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                     showInCommunity: true,
                   },
                   preferences: {
-                    theme: 'dark',
+                    theme: 'dark' as const,
                   },
                   githubStats: {
                     connected: false,