admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

feature: delete appointment button's UI improved

Browse Source
This commit is contained in:
Admin
2026-05-07 01:14:55 +03:30
parent 8123a94a3d
commit f1c97021f8
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
View File

@@ -133,7 +133,7 @@ export function AppointmentScheduleGrid({
{canDelete && onDeleteAppointment && ( {canDelete && onDeleteAppointment && (
<button <button
type="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" aria-label="Delete appointment"
title="Delete appointment" title="Delete appointment"
onClick={(e) => { onClick={(e) => {
@@ -141,7 +141,7 @@ export function AppointmentScheduleGrid({
onDeleteAppointment(apt.id); onDeleteAppointment(apt.id);
}} }}
> >
<Trash2 className="h-6 w-6 icon-flat" strokeWidth={2.25} /> <Trash2 className={`w-4 h-4 ${purposeDeleteIconClass(apt.purpose)}`} />
</button> </button>
)} )}
</div> </div>

14
frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
View File

@@ -22,17 +22,17 @@ export function purposeStyle(purpose: string): string {
return APPOINTMENT_PURPOSE_STYLES[p] ?? 'bg-surface-elevated border-border text-text-secondary'; 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 { export function purposeDeleteIconClass(purpose: string): string {
const p = purpose as AppointmentPurpose; const p = purpose as AppointmentPurpose;
const map: Record<AppointmentPurpose, string> = { const map: Record<AppointmentPurpose, string> = {
consultation: 'text-violet-400 hover:text-violet-300', consultation: '!text-violet-400 group-hover:!text-violet-300',
filling: 'text-orange-400 hover:text-orange-300', filling: '!text-orange-400 group-hover:!text-orange-300',
endo: 'text-red-400 hover:text-red-300', endo: '!text-red-400 group-hover:!text-red-300',
visit: 'text-sky-400 hover:text-sky-300', visit: '!text-sky-400 group-hover:!text-sky-300',
hygiene: 'text-lime-700 hover:text-lime-600', 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). */ /** Small swatch for legend (background + border only). */