feat: replace native confirm() dialogs with custom modal component

- Add ModalProvider context and useConfirm hook (confirm-modal.tsx)
- Support danger/warning/info variants with icons and colors
- Animated backdrop and dialog with CSS keyframes
- Accessible: aria-modal, role=dialog, ESC to close, auto-focus
- Replace all 6 native confirm() calls across dashboard pages
- Integrate ModalProvider in app providers
This commit is contained in:
keyhan
2026-04-07 23:38:55 +03:30
parent 5979b48a61
commit ac5278d73b
10 changed files with 222 additions and 14 deletions
+16
View File
@@ -138,3 +138,19 @@
.animate-slide-up {
animation: slideUp 0.4s ease-out;
}
/* ─── Modal animations ───────────────────────────────── */
@keyframes modalBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalEnter {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-modal-backdrop {
animation: modalBackdropIn 0.15s ease-out;
}
.animate-modal-enter {
animation: modalEnter 0.2s ease-out;
}