From f1c97021f8d6f1ea436d8e8db7cf7e6ead99b5e0 Mon Sep 17 00:00:00 2001
From: Admin <admin@localhost>
Date: Thu, 7 May 2026 01:14:55 +0330
Subject: [PATCH] feature: delete appointment button's UI improved

---
 .../ui/appointments/AppointmentScheduleGrid.tsx    |  4 ++--
 .../ui/appointments/appointmentPurposeStyles.ts    | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx b/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
index 426517e..fd0a98f 100644
--- a/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
@@ -133,7 +133,7 @@ export function AppointmentScheduleGrid({
                         {canDelete && onDeleteAppointment && (
                           <button
                             type="button"
-                            className={`pointer-events-auto shrink-0 self-center z-20 m-1 inline-flex cursor-pointer items-center justify-center border-0 bg-transparent p-2 outline-none transition-opacity hover:opacity-90 focus-visible:rounded-[var(--radius-sm)] focus-visible:ring-2 focus-visible:ring-primary/35 ${purposeDeleteIconClass(apt.purpose)}`}
+                            className="group pointer-events-auto shrink-0 self-center z-20 mr-2 ml-1 inline-flex cursor-pointer items-center justify-center rounded-[var(--radius-sm)] border-0 bg-transparent p-1 outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
                             aria-label="Delete appointment"
                             title="Delete appointment"
                             onClick={(e) => {
@@ -141,7 +141,7 @@ export function AppointmentScheduleGrid({
                               onDeleteAppointment(apt.id);
                             }}
                           >
-                            <Trash2 className="h-6 w-6 icon-flat" strokeWidth={2.25} />
+                            <Trash2 className={`w-4 h-4 ${purposeDeleteIconClass(apt.purpose)}`} />
                           </button>
                         )}
                       </div>
diff --git a/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts b/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
index ac4bd28..6b1e5e5 100644
--- a/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
+++ b/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
@@ -22,17 +22,17 @@ export function purposeStyle(purpose: string): string {
   return APPOINTMENT_PURPOSE_STYLES[p] ?? 'bg-surface-elevated border-border text-text-secondary';
 }
 
-/** Trash icon only — same hues as legend swatches (icon stroke via currentColor). */
+/** Trash icon — legend hues; `!` overrides global `.lucide { color: var(--color-icon) }`. */
 export function purposeDeleteIconClass(purpose: string): string {
   const p = purpose as AppointmentPurpose;
   const map: Record<AppointmentPurpose, string> = {
-    consultation: 'text-violet-400 hover:text-violet-300',
-    filling: 'text-orange-400 hover:text-orange-300',
-    endo: 'text-red-400 hover:text-red-300',
-    visit: 'text-sky-400 hover:text-sky-300',
-    hygiene: 'text-lime-700 hover:text-lime-600',
+    consultation: '!text-violet-400 group-hover:!text-violet-300',
+    filling: '!text-orange-400 group-hover:!text-orange-300',
+    endo: '!text-red-400 group-hover:!text-red-300',
+    visit: '!text-sky-400 group-hover:!text-sky-300',
+    hygiene: '!text-lime-600 group-hover:!text-lime-500',
   };
-  return map[p] ?? 'text-text-muted hover:text-text-secondary';
+  return map[p] ?? '!text-text-muted group-hover:!text-text-secondary';
 }
 
 /** Small swatch for legend (background + border only). */