Refactor code structure for improved readability and maintainability

assets/admin/components/ui/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface Props {
   open: boolean;
@@ -27,43 +27,36 @@ export default function ConfirmDialog({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
-      <div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onCancel} />
-      <div
-        className="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl dark:shadow-black/40 border border-slate-200/60 dark:border-gray-700/50 w-full max-w-sm p-6 animate-scale-in"
-      >
-        <div className="flex items-start gap-4">
-          <div className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${danger ? 'bg-red-100 dark:bg-red-500/10' : 'bg-amber-100 dark:bg-amber-500/10'}`}>
-            <ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} />
-          </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-snug">{title}</h3>
-            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{message}</p>
+    <div className="overlay" onClick={onCancel}>
+      <div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
+        <div className="modal-head">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <span style={{
+              width: 36, height: 36, borderRadius: 10, display: 'grid', placeItems: 'center', flexShrink: 0,
+              background: danger ? 'var(--danger-bg)' : 'var(--warning-bg)',
+              color: danger ? 'var(--danger)' : 'var(--warning)',
+            }}>
+              <ExclamationTriangleIcon style={{ width: 18, height: 18 }} />
+            </span>
+            <h2 style={{ fontSize: 16 }}>{title}</h2>
           </div>
+          <button className="mini-btn" onClick={onCancel}>
+            <XMarkIcon style={{ width: 18, height: 18 }} />
+          </button>
         </div>
-
-        <div className="flex gap-3 mt-6 justify-end">
-          <button
-            onClick={onCancel}
-            disabled={loading}
-            className="cp-btn-secondary px-5 py-2"
-          >
+        <div className="modal-body">
+          <p style={{ color: 'var(--text-2)', lineHeight: 1.75, margin: 0 }}>{message}</p>
+        </div>
+        <div className="modal-foot" style={{ justifyContent: 'flex-end' }}>
+          <button className="btn ghost sm" onClick={onCancel} disabled={loading}>
             {cancelLabel}
           </button>
           <button
+            className={`btn ${danger ? 'danger' : 'primary'} sm`}
             onClick={onConfirm}
             disabled={loading}
-            className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
           >
-            {loading ? (
-              <span className="flex items-center gap-2">
-                <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
-                </svg>
-                در حال انجام...
-              </span>
-            ) : confirmLabel}
+            {loading ? 'در حال انجام...' : confirmLabel}
           </button>
         </div>
       </div>