fixees

frontend/src/components/Automation/ActivityLog.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useState, useEffect } from 'react';
 import { automationService } from '../../services/automationService';
+import ComponentCard from '../common/ComponentCard';
 
 interface ActivityLogProps {
   runId: string;
@@ -31,15 +32,17 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
   };
 
   return (
-    <div className="bg-white p-4 rounded-lg shadow">
+    <ComponentCard
+      title="Activity Log"
+      desc="Real-time automation progress and events"
+    >
       <div className="flex items-center justify-between mb-3">
-        <h2 className="text-xl font-bold">Activity Log</h2>
         <div className="flex items-center gap-2">
-          <label className="text-sm">Lines:</label>
+          <label className="text-sm text-gray-600 dark:text-gray-400">Lines:</label>
           <select
             value={lines}
             onChange={(e) => setLines(parseInt(e.target.value))}
-            className="border rounded px-2 py-1 text-sm"
+            className="border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
           >
             <option value={50}>50</option>
             <option value={100}>100</option>
@@ -48,11 +51,14 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
           </select>
         </div>
       </div>
-      <div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-xs overflow-auto max-h-96">
+      <div className="bg-gray-900 dark:bg-gray-950 text-green-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">
         <pre className="whitespace-pre-wrap">{logs || 'No logs available'}</pre>
       </div>
-    </div>
+    </ComponentCard>
   );
 };
 
 export default ActivityLog;
+};
+
+export default ActivityLog;