From aaa075a2369ca31f7ec3f82431dca502924f6601 Mon Sep 17 00:00:00 2001
From: Muhammad Ahmed <muhammadahmed8710@gmail.com>
Date: Fri, 31 Jul 2026 14:27:06 +0500
Subject: [PATCH 1/2] fix(board): add title attribute for assignee avatar hover
 (#113)

---
 devboard/client/src/components/Board/TaskCard.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/devboard/client/src/components/Board/TaskCard.jsx b/devboard/client/src/components/Board/TaskCard.jsx
index 8b4a8a5..1fd4a3a 100644
--- a/devboard/client/src/components/Board/TaskCard.jsx
+++ b/devboard/client/src/components/Board/TaskCard.jsx
@@ -28,7 +28,6 @@ const TaskCard = ({ task, index, onSelect }) => {
   today.setHours(0, 0, 0, 0);
   const dueDate = new Date(task.dueDate);
   const isOverdue = task.dueDate && dueDate < today && task.status !== "done";
-  // const isOverdue = task.dueDate && new Date(task.dueDate) < new Date() && task.status !== "Done";
   // ------------------
 
   return (
@@ -175,7 +174,10 @@ const TaskCard = ({ task, index, onSelect }) => {
               )}
             </div>
             {task.assignee?.name && (
-              <div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center text-[9px] font-bold text-white">
+              <div 
+                title={task.assignee.name} 
+                className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center text-[9px] font-bold text-white cursor-pointer"
+              >
                 {task.assignee.name[0].toUpperCase()}
               </div>
             )}

From c9e428f03e4590bf9f1a7f82c09ae38fb2ed300f Mon Sep 17 00:00:00 2001
From: Muhammad Ahmed <muhammadahmed8710@gmail.com>
Date: Fri, 31 Jul 2026 14:31:38 +0500
Subject: [PATCH 2/2] fix(board): add title attribute for assignee avatar hover
 (#113)

---
 .../client/src/components/Board/TaskCard.jsx    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/devboard/client/src/components/Board/TaskCard.jsx b/devboard/client/src/components/Board/TaskCard.jsx
index 1fd4a3a..06ba6e6 100644
--- a/devboard/client/src/components/Board/TaskCard.jsx
+++ b/devboard/client/src/components/Board/TaskCard.jsx
@@ -10,6 +10,21 @@ const PRIORITY_COLORS = {
   low: "bg-green-500/20 text-green-400",
 };
 
+// Avatar color palette for unique user backgrounds (#109)
+const AVATAR_COLORS = [
+  "bg-purple-700",
+  "bg-blue-600",
+  "bg-green-600",
+  "bg-rose-600",
+  "bg-amber-600",
+];
+
+const getAvatarColor = (name) => {
+  if (!name) return AVATAR_COLORS[0];
+  const colorIndex = name.charCodeAt(0) % AVATAR_COLORS.length;
+  return AVATAR_COLORS[colorIndex];
+};
+
 const timeAgo = (date) => {
   const diff = Date.now() - new Date(date);
   const days = Math.floor(diff / 86400000);
@@ -176,7 +191,7 @@ const TaskCard = ({ task, index, onSelect }) => {
             {task.assignee?.name && (
               <div 
                 title={task.assignee.name} 
-                className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center text-[9px] font-bold text-white cursor-pointer"
+                className={`w-5 h-5 rounded-full ${getAvatarColor(task.assignee.name)} flex items-center justify-center text-[9px] font-bold text-white cursor-pointer`}
               >
                 {task.assignee.name[0].toUpperCase()}
               </div>