refactor(ui): Modals & Unterseiten auf Primitives & dark: umgestellt

docker/ui/src/components/ConfirmDialog.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react'
-import { useDarkMode } from '../context/ThemeContext'
+import { AlertTriangle, CheckCircle2, HelpCircle } from 'lucide-react'
+import { Modal } from './ui/Modal'
+import { Button } from './ui/Button'
 
 interface ConfirmDialogProps {
   isOpen: boolean
@@ -22,62 +23,51 @@ export default function ConfirmDialog({
   cancelText = 'Abbrechen',
   type = 'info',
 }: ConfirmDialogProps) {
-  const { theme } = useDarkMode()
 
   const getIcon = () => {
     switch (type) {
-      case 'warning': return <span className="text-4xl">⚠️</span>
-      case 'success': return <span className="text-4xl">✅</span>
-      default: return <span className="text-4xl">🤔</span>
+      case 'warning':
+        return <AlertTriangle className="text-amber-500 w-8 h-8 flex-shrink-0" />
+      case 'success':
+        return <CheckCircle2 className="text-emerald-500 w-8 h-8 flex-shrink-0" />
+      default:
+        return <HelpCircle className="text-indigo-500 w-8 h-8 flex-shrink-0" />
     }
   }
 
-  const getConfirmColor = () => {
+  const getConfirmVariant = () => {
     switch (type) {
-      case 'warning': return 'bg-amber-600 hover:bg-amber-700 shadow-lg shadow-amber-500/30'
-      case 'success': return 'bg-emerald-600 hover:bg-emerald-700 shadow-lg shadow-emerald-500/30'
-      default: return 'bg-indigo-600 hover:bg-indigo-700 shadow-lg shadow-indigo-500/30'
+      case 'warning':
+        return 'amber'
+      case 'success':
+        return 'primary'
+      default:
+        return 'primary'
     }
   }
 
-  if (!isOpen) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm transition-all">
-      <div className={`w-full max-w-md rounded-xl shadow-2xl transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
-        {/* Header */}
-        <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
-          <div className="flex items-center gap-3">
-            {getIcon()}
-            <h2 className={`text-xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
-              {title}
-            </h2>
-          </div>
-        </div>
-
-        {/* Body */}
-        <div className="px-6 py-6">
-          <p className={`text-sm leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+    <Modal isOpen={isOpen} onClose={onClose} maxWidth="md">
+      <div className="flex items-start gap-4">
+        {getIcon()}
+        <div className="space-y-2 flex-1">
+          <h2 className="text-lg font-bold text-slate-900 dark:text-slate-100">
+            {title}
+          </h2>
+          <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
             {message}
           </p>
         </div>
-
-        {/* Footer */}
-        <div className={`px-6 py-4 border-t transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex justify-end gap-3`}>
-          <button
-            onClick={onClose}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${theme === 'dark' ? 'text-slate-400 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100'}`}
-          >
-            {cancelText}
-          </button>
-          <button
-            onClick={onConfirm}
-            className={`px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors ${getConfirmColor()}`}
-          >
-            {confirmText}
-          </button>
-        </div>
       </div>
-    </div>
+
+      <div className="mt-6 flex justify-end gap-3 border-t border-slate-200 dark:border-slate-800 pt-4">
+        <Button variant="secondary" onClick={onClose}>
+          {cancelText}
+        </Button>
+        <Button variant={getConfirmVariant()} onClick={onConfirm}>
+          {confirmText}
+        </Button>
+      </div>
+    </Modal>
   )
 }