From 5228ed3fc02d518797c2a347b36e25b849c32d48 Mon Sep 17 00:00:00 2001
From: Chop <28534054+RChopin@users.noreply.github.com>
Date: Thu, 10 Jul 2025 23:41:03 +0200
Subject: [PATCH] feat: Enhance ProjectTasksSection with improved button styles
 and layout adjustments

---
 src/components/ProjectTasksSection.js | 57 +++++++++++++++++++++++----
 src/components/ui/Button.js           |  1 +
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/ProjectTasksSection.js b/src/components/ProjectTasksSection.js
index 981350f..6f79b74 100644
--- a/src/components/ProjectTasksSection.js
+++ b/src/components/ProjectTasksSection.js
@@ -456,7 +456,7 @@ export default function ProjectTasksSection({ projectId }) {
 										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
 											Status
 										</th>
-										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+										<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48">
 											Actions
 										</th>
 									</tr>
@@ -522,28 +522,69 @@ export default function ProjectTasksSection({ projectId }) {
 													/>
 												</td>
 												<td className="px-4 py-4">
-													<div className="flex items-center gap-2">
-														<button
+													<div className="flex items-center gap-1.5">
+														<Button
+															variant="ghost"
+															size="sm"
 															onClick={() => toggleNotes(task.id)}
-															className="text-xs text-blue-600 hover:text-blue-800 font-medium"
+															className="text-xs px-2 py-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 border-0"
 															title={`${taskNotes[task.id]?.length || 0} notes`}
 														>
-															Notes ({taskNotes[task.id]?.length || 0})
-														</button>
+															<svg
+																className="w-3 h-3 mr-1"
+																fill="none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	strokeLinecap="round"
+																	strokeLinejoin="round"
+																	strokeWidth={2}
+																	d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+																/>
+															</svg>
+															{taskNotes[task.id]?.length || 0}
+														</Button>
 														<Button
 															variant="outline"
 															size="sm"
 															onClick={() => handleEditTask(task)}
-															className="text-xs"
+															className="text-xs px-2 py-1 min-w-[60px]"
 														>
+															<svg
+																className="w-3 h-3 mr-1"
+																fill="none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	strokeLinecap="round"
+																	strokeLinejoin="round"
+																	strokeWidth={2}
+																	d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+																/>
+															</svg>
 															Edit
 														</Button>
 														<Button
 															variant="danger"
 															size="sm"
 															onClick={() => handleDeleteTask(task.id)}
-															className="text-xs"
+															className="text-xs px-2 py-1 min-w-[60px]"
 														>
+															<svg
+																className="w-3 h-3 mr-1"
+																fill="none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	strokeLinecap="round"
+																	strokeLinejoin="round"
+																	strokeWidth={2}
+																	d="19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+																/>
+															</svg>
 															Delete
 														</Button>
 													</div>
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 898cc75..ca07fe8 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -9,6 +9,7 @@ const buttonVariants = {
 	danger: "bg-red-600 hover:bg-red-700 text-white",
 	success: "bg-green-600 hover:bg-green-700 text-white",
 	outline: "border border-blue-600 text-blue-600 hover:bg-blue-50",
+	ghost: "text-gray-600 hover:text-gray-900 hover:bg-gray-50",
 };
 
 const buttonSizes = {