From 73d1d47cd15b16f1159600c8f45ca0d3a38484a8 Mon Sep 17 00:00:00 2001
From: Sadrinho27 <Titouan.tabere@gmail.com>
Date: Thu, 2 Oct 2025 23:21:45 +0200
Subject: [PATCH] Added Modal animation a updated css

---
 components/ui/modal/Modal.css | 95 +++++++++++++++++------------------
 components/ui/modal/Modal.tsx | 36 ++++++++-----
 2 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/components/ui/modal/Modal.css b/components/ui/modal/Modal.css
index 6da31ab..d768186 100644
--- a/components/ui/modal/Modal.css
+++ b/components/ui/modal/Modal.css
@@ -1,104 +1,101 @@
-/* Modal Overlay */
+/* Overlay */
 .modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+  background-color: rgba(17, 24, 39, 0.55);
+  backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   padding: 1rem;
+  transition: opacity 0.3s ease;
 }
 
-/* Modal Container */
+.fade-in { opacity: 1; }
+.fade-out { opacity: 0; }
+
+/* Container */
 .modal-container {
-  background: white;
-  border-radius: 0.75rem;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
   max-height: 90vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   width: 100%;
+  transition: all 0.3s ease;
 }
 
-.modal-sm {
-  max-width: 28rem;
+.modal-sm { max-width: 28rem; }
+.modal-md { max-width: 32rem; }
+.modal-lg { max-width: 48rem; }
+.modal-xl { max-width: 64rem; }
+
+.slide-in {
+  transform: translateY(0);
+  opacity: 1;
 }
 
-.modal-md {
-  max-width: 32rem;
+.slide-out {
+  transform: translateY(20px);
+  opacity: 0;
 }
 
-.modal-lg {
-  max-width: 48rem;
-}
-
-.modal-xl {
-  max-width: 64rem;
-}
-
-/* Modal Header */
+/* Header */
 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1.5rem;
+  padding: 1.25rem 1.5rem;
+  background: linear-gradient(90deg, #f9fafb, #f3f4f6);
   border-bottom: 1px solid #e5e7eb;
-  background: #f9fafb;
 }
 
 .modal-title {
-  font-size: 1.25rem;
+  font-size: 1.3rem;
   font-weight: 600;
   color: #111827;
   margin: 0;
 }
 
+/* Close Button */
 .modal-close-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   border: none;
   background: none;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   color: #6b7280;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .modal-close-button:hover {
-  background-color: #f3f4f6;
-  color: #374151;
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #111827;
+  transform: rotate(90deg);
 }
 
-/* Modal Content */
+/* Content */
 .modal-content {
   flex: 1;
   overflow-y: auto;
-  padding: 0;
+  padding: 1.5rem;
+  background: #fff;
 }
 
-/* Responsive */
-@media (max-width: 640px) {
-  .modal-overlay {
-    padding: 0.5rem;
+@keyframes fadeInSuccess {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
   }
-  
-  .modal-container {
-    max-height: 95vh;
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
-  
-  .modal-header {
-    padding: 1rem;
-  }
-  
-  .modal-title {
-    font-size: 1.125rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/components/ui/modal/Modal.tsx b/components/ui/modal/Modal.tsx
index 7adbe04..c95aa77 100644
--- a/components/ui/modal/Modal.tsx
+++ b/components/ui/modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import './Modal.css';
 
@@ -10,14 +10,26 @@ interface ModalProps {
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
-const Modal: React.FC<ModalProps> = ({ 
-  isOpen, 
-  onClose, 
-  title, 
-  children, 
-  size = 'md' 
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = 'md'
 }) => {
-  if (!isOpen) return null;
+  const [isVisible, setIsVisible] = useState(isOpen);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+    } else {
+      // attendre que l'animation de fermeture se joue
+      const timer = setTimeout(() => setIsVisible(false), 300); // durée en ms = durée CSS
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  if (!isVisible) return null;
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
@@ -26,8 +38,8 @@ const Modal: React.FC<ModalProps> = ({
   };
 
   return (
-    <div className="modal-overlay" onClick={handleBackdropClick}>
-      <div className={`modal-container modal-${size}`}>
+    <div className={`modal-overlay ${isOpen ? 'fade-in' : 'fade-out'}`} onClick={handleBackdropClick}>
+      <div className={`modal-container modal-${size} ${isOpen ? 'slide-in' : 'slide-out'}`}>
         <div className="modal-header">
           <h2 className="modal-title">{title}</h2>
           <button
@@ -38,9 +50,7 @@ const Modal: React.FC<ModalProps> = ({
             <X className="h-5 w-5" />
           </button>
         </div>
-        <div className="modal-content">
-          {children}
-        </div>
+        <div className="modal-content">{children}</div>
       </div>
     </div>
   );