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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user