Updates and Bug fixes

app/components/SectionsDisplay.jsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 
 const InfoPopup = ({ info }) => {
   return (
-    <div className="absolute top-full right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-4 z-10">
+    <div className="absolute top-full right-0 mt-2 w-64 bg-white dark:bg-neutral-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-4 z-10">
       {Object.entries(info).map(([key, value]) => (
         <div key={key} className="mb-2 last:mb-0">
           <span className="font-semibold text-gray-800 dark:text-gray-200">{key}: </span>
@@ -28,12 +28,12 @@ const SectionsDisplay = ({ sections, searchQuery }) => {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.3, delay: sectionIndex * 0.05 }}
-          className="group relative bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-blue-400/30 dark:hover:border-blue-500/30"
+          className="group relative bg-white dark:bg-neutral-950 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-blue-400/30 dark:hover:border-blue-500/30"
         >
           {/* Section Header */}
-          <div className="px-6 py-5 border-b border-gray-200 dark:border-gray-700/50 flex items-center justify-between bg-gradient-to-r from-gray-50 to-white/50 dark:from-gray-800/50 dark:to-gray-900/50">
+          <div className="px-6 py-5 border-b border-gray-200 dark:border-gray-700/50 flex items-center justify-between bg-gradient-to-br from-neutral-100 to-white dark:from-neutral-950 dark:to-neutral-900">
             <div className="flex items-center">
-              <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 mr-4">
+              <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-neutral-950 flex items-center justify-center text-blue-600 dark:text-blue-400 mr-4">
                 {section.icon}
               </div>
               <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{section.title}</h2>
@@ -66,7 +66,7 @@ const SectionsDisplay = ({ sections, searchQuery }) => {
                         <Link
                           key={itemIndex}
                           href={item.path}
-                          className="group/item relative block p-4 rounded-xl border border-gray-200/70 dark:border-gray-700/50 hover:border-blue-400/50 dark:hover:border-blue-500/50 transition-all duration-200 bg-gradient-to-b from-white/50 to-white/0 dark:from-gray-800/30 dark:to-gray-800/10 hover:from-blue-50/70 hover:to-blue-50/30 dark:hover:from-blue-900/20 dark:hover:to-blue-900/10 overflow-hidden"
+                          className="group/item relative block p-4 rounded-xl border border-gray-200/70 dark:border-gray-700/50 hover:border-blue-400/50 dark:hover:border-blue-500/50 transition-all duration-200 bg-white dark:bg-neutral-950 hover:from-blue-50/70 hover:to-blue-50/30 dark:hover:from-blue-900/20 dark:hover:to-blue-900/10 overflow-hidden"
                         >
                           {/* Hover effect */}
                           <div className="absolute inset-0 bg-gradient-to-r from-blue-500/0 via-blue-500/5 to-blue-500/0 opacity-0 group-hover/item:opacity-100 dark:via-blue-600/10 transition-opacity duration-300"></div>
@@ -116,11 +116,11 @@ const SectionsDisplay = ({ sections, searchQuery }) => {
           transition={{ duration: 0.3 }}
           className="text-center py-16"
         >
-          <div className="w-20 h-20 mx-auto mb-6 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <FiSearch className="h-10 w-10 text-gray-400 dark:text-gray-500" />
+          <div className="border dark:border-gray-600 w-20 h-20 mx-auto mb-6 bg-gray-100 dark:bg-neutral-950 rounded-full flex items-center justify-center">
+            <FiSearch className="h-10 w-10 text-gray-400" />
           </div>
           <h3 className="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">
-            No results found for "{searchQuery}"
+            No results found
           </h3>
           <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
             Try searching for different terms or browse our categories

app/components/ui/SearchBar.jsx

@@ -1,5 +1,4 @@
- 'use client';
-
+'use client';
 import { useState, useEffect } from 'react';
 
 const SearchBar = ({ sections, onSearchResults }) => {
@@ -51,11 +50,11 @@ const SearchBar = ({ sections, onSearchResults }) => {
   };
 
   return (
-    <div className="mt-8 max-w-2xl mx-auto relative">
+    <div className="mt-4 max-w-2xl mx-auto relative">
       <input
         type="text"
         placeholder="Search for algorithms..."
-        className="w-full px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500/75 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 transition-all"
+        className="w-full px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500/75 bg-white dark:bg-neutral-950 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 transition-all"
         value={searchQuery}
         onChange={handleSearch}
       />

app/components/ui/TutorialOverlay.jsx

@@ -56,7 +56,7 @@ export default function TutorialOverlay() {
       ref={overlayRef}
       className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
     >
-      <div className="bg-white dark:bg-gray-900 p-6 rounded-2xl shadow-2xl max-w-sm w-full text-center relative">
+      <div className="bg-white dark:bg-neutral-900 p-6 rounded-2xl shadow-2xl max-w-sm w-full text-center relative">
         <button
           onClick={closeOverlay}
           className="absolute top-3 right-3 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white text-xl"

app/dashboard/page.jsx

@@ -7,6 +7,7 @@ import { useUser } from "@/app/contexts/UserContext";
 import Link from "next/link";
 import ActivityDashboard from "@/app/components/dashboard/ActivityDashboard";
 import Footer from "@/app/components/footer";
+import { trackActivity } from "@/lib/activity";
 
 export default function Dashboard() {
   const router = useRouter();
@@ -20,6 +21,7 @@ export default function Dashboard() {
       router.push("/login");
     } else {
       fetchModules();
+      trackActivity(user.id, "site_visit");
     }
   }, [user]);
 

app/login/page.jsx

@@ -208,7 +208,7 @@ export default function LoginPage() {
 
           <button
             onClick={handleGoogleSignIn}
-            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-neutral-950 text-gray-700 dark:text-gray-200 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 transition-all"
+            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-neutral-950 text-gray-700 dark:text-gray-200 font-medium hover:bg-gray-50 dark:hover:bg-neutral-900 duration-300 transition-all"
           >
               <img src="./google.webp" width={24}></img>
               <span className='mx-2'>Continue with Google</span>

app/visualizer/page.jsx

@@ -515,7 +515,7 @@ const sections = [
 
   const Visualizer = () => {
     return (
-      <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
+      <div className="min-h-screen bg-white dark:bg-neutral-900 text-gray-800 dark:text-gray-200 flex flex-col">
         <Navbar />
         <TutorialOverlay />
         <main className="container mx-auto px-4 sm:px-6 pt-20 pb-16 min-h-[calc(100vh-80px)] flex-grow relative z-10">
@@ -530,8 +530,7 @@ const sections = [
 
           <VisualizerClient initialSections={sections} />
         </main>
-        <div className="bg-black w-full relative z-10">
-          <div className="bg-gray-700 z-10 h-[1px]"></div>
+        <div className="w-full relative z-10">
           <Footer />
         </div>
       </div>

app/visualizer/stack/polish/postfix/animation.jsx

@@ -1,4 +1,3 @@
-/* InfixToPostfixVisualizer.jsx  –  animated version */
 "use client";
 import React, { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";