Merge branch 'dev' of https://github.com/CodebilityDev/codebility-plus into task-#CBP-57

Author: reagan13

apps/codebility/app/(marketing)/profiles/_components/CodevContainer.tsx

@@ -1,10 +1,8 @@
 "use client";
-
 import { fadeInOutDownToUp } from "@/components/FramerAnimation/Framer";
 import H2 from "@/components/shared/home/H2";
 import Heading3 from "@/components/shared/home/Heading3";
 import IntroText from "@/components/shared/home/IntroText";
-import { Codev } from "@/types/home/codev";
 import { motion } from "framer-motion";
 
 export default function CodevContainer() {
@@ -24,15 +22,17 @@ export default function CodevContainer() {
         whileInView="visible"
         className="relative z-10 mx-auto max-w-[700px] rounded-2xl border border-white/10 bg-white/5 p-6 text-center shadow-xl backdrop-blur-sm"
       >
-        <Heading3 className="mb-4 text-white">
-          Meet Our Skilled Developer Network
-        </Heading3>
-        <IntroText className="text-gray-200">
-          Discover our carefully vetted CoDevs ready to join your team. Each
-          developer brings proven expertise, strong communication skills, and a
-          passion for delivering exceptional results on your projects.
-        </IntroText>
+        <div className="mb-4 text-white">
+          <Heading3>Meet Our Skilled Team Network</Heading3>
+        </div>
+        <div className="text-gray-200">
+          <IntroText>
+            Discover our carefully vetted professionals, ready to join your team 
+            and deliver exceptional results. Every member brings proven expertise,
+            strong communication, and a passion for getting things done right. 
+          </IntroText>
+        </div>
       </motion.div>
     </div>
   );
-}
+}

apps/codebility/app/globals.css

@@ -103,8 +103,11 @@
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 2, 255, 226, 100%;
-    --primary-foreground: 355.7 100% 97.3%;
+
+    /* ✅ Fix primary - use proper HSL. Based on your teal/cyan brand color */
+    --primary: 174 100% 50%;            /* was: 2, 255, 226, 100% (broken RGBA) */
+    --primary-foreground: 174 100% 10%;
+
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
     --muted: 240 4.8% 95.9%;
@@ -115,19 +118,25 @@
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --ring: 142.1 76.2% 36.3%;
+    --ring: 174 100% 36%;
     --radius: 0.5rem;
-    --text-color-1: var(--primary);
+
+    /* Custom text colors - keep as is, these are fine */
     --text-color-2: 234, 84%, 68%;
     --text-color-3: 285, 99%, 51%;
     --text-color-4: 266, 100%, 64%;
+
+    /* ✅ Add these missing light-mode specific vars */
+    --kanban-column-title: 240 10% 10%;     /* dark text for column headers */
+    --kanban-column-bg: 240 5% 96%;         /* light gray column background */
+    --sidebar-icon: 240 10% 25%;            /* visible dark icons in light mode */
+    --drag-handle: 240 5% 60%;              /* drag grip icon */
+    --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
+
     --muted-figma: 252, 252, 252, 100%;
     --card-clients: 246, 246, 246, 100%;
-
     --violet-color: theme("colors.violet.500");
-
     --teal-color: theme("colors.customTeal");
-
     --blue-500: theme("colors.blue.500");
     --blue-100: theme("colors.blue.100");
     --white: theme("colors.white");
@@ -146,9 +155,11 @@
     --card-foreground: 0 0% 95%;
     --popover: 0 0% 9%;
     --popover-foreground: 0 0% 95%;
-    --primary:
-      2, 255, 226, 100%; /* Please check, not sure if this is for hsl or rgba */
-    --primary-foreground: 144.9 80.4% 10%;
+
+    /* ✅ Same fix for dark mode primary */
+    --primary: 174 100% 50%;
+    --primary-foreground: 174 100% 10%;
+
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 15%;
@@ -159,11 +170,18 @@
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
-    --ring: 142.4 71.8% 29.2%;
-    --text-color-1: var(--primary);
+    --ring: 174 71.8% 29.2%;
+
     --text-color-2: 234, 84%, 68%;
     --text-color-3: 285, 99%, 51%;
     --text-color-4: 266, 100%, 64%;
+
+    /* ✅ Dark mode counterparts */
+    --kanban-column-title: 0 0% 95%;
+    --kanban-column-bg: 240 3.7% 12%;
+    --sidebar-icon: 0 0% 90%;
+    --drag-handle: 0 0% 60%;
+
     --muted-figma: 24, 24, 24, 25%;
     --card-clients: 19, 19, 19, 100%;
 

apps/codebility/app/home/kanban/[projectId]/[id]/_components/KanbanBoard.tsx

