@mytec: iter1.1.1 ready for testing

frontend/src/components/ui/ConfirmDialog.tsx

@@ -7,9 +7,17 @@ interface ConfirmDialogProps {
   cancelLabel?: string;
   onConfirm: () => void;
   onCancel: () => void;
+  /** @deprecated Use variant instead */
   danger?: boolean;
+  variant?: 'danger' | 'warning' | 'info';
 }
 
+const VARIANT_STYLES = {
+  danger: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
+  warning: 'bg-amber-500 hover:bg-amber-600 focus:ring-amber-400',
+  info: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
+} as const;
+
 export default function ConfirmDialog({
   title,
   message,
@@ -18,11 +26,15 @@ export default function ConfirmDialog({
   onConfirm,
   onCancel,
   danger = false,
+  variant,
 }: ConfirmDialogProps) {
   const confirmRef = useRef<HTMLButtonElement>(null);
 
+  // Resolve variant: explicit variant prop takes priority, then legacy danger boolean
+  const resolvedVariant = variant ?? (danger ? 'danger' : 'info');
+
   useEffect(() => {
-    // Auto-focus the cancel button (safer default)
+    // Auto-focus the confirm button
     confirmRef.current?.focus();
 
     const handleKey = (e: KeyboardEvent) => {
@@ -67,10 +79,7 @@ export default function ConfirmDialog({
             ref={confirmRef}
             onClick={onConfirm}
             className={`px-4 py-2 text-sm rounded-md text-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
-              ${danger
-                ? 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
-                : 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
-              }`}
+              ${VARIANT_STYLES[resolvedVariant]}`}
           >
             {confirmLabel}
           </button>