Smooth dialog transition

Author: jsoningram

src/components/confirm-dialog/confirm-dialog.module.css

@@ -13,6 +13,22 @@
   z-index: 10000;
   padding: 16px;
   box-sizing: border-box;
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay {
+    animation: none;
+  }
 }
 
 .dialog {
@@ -29,6 +45,24 @@
   flex-direction: column;
   align-items: center;
   gap: 16px;
+  animation: slideUp 0.2s ease-in-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog {
+    animation: none;
+  }
 }
 
 .closeButton {

src/components/confirm-dialog/confirm-dialog.tsx

@@ -110,7 +110,9 @@ export default function ConfirmDialog({
     }
   };
 
-  if (!isOpen) return null;
+  if (!isOpen) {
+    return null;
+  }
 
   return (
     <div