julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(NotesList): enhance delete confirmation UI with improved styling and dynamic note title display

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-17 08:29:26 +01:00
parent 6cad6a333d
commit 72cd76c77b
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/notes/NotesList.tsx
View File

@@ -224,20 +224,28 @@ export function NotesList({
{/* Delete Confirmation */} {/* Delete Confirmation */}
{showDeleteConfirm === note.id && ( {showDeleteConfirm === note.id && (
<div className="absolute inset-0 bg-[var(--destructive)]/5 border border-[var(--destructive)]/20 rounded-lg p-3 backdrop-blur-sm"> <div
<div className="text-sm text-[var(--foreground)] mb-2"> className="absolute inset-0 rounded-lg p-3 backdrop-blur-md z-10"
Supprimer cette note ? style={{
backgroundColor:
'color-mix(in srgb, var(--destructive) 15%, var(--card))',
border:
'1px solid color-mix(in srgb, var(--destructive) 40%, var(--border))',
}}
>
<div className="text-sm font-medium text-[var(--foreground)] mb-2 line-clamp-1">
Supprimer "{getNoteTitle(note.content)}" ?
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={() => handleDeleteConfirm(note.id)} onClick={() => handleDeleteConfirm(note.id)}
className="px-2 py-1 bg-[var(--destructive)] text-[var(--primary-foreground)] rounded text-xs hover:bg-[var(--destructive)]/90" className="px-2 py-1 bg-[var(--destructive)] text-[var(--primary-foreground)] rounded text-xs hover:bg-[var(--destructive)]/90 transition-colors"
> >
Supprimer Supprimer
</button> </button>
<button <button
onClick={handleDeleteCancel} onClick={handleDeleteCancel}
className="px-2 py-1 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-xs hover:bg-[var(--card-hover)]" className="px-2 py-1 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-xs hover:bg-[var(--card-hover)] transition-colors"
> >
Annuler Annuler
</button> </button>