From 3646af5c648dd9e75e6f31a4b45323455681ee27 Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Sat, 16 May 2026 21:18:49 +0530
Subject: [PATCH] style(admin): replace text-link button styles with proper
 bordered buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Edit, Deactivate/Activate, and Delete actions in all admin table rows
were styled as plain text links (coloured text, no border or background).
Replaced with small pill-shaped bordered buttons that have a clear visual
affordance as interactive controls:

- Edit       → blue tinted border/bg  (primary-50 / primary-200)
- Deactivate → red tinted border/bg   (danger-50  / danger-200)
- Activate   → green tinted border/bg (success-50 / success-200)
- Delete     → white bg, red border; confirm state = solid red
- Cancel     → white bg, neutral border

Applies to: accounts, cost centres (vessels), users, vendors, products,
and the shared ConfirmDeleteButton component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../app/(portal)/admin/accounts/account-form.tsx       |  6 +++---
 .../app/(portal)/admin/products/product-form.tsx       |  2 +-
 .../app/(portal)/admin/users/user-form.tsx             |  6 +++---
 .../app/(portal)/admin/vendors/vendor-form.tsx         |  4 ++--
 .../app/(portal)/admin/vessels/vessel-form.tsx         |  6 +++---
 .../components/ui/confirm-delete-button.tsx            | 10 +++++-----
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/App/pelagia-portal/app/(portal)/admin/accounts/account-form.tsx b/App/pelagia-portal/app/(portal)/admin/accounts/account-form.tsx
index 6ac8151..f2fec2c 100644
--- a/App/pelagia-portal/app/(portal)/admin/accounts/account-form.tsx
+++ b/App/pelagia-portal/app/(portal)/admin/accounts/account-form.tsx
@@ -106,13 +106,13 @@ export function EditAccountButton({ account }: { account: AccountRow }) {
 
   return (
     <>
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
         <button onClick={() => setOpen(true)}
-          className="text-sm text-primary-600 hover:text-primary-700 font-medium">
+          className="rounded border border-primary-200 bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 transition-colors">
           Edit
         </button>
         <button onClick={handleToggle} disabled={toggling}
-          className={`text-sm font-medium ${account.isActive ? "text-danger-600 hover:text-danger-700" : "text-success-600 hover:text-success-700"}`}>
+          className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${account.isActive ? "border-danger-200 bg-danger-50 text-danger-700 hover:bg-danger-100" : "border-success-200 bg-success-50 text-success-700 hover:bg-success-100"}`}>
           {toggling ? "…" : account.isActive ? "Deactivate" : "Activate"}
         </button>
       </div>
diff --git a/App/pelagia-portal/app/(portal)/admin/products/product-form.tsx b/App/pelagia-portal/app/(portal)/admin/products/product-form.tsx
index 1c49014..43839de 100644
--- a/App/pelagia-portal/app/(portal)/admin/products/product-form.tsx
+++ b/App/pelagia-portal/app/(portal)/admin/products/product-form.tsx
@@ -91,7 +91,7 @@ export function ToggleProductButton({ product }: { product: ProductRow }) {
 
   return (
     <button onClick={handleToggle} disabled={toggling}
-      className={`text-sm font-medium ${product.isActive ? "text-danger-600 hover:text-danger-700" : "text-success-600 hover:text-success-700"}`}>
+      className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${product.isActive ? "border-danger-200 bg-danger-50 text-danger-700 hover:bg-danger-100" : "border-success-200 bg-success-50 text-success-700 hover:bg-success-100"}`}>
       {toggling ? "…" : product.isActive ? "Deactivate" : "Activate"}
     </button>
   );
