feat: Замена базового компонента Modal на SmallModal в ConfirmDialog, ConfirmDiffModal и ConfirmModal для улучшения компактности и унификации интерфейса. Обновление стилей и добавление иконок для улучшения визуального восприятия.

frontend/src/components/ConfirmDialog.jsx

@@ -1,9 +1,9 @@
-import Modal from './Modal';
-import { IconAlertTriangle } from '@tabler/icons-react';
+import { SmallModal } from './Modal';
+import { IconAlertTriangle, IconCheck, IconX } from '@tabler/icons-react';
 
 /**
  * ConfirmDialog - упрощённая версия ConfirmModal для быстрых подтверждений
- * Рефакторинг: теперь использует базовый Modal компонент
+ * Алиас для ConfirmModal с другим API (для обратной совместимости)
  */
 export default function ConfirmDialog({ 
   open, 
@@ -17,17 +17,18 @@ export default function ConfirmDialog({
   size = 'sm',
   loading = false
 }) {
-  const handleConfirm = () => {
-    onConfirm?.();
-  };
-
   return (
-    <Modal
+    <SmallModal
       show={open}
       onClose={onCancel}
-      title={title}
-      size={size}
-      centered
+      title={
+        <div className="d-flex align-items-center">
+          {destructive && (
+            <IconAlertTriangle className="text-danger me-2" size={24} />
+          )}
+          {title}
+        </div>
+      }
       footer={
         <>
           <button 
@@ -36,32 +37,27 @@ export default function ConfirmDialog({
             onClick={onCancel}
             disabled={loading}
           >
+            <IconX size={16} className="me-1" />
             {cancelText}
           </button>
           <button 
             type="button" 
             className={`btn ${destructive ? 'btn-danger' : 'btn-primary'}`}
-            onClick={handleConfirm}
+            onClick={onConfirm}
             disabled={loading}
           >
             {loading && (
               <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
             )}
+            <IconCheck size={16} className="me-1" />
             {confirmText}
           </button>
         </>
       }
     >
-      <div className="d-flex align-items-start">
-        {destructive && (
-          <div className="flex-shrink-0 me-3">
-            <IconAlertTriangle className="text-danger" size={32} />
-          </div>
-        )}
-        <div className="flex-grow-1">
-          <p className="mb-0">{message}</p>
-        </div>
+      <div className="text-muted">
+        <p className="mb-0">{message}</p>
       </div>
-    </Modal>
+    </SmallModal>
   );
 }