@@ -10,6 +10,7 @@ import { useUserStore } from "@/store/codev-store";
 import { KanbanBoardType, KanbanColumnType } from "@/types/home/codev";
 import { useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
+import { Archive } from "lucide-react";
 
 import { Button } from "@codevs/ui/button";
 
@@ -27,47 +28,29 @@ interface KanbanBoardProps {
   projectId: string;
 }
 
-/**
- * Enhanced KanbanBoard component with three-level breadcrumb navigation
- * and draft task card counter badge
- * 
- * Features:
- * - Three-level breadcrumb navigation
- * - Draft task counter badge (CBP-16)
- * - Archive toggle
- * - Task filtering by user
- * - Responsive design
- * 
- * Follows KISS, YAGNI, DRY, and SOLID principles
- */
 function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
   const user = useUserStore((state) => state.user);
 
-  // Sync the Kanban task modal with the URL ?taskId param
   useKanbanTaskUrlModal(boardData);
 
-  // User permissions - simple boolean checks following YAGNI principle
   const canAddColumn = user?.role_id === 1 || user?.role_id === 5;
   const canAddMember = canAddColumn;
 
-  // Component state - minimal and focused
   const [activeFilter, setActiveFilter] = useState<string | null>(null);
   const [showArchive, setShowArchive] = useState(false);
   const [draftCount, setDraftCount] = useState<number>(0);
 
-  // Fetch project members using React Query for caching and optimization
   const { data: allMembers = [], isLoading: isMembersLoading } = useQuery({
     queryKey: ["members", projectId],
     queryFn: async () => {
       const result = await getMembers(projectId);
       return result.data || [];
     },
     enabled: !!projectId,
-    staleTime: 5 * 60 * 1000, // 5 minutes cache
+    staleTime: 5 * 60 * 1000,
     refetchOnWindowFocus: false,
   });
 
-  // Transform members data using useMemo for performance optimization
   const members = useMemo(
     () =>
       allMembers.map((user) => ({
@@ -79,32 +62,24 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
     [allMembers, activeFilter],
   );
 
-  // Load draft count when component mounts or user/project changes
   useEffect(() => {
     if (user?.id && projectId) {
       loadDraftCount();
     }
   }, [user?.id, projectId]);
 
-  /**
-   * Fetch the number of draft task cards for the current user
-   * Updates the draftCount state for badge display
-   */
   const loadDraftCount = async () => {
     if (!user?.id || !projectId) return;
-    
     const result = await getDraftCount(projectId, user.id);
     if (result.success && result.count !== undefined) {
       setDraftCount(result.count);
     }
   };
 
-  // Filter handler using useCallback to prevent unnecessary re-renders
   const handleFilterClick = useCallback((userId: string) => {
     setActiveFilter((prev) => (prev === userId ? null : userId));
   }, []);
 
-  // Early return for missing data - fail fast principle
   if (!boardData) {
     return (
       <div className="text-center text-red-500">Board data not found.</div>
@@ -120,12 +95,11 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
             className="flex flex-row items-center gap-3 text-sm"
             aria-label="Breadcrumb"
           >
-            {/* Level 1: Kanban Board Overview */}
             <Link
               href={pathsConfig.app.kanban}
               className="group transition-colors duration-200"
             >
-              <span className="group-hover:text-customBlue-600 dark:group-hover:text-customBlue-400 text-gray-500 dark:text-gray-400">
+              <span className="text-gray-500 group-hover:text-customBlue-600 dark:text-gray-400 dark:group-hover:text-customBlue-400">
                 📋 Kanban Board
               </span>
             </Link>
@@ -135,12 +109,11 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
               aria-hidden="true"
             />
 
-            {/* Level 2: Project Sprint */}
             <Link
               href={`${pathsConfig.app.kanban}/${projectId}`}
               className="group transition-colors duration-200"
             >
-              <span className="group-hover:text-customBlue-600 dark:group-hover:text-customBlue-400 text-gray-500 dark:text-gray-400">
+              <span className="text-gray-500 group-hover:text-customBlue-600 dark:text-gray-400 dark:group-hover:text-customBlue-400">
                 Kanban Sprint
               </span>
             </Link>
@@ -150,9 +123,8 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
               aria-hidden="true"
             />
 
-            {/* Level 3: Current Board Name */}
             <span
-              className="to-customBlue-600 bg-gradient-to-r from-purple-600 bg-clip-text font-semibold text-gray-900 text-transparent dark:text-white"
+              className="bg-gradient-to-r from-purple-600 to-customBlue-600 bg-clip-text font-semibold text-transparent"
               aria-current="page"
             >
               {boardData.name}
@@ -168,7 +140,7 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
                 </span>
               </div>
               <div>
-                <h1 className="to-customBlue-600 bg-gradient-to-r from-purple-600 bg-clip-text text-2xl font-bold text-transparent drop-shadow-sm md:text-3xl">
+                <h1 className="bg-gradient-to-r from-purple-600 to-customBlue-600 bg-clip-text text-2xl font-bold text-transparent drop-shadow-sm md:text-3xl">
                   {boardData.name}
                 </h1>
                 <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
@@ -178,19 +150,23 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
             </div>
 
             {/* Desktop Layout: Search Left, Controls Right */}
-            <div className="flex flex-col gap-6 lg:flex-row lg:gap-8 lg:items-start">
+            <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-8">
               {/* Left: Search Input */}
               <div className="flex-1">
-                <div className="focus-within:ring-customBlue-500 focus-within:border-customBlue-300 flex w-full items-center gap-3 rounded-xl border border-white/20 bg-white/10 p-3 shadow-lg backdrop-blur-sm transition-all duration-300 focus-within:shadow-xl focus-within:ring-2 hover:bg-white/20 dark:border-white/10 dark:bg-white/5">
+                <div className="focus-within:ring-customBlue-500 focus-within:border-customBlue-300 flex w-full items-center gap-3 rounded-xl border p-3 shadow-lg backdrop-blur-sm transition-all duration-300 focus-within:shadow-xl focus-within:ring-2
+                  border-gray-200 bg-white hover:bg-gray-50
+                  dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
                   <label htmlFor="kanbanSearch" className="sr-only">
                     Search tasks
                   </label>
                   <IconSearch
-                    className="text-gray-300 transition-colors duration-200 dark:text-gray-400"
+                    className="text-gray-400 transition-colors duration-200 dark:text-gray-400"
                     aria-hidden="true"
                   />
                   <KanbanBoardsSearch
-                    className="w-full bg-transparent font-medium text-white placeholder-gray-300 outline-none dark:text-white dark:placeholder-gray-400"
+                    className="w-full bg-transparent font-medium outline-none
+                      text-gray-800 placeholder-gray-400
+                      dark:text-white dark:placeholder-gray-400"
                     placeholder="🔍 Search tasks..."
                     id="kanbanSearch"
                   />
@@ -206,18 +182,18 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
                   )}
                   {canAddMember && <KanbanAddMembersButton />}
 
-                  {/* Archive Toggle Button */}
+                  {/* Archive Toggle Button - FIXED for light mode */}
                   <Button
                     onClick={() => setShowArchive(!showArchive)}
                     variant={showArchive ? "default" : "outline"}
                     className={`flex transform items-center gap-2 whitespace-nowrap px-3 py-2 text-sm transition-all duration-300 hover:scale-105 ${
                       showArchive
                         ? "bg-customBlue-600 hover:bg-customBlue-700 shadow-customBlue-500/30 text-white shadow-lg"
-                        : "border-white/30 text-white hover:border-white/50 hover:bg-white/20 dark:border-white/20 dark:text-gray-300 dark:hover:bg-white/10 backdrop-blur-sm"
+                        : "border-gray-300 bg-white text-gray-700 hover:border-gray-400 hover:bg-gray-100 dark:border-white/20 dark:bg-transparent dark:text-gray-300 dark:hover:bg-white/10 backdrop-blur-sm"
                     }`}
                     aria-pressed={showArchive}
                   >
-                    <IconArchive className="h-4 w-4" aria-hidden="true" />
+                    <Archive className="h-4 w-4 text-gray-600 dark:text-gray-300" aria-hidden="true" />
                     <span className="hidden lg:inline">
                       {showArchive ? "Hide Archive" : "Show Archive"}
                     </span>
@@ -226,7 +202,7 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
                     </span>
                   </Button>
 
-                  {/* Draft Badge Button - CBP-16 */}
+                  {/* Draft Badge Button - FIXED for light mode */}
                   {draftCount > 0 && (
                     <Button
                       onClick={() => {
@@ -236,13 +212,15 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
                         });
                       }}
                       variant="outline"
-                      className="relative flex transform items-center gap-2 whitespace-nowrap px-3 py-2 text-sm transition-all duration-300 hover:scale-105 border-white/30 text-white hover:border-white/50 hover:bg-white/20 dark:border-white/20 dark:text-gray-300 dark:hover:bg-white/10 backdrop-blur-sm"
+                      className="relative flex transform items-center gap-2 whitespace-nowrap px-3 py-2 text-sm transition-all duration-300 hover:scale-105
+                        border-gray-300 bg-white text-gray-700 hover:border-gray-400 hover:bg-gray-100
+                        dark:border-white/20 dark:bg-transparent dark:text-gray-300 dark:hover:bg-white/10 backdrop-blur-sm"
                       aria-label={`You have ${draftCount} draft${draftCount > 1 ? 's' : ''}`}
                       title="View your saved drafts"
                     >
                       <span className="text-lg" aria-hidden="true">📝</span>
                       <span className="hidden lg:inline">Drafts</span>
-                      <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white font-semibold shadow-lg">
+                      <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs font-semibold text-white shadow-lg">
                         {draftCount}
                       </span>
                     </Button>
@@ -263,7 +241,6 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
           {/* Main Content Area */}
           <main className="flex-1">
             {boardData.kanban_columns.length === 0 ? (
-              // Empty State
               <div className="flex flex-1 items-center justify-center">
                 <div className="py-20 text-center">
                   <div
@@ -287,7 +264,6 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
                 </div>
               </div>
             ) : (
-              // Kanban Board Content
               <div className="flex h-full flex-1 overflow-hidden rounded-xl bg-transparent backdrop-blur-sm transition-all duration-300">
                 {!showArchive ? (
                   <KanbanBoardColumnContainer
@@ -304,7 +280,6 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
         </div>
       </div>
 
-      {/* Modal Container */}
       {canAddColumn && <KanbanColumnAddModal />}
     </div>
   );