diff --git a/App/pelagia-portal/app/(portal)/admin/users/user-form.tsx b/App/pelagia-portal/app/(portal)/admin/users/user-form.tsx
index 4e4d5af..ce08043 100644
--- a/App/pelagia-portal/app/(portal)/admin/users/user-form.tsx
+++ b/App/pelagia-portal/app/(portal)/admin/users/user-form.tsx
@@ -131,13 +131,13 @@ export function EditUserButton({ user }: { user: UserRow }) {
 
   return (
     <>
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
         <button onClick={() => setOpen(true)}
-          className="text-sm text-primary-600 hover:text-primary-700 font-medium">
+          className="rounded border border-primary-200 bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 transition-colors">
           Edit
         </button>
         <button onClick={handleToggle} disabled={toggling}
-          className={`text-sm font-medium ${user.isActive ? "text-danger-600 hover:text-danger-700" : "text-success-600 hover:text-success-700"}`}>
+          className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${user.isActive ? "border-danger-200 bg-danger-50 text-danger-700 hover:bg-danger-100" : "border-success-200 bg-success-50 text-success-700 hover:bg-success-100"}`}>
           {toggling ? "…" : user.isActive ? "Deactivate" : "Activate"}
         </button>
       </div>
diff --git a/App/pelagia-portal/app/(portal)/admin/vendors/vendor-form.tsx b/App/pelagia-portal/app/(portal)/admin/vendors/vendor-form.tsx
index a5ade6e..40cf34b 100644
--- a/App/pelagia-portal/app/(portal)/admin/vendors/vendor-form.tsx
+++ b/App/pelagia-portal/app/(portal)/admin/vendors/vendor-form.tsx
@@ -299,14 +299,14 @@ export function EditVendorButton({ vendor }: { vendor: VendorRow }) {
 
   return (
     <>
-      <button onClick={() => setOpen(true)} className="text-sm text-primary-600 hover:underline font-medium">Edit</button>
+      <button onClick={() => setOpen(true)} className="rounded border border-primary-200 bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 transition-colors">Edit</button>
       <AdminDialog title={`Edit — ${vendor.name}`} open={open} onClose={() => setOpen(false)}>
         <form onSubmit={handleSubmit} className="space-y-4">
           <VendorFormFields vendor={vendor} />
           {error && <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
           <div className="flex items-center justify-between">
             <button type="button" onClick={handleToggle}
-              className={`text-xs underline ${vendor.isActive ? "text-danger-600" : "text-success-600"}`}>
+              className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors ${vendor.isActive ? "border-danger-200 bg-danger-50 text-danger-700 hover:bg-danger-100" : "border-success-200 bg-success-50 text-success-700 hover:bg-success-100"}`}>
               {vendor.isActive ? "Deactivate" : "Activate"}
             </button>
             <div className="flex gap-3">
diff --git a/App/pelagia-portal/app/(portal)/admin/vessels/vessel-form.tsx b/App/pelagia-portal/app/(portal)/admin/vessels/vessel-form.tsx
index c9930b9..ee75be9 100644
--- a/App/pelagia-portal/app/(portal)/admin/vessels/vessel-form.tsx
+++ b/App/pelagia-portal/app/(portal)/admin/vessels/vessel-form.tsx
@@ -98,13 +98,13 @@ export function EditVesselButton({ vessel }: { vessel: VesselRow }) {
 
   return (
     <>
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
         <button onClick={() => setOpen(true)}
-          className="text-sm text-primary-600 hover:text-primary-700 font-medium">
+          className="rounded border border-primary-200 bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 transition-colors">
           Edit
         </button>
         <button onClick={handleToggle} disabled={toggling}
-          className={`text-sm font-medium ${vessel.isActive ? "text-danger-600 hover:text-danger-700" : "text-success-600 hover:text-success-700"}`}>
+          className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${vessel.isActive ? "border-danger-200 bg-danger-50 text-danger-700 hover:bg-danger-100" : "border-success-200 bg-success-50 text-success-700 hover:bg-success-100"}`}>
           {toggling ? "…" : vessel.isActive ? "Deactivate" : "Activate"}
         </button>
       </div>
diff --git a/App/pelagia-portal/components/ui/confirm-delete-button.tsx b/App/pelagia-portal/components/ui/confirm-delete-button.tsx
index 4819cac..1e7aaac 100644
--- a/App/pelagia-portal/components/ui/confirm-delete-button.tsx
+++ b/App/pelagia-portal/components/ui/confirm-delete-button.tsx
@@ -19,8 +19,8 @@ export function ConfirmDeleteButton({
 
   if (confirming) {
     return (
-      <span className="inline-flex items-center gap-2 flex-wrap">
-        <span className="text-xs text-neutral-600 whitespace-nowrap">Delete {label}?</span>
+      <span className="inline-flex items-center gap-1.5 flex-wrap">
+        <span className="text-xs text-neutral-500 whitespace-nowrap">Delete {label}?</span>
         <button
           onClick={() =>
             startTransition(async () => {
@@ -34,13 +34,13 @@ export function ConfirmDeleteButton({
             })
           }
           disabled={isPending}
-          className="text-xs font-medium text-danger-600 hover:text-danger-800 hover:underline disabled:opacity-50 whitespace-nowrap"
+          className="rounded border border-danger-400 bg-danger-600 px-2 py-0.5 text-xs font-semibold text-white hover:bg-danger-700 disabled:opacity-50 whitespace-nowrap transition-colors"
         >
           {isPending ? "Deleting…" : "Confirm"}
         </button>
         <button
           onClick={() => { setConfirming(false); setError(""); }}
-          className="text-xs text-neutral-500 hover:underline whitespace-nowrap"
+          className="rounded border border-neutral-300 bg-white px-2 py-0.5 text-xs text-neutral-600 hover:bg-neutral-50 whitespace-nowrap transition-colors"
         >
           Cancel
         </button>
@@ -52,7 +52,7 @@ export function ConfirmDeleteButton({
   return (
     <button
       onClick={() => setConfirming(true)}
-      className="text-xs text-danger-500 hover:text-danger-700 hover:underline"
+      className="rounded border border-danger-200 bg-white px-2.5 py-1 text-xs font-medium text-danger-600 hover:bg-danger-50 hover:border-danger-300 transition-colors"
     >
       Delete
     </button>