fixes

frontend/src/components/Automation/ConfigModal.tsx

@@ -4,6 +4,8 @@
  */
 import React, { useState } from 'react';
 import { AutomationConfig } from '../../services/automationService';
+import { Modal } from '../ui/modal';
+import Button from '../ui/button/Button';
 
 interface ConfigModalProps {
   config: AutomationConfig;
@@ -28,14 +30,24 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onSave(formData);
+    // Ensure delays are included in the save
+    const dataToSave = {
+      ...formData,
+      within_stage_delay: formData.within_stage_delay || 3,
+      between_stage_delay: formData.between_stage_delay || 5,
+    };
+    console.log('Saving config with delays:', dataToSave);
+    onSave(dataToSave);
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-screen overflow-y-auto">
-        <h2 className="text-2xl font-bold mb-4">Automation Configuration</h2>
-
+    <Modal
+      isOpen={true}
+      onClose={onCancel}
+      className="max-w-4xl p-8"
+    >
+      <h2 className="text-2xl font-bold mb-6">Automation Configuration</h2>
+      <div className="max-h-[70vh] overflow-y-auto pr-2">{/* Added pr-2 for scrollbar padding */}
         <form onSubmit={handleSubmit}>
           {/* Enable/Disable */}
           <div className="mb-4">
@@ -270,23 +282,23 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
 
           {/* Buttons */}
           <div className="flex justify-end gap-2 mt-6">
-            <button
+            <Button
               type="button"
               onClick={onCancel}
-              className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
+              variant="secondary"
             >
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               type="submit"
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+              variant="primary"
             >
               Save Configuration
-            </button>
+            </Button>
           </div>
         </form>
       </div>
-    </div>
+    </Modal>
   );
 };
 

frontend/src/components/ui/modal/index.tsx

@@ -92,3 +92,5 @@ export const Modal: React.FC<ModalProps> = ({
     </div>
   );
 };
+
+export default Modal;