Improve light mode styling for home and communities pages

eslint.config.js

@@ -20,4 +20,10 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  {
+    files: ['**/context/**/*.{ts,tsx}'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
 ])

src/components/CreateCommunity.tsx

@@ -2,8 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { supabase } from "../supabase-client";
-import { AlertCircle, CheckCircle } from "lucide-react";
-import {showSuccess, showError} from '../utils/toast';
+import { showSuccess } from '../utils/toast';
 
 interface CommunityInput {
   name: string;
@@ -26,7 +25,7 @@ export const CreateCommunity = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
-  const { mutate, isPending, isError, error, isSuccess } = useMutation({
+  const { mutate, isPending, isSuccess } = useMutation({
     mutationFn: createCommunity,
     onSuccess: () => {
 

src/components/Footer.tsx

@@ -1,11 +1,11 @@
 import { Link } from "react-router-dom";
 import { 
-  Code2, Github, Mail, Heart, Twitter, Linkedin, MessageCircle, 
-  Send, Zap, Cpu, Shield, Cloud, Database, Code, 
-  TrendingUp, Calendar, ShieldCheck, CpuIcon, RadioTower, MessageSquare,
-  Users, Users2, Server, Globe, CheckCircle, X, Sparkles, Rocket,
-  Activity, Clock, Wifi, Terminal, Layers, ChevronUp, Home,
-  Users as UsersIcon, Plus, User, LogIn, UserPlus, GitMerge,
+  Code2, Github, Mail, Heart, Linkedin, MessageCircle, 
+  Send, Zap, Shield, Cloud, Database, 
+  Calendar, CpuIcon, RadioTower, MessageSquare,
+  Users2, Server, CheckCircle, X, Sparkles, Rocket,
+  ChevronUp, Home,
+  Users as UsersIcon, Plus, User, GitMerge,
   Sun, Moon
 } from "lucide-react";
 import { useState, useEffect } from "react";

src/components/MessagingInterface.tsx

@@ -8,7 +8,6 @@ import MessageInput from './MessageInput';
 import ConversationHeader from './ConversationHeader';
 import CreateConversationModal from './CreateConversationModal';
 import type { Conversation } from '../types/messaging';
-import { showError } from '../utils/toast';
 
 const MessagingInterface = () => {
   const { user } = useAuth();

src/context/AuthContext.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react-refresh/only-export-components */
+ 
 import { createContext, useEffect, useState } from "react";
 import { type User, AuthError } from "@supabase/supabase-js";
 import { supabase, isBackendAvailable } from "../supabase-client";

src/hooks/useEvents.ts

@@ -1,7 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { supabase, isBackendAvailable } from '../supabase-client';
 import { useAuth } from './useAuth';
-import type { Event, EventWithDetails, CreateEventData, EventFilters, EventAttendee } from '../types/events';
+import type { EventWithDetails, CreateEventData, EventFilters } from '../types/events';
 import { mockEvents } from '../utils/mockEvents';
 
 export const useEvents = (filters?: EventFilters) => {
@@ -177,7 +177,7 @@ export const useCreateEvent = () => {
         };
 
         // Update the query cache
-        queryClient.setQueryData(['events'], (old: any) => {
+        queryClient.setQueryData(['events'], (old: EventWithDetails[] | undefined) => {
           if (Array.isArray(old)) {
             return [newEvent, ...old];
           }

src/pages/CreateEventPage.tsx

@@ -49,7 +49,7 @@ export default function CreateEventPage() {
         showSuccess('Event created successfully!');
         navigate(`/events/${data.id}`);
       },
-      onError: (error: any) => {
+      onError: (error: Error) => {
         showError(error.message || 'Failed to create event');
       }
     });
@@ -63,13 +63,6 @@ export default function CreateEventPage() {
     }));
   }
 
-  const handleVirtualToggle = () => {
-    setFormData(prev => ({
-      ...prev,
-      is_virtual: !prev.is_virtual
-    }));
-  }
-
   const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name } = e.target;
     setFormData(prev => ({

src/pages/DashboardPage.tsx

@@ -9,7 +9,6 @@ import {
   Code2,
   Plus,
   Activity,
-  User,
   MessageCircle,
   ThumbsUp,
   Settings,
@@ -84,7 +83,7 @@ export default function DashboardPage() {
   });
 
   // Fetch User Posts
-  const { data: myPosts, isLoading: postsLoading } = useQuery({
+  const { data: myPosts } = useQuery({
     queryKey: ['my-posts', user?.id],
     queryFn: async () => {
       if (!user || !supabase) return [];
@@ -100,7 +99,7 @@ export default function DashboardPage() {
   });
 
   // Fetch Joined Communities
-  const { data: myCommunities, isLoading: communitiesLoading } = useQuery({
+  const { data: myCommunities } = useQuery({
     queryKey: ['my-communities', user?.id],
     queryFn: async () => {
       if (!user || !supabase) return [];
@@ -115,7 +114,7 @@ export default function DashboardPage() {
   });
 
   // Fetch Created Communities
-  const { data: createdCommunities, isLoading: createdCommLoading } = useQuery({
+  const { data: createdCommunities } = useQuery({
     queryKey: ['created-communities', user?.id],
     queryFn: async () => {
       if (!user || !supabase) return [];
@@ -131,7 +130,7 @@ export default function DashboardPage() {
   });
 
   // Fetch Joined Events
-  const { data: myEvents, isLoading: eventsLoading } = useQuery({
+  const { data: myEvents } = useQuery({
     queryKey: ['my-events', user?.id],
     queryFn: async () => {
       if (!user || !supabase) return [];
@@ -145,11 +144,6 @@ export default function DashboardPage() {
     enabled: !!user && (activeTab === 'events' || activeTab === 'overview')
   });
 
-  const isLoading = statsLoading ||
-    (activeTab === 'posts' && postsLoading) ||
-    (activeTab === 'communities' && (communitiesLoading || createdCommLoading)) ||
-    (activeTab === 'events' && eventsLoading);
-
   return (
     <div className="min-h-screen bg-slate-950 text-white font-mono">
       {/* Dynamic Header */}
@@ -205,7 +199,7 @@ export default function DashboardPage() {
             ].map((tab) => (
               <button
                 key={tab.id}
-                onClick={() => setActiveTab(tab.id as any)}
+                onClick={() => setActiveTab(tab.id as 'overview' | 'posts' | 'communities' | 'events')}
                 className={`flex items-center gap-2 pb-4 text-sm font-bold transition-all relative ${activeTab === tab.id
                   ? 'text-cyan-400'
                   : 'text-gray-500 hover:text-gray-300'

src/pages/EventDetailPage.tsx

@@ -67,7 +67,7 @@ export default function EventDetailPage() {
       onSuccess: () => {
         showSuccess(`You are now ${status} this event`);
       },
-      onError: (error: any) => {
+      onError: (error: Error) => {
         showError(error.message || 'Failed to register for event');
       }
     });

src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { useState, type FormEvent, useEffect } from "react";
 import { useAuth } from '../hooks/useAuth';
 import { useNavigate, Link } from "react-router-dom";
-import { Github, Mail, Lock, Eye, EyeOff, Loader2, ArrowRight, X, Sun, Moon } from "lucide-react";
+import { Github, Mail, Lock, Eye, EyeOff, Loader2, ArrowRight, X } from "lucide-react";
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
@@ -10,7 +10,6 @@ export default function LoginPage() {
   const [loading, setLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
-  const [hoveredCard, setHoveredCard] = useState<string | null>(null);
   const [theme, setTheme] = useState<'light' | 'dark'>('dark');
   const [particles, setParticles] = useState<Array<{x: number, y: number, size: number, speed: number}>>([]);
   const { signInWithEmail, signInWithGithub } = useAuth();
@@ -55,19 +54,6 @@ export default function LoginPage() {
     };
   }, []);
 
-  // Handle theme toggle
-  const toggleTheme = () => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-
-    document.documentElement.classList.remove('light', 'dark');
-    document.documentElement.classList.add(newTheme);
-
-    const event = new CustomEvent('themeChanged', { detail: newTheme });
-    window.dispatchEvent(event);
-  };
-
   // Handle close/back button
   const handleClose = () => {
     navigate(-1);

src/pages/ProfilePage.tsx

@@ -83,7 +83,7 @@ export default function ProfilePage() {
         showSuccess("Profile updated successfully");
         setIsEditing(false);
       }
-    } catch (err: any) {
+    } catch (err) {
       showError("Failed to update profile");
       console.log("Profile update error:", err);
     } finally {

src/pages/RegisterPage.tsx

@@ -13,7 +13,6 @@ export default function RegisterPage() {
   const [loading, setLoading] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [hoveredCard, setHoveredCard] = useState<string | null>(null);
   const [theme, setTheme] = useState<'light' | 'dark'>('dark');
   const [particles, setParticles] = useState<Array<{x: number, y: number, size: number, speed: number}>>([]);
   const { signUpWithEmail, signInWithGithub } = useAuth();
@@ -55,19 +54,6 @@ export default function RegisterPage() {
     };
   }, []);
 
-  // Handle theme toggle
-  const toggleTheme = () => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark';
-    setTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
-
-    document.documentElement.classList.remove('light', 'dark');
-    document.documentElement.classList.add(newTheme);
-
-    const event = new CustomEvent('themeChanged', { detail: newTheme });
-    window.dispatchEvent(event);
-  };
-
   // Handle close/back button
   const handleClose = () => {
     navigate(-1);

src/theme.css

@@ -79,20 +79,21 @@ html.light .bg-slate-900\/50 {
 
 
 html.light .from-slate-900 {
-  background: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
+  background: linear-gradient(to bottom, #f0f9ff, #e0f2fe) !important;
 }
 
 html.light .via-slate-950 {
-  background: linear-gradient(to bottom, #ffffff, #f8fafc, #f1f5f9) !important;
+  background: linear-gradient(to bottom, #f0f9ff, #e0f2fe, #f8fafc) !important;
 }
 
 html.light .to-slate-950 {
-  background: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
+  background: linear-gradient(to bottom, #e0f2fe, #f8fafc) !important;
 }
 
 html.light .bg-gradient-to-b {
-  background: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
-  border-bottom: 2px solid #cbd5e1 !important;
+  background: linear-gradient(to bottom, #f0f9ff, #e0f2fe, #f8fafc) !important;
+  border-bottom: 1px solid #0891b2 !important;
+  box-shadow: 0 4px 6px -1px rgba(8, 145, 178, 0.1), 0 2px 4px -1px rgba(8, 145, 178, 0.06) !important;
 }
 
 html.light .bg-linear-to-br {
@@ -123,20 +124,25 @@ html.light .text-white {
 }
 
 html.light .text-gray-300 {
-  color: #1f2937 !important;
-  font-weight: 600;
+  color: #334155 !important;
+  font-weight: 500;
 }
 
 html.light .text-slate-300 {
-  color: #1f2937 !important;
-  font-weight: 600;
+  color: #334155 !important;
+  font-weight: 500;
 }
 
 html.light .text-slate-400 {
   color: #475569 !important;
   font-weight: 500;
 }
 
+html.light .text-gray-400 {
+  color: #64748b !important;
+  font-weight: 500;
+}
+
 html.light .text-cyan-300 {
   color: #0891b2 !important;
   font-weight: 700;
@@ -258,7 +264,8 @@ html.light .border-cyan-400\/50 {
 }
 
 html.light .bg-cyan-900\/20 {
-  background-color: rgba(8, 145, 178, 0.1) !important;
+  background-color: #0891b2 !important;
+  box-shadow: 0 4px 6px -1px rgba(8, 145, 178, 0.3), 0 2px 4px -1px rgba(8, 145, 178, 0.2) !important;
 }
 
 html.light .bg-cyan-900\/30 {
@@ -290,7 +297,22 @@ html.light .hover\:text-white:hover {
 }
 
 html.light .hover\:bg-cyan-900\/50:hover {
-  background-color: rgba(8, 145, 178, 0.2) !important;
+  background-color: rgba(8, 145, 178, 0.25) !important;
+}
+
+html.light .hover\:bg-cyan-600\/50:hover {
+  background-color: #0e7490 !important;
+  box-shadow: 0 10px 15px -3px rgba(8, 145, 178, 0.4), 0 4px 6px -2px rgba(8, 145, 178, 0.3) !important;
+}
+
+html.light .bg-slate-800\/50 {
+  background-color: #f1f5f9 !important;
+  border-color: #cbd5e1 !important;
+}
+
+html.light .hover\:bg-slate-800:hover {
+  background-color: #e2e8f0 !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 html.light .hover\:bg-red-900\/40:hover {
@@ -305,6 +327,41 @@ html.light .hover\:border-slate-500:hover {
   border-color: #64748b !important;
 }
 
+/* Code block styling for light mode */
+html.light .bg-linear-to-br,
+html.light .from-cyan-500\/10,
+html.light .to-blue-500\/10 {
+  background: linear-gradient(to bottom right, #e0f2fe, #dbeafe) !important;
+  border-color: #0891b2 !important;
+  box-shadow: 0 4px 6px -1px rgba(8, 145, 178, 0.1), 0 2px 4px -1px rgba(8, 145, 178, 0.06) !important;
+}
+
+html.light .text-green-400 {
+  color: #059669 !important;
+  font-weight: 600;
+}
+
+html.light .text-emerald-400 {
+  color: #10b981 !important;
+  font-weight: 600;
+}
+
+html.light .text-yellow-400 {
+  color: #d97706 !important;
+  font-weight: 600;
+}
+
+/* Improve button text visibility */
+html.light .bg-cyan-600\/30 .text-cyan-300,
+html.light .border-cyan-400\/50 ~ * {
+  color: #ffffff !important;
+  font-weight: 700;
+}
+
+/* Secondary button styling */
+html.light .border-gray-600\/30 {
+  border-color: #cbd5e1 !important;
+}
 /* ===== Toast Notifications ===== */
 
 /* Base Toast Container */