feat: themes

frontend/src/modules/graph/components/GraphControls.tsx

@@ -4,7 +4,6 @@ import {
   FiZoomIn,
   FiZoomOut,
   FiMove,
-  FiPlus,
   FiLink,
 } from "react-icons/fi";
 import { useGraphStore } from "../store/useGraphStore";
@@ -16,37 +15,20 @@ interface GraphControlsProps {
   onDataChange?: (data: GraphData) => void;
 }
 
+const btnStyle: React.CSSProperties = {
+  backgroundColor: "var(--bg-secondary)",
+  color: "var(--text-primary)",
+};
+
 export const GraphControls: React.FC<GraphControlsProps> = ({
   fgRef,
   onExport,
   onDataChange,
 }) => {
   const isLinkMode = useGraphStore((s) => s.isLinkMode);
-  const selectedNode = useGraphStore((s) => s.selectedNode);
-  const data = useGraphStore((s) => s.data);
   const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
-  const addNode = useGraphStore((s) => s.addNode);
   const exportData = useGraphStore((s) => s.exportData);
 
-  const handleAddNode = () => {
-    const newNodeName = prompt(
-      "Введите имя узла:",
-      `Node ${data.nodes.length + 1}`,
-    );
-    if (newNodeName) {
-      const isService = window.confirm(
-        "Выберите тип: OK - Сервис, Отмена - Агент",
-      );
-      addNode({
-        id: `node-${Date.now()}`,
-        name: newNodeName,
-        type: isService ? "service" : "agent",
-        val: isService ? 12 : 8,
-        description: "Новый узел",
-      });
-    }
-  };
-
   const handleZoomIn = () => {
     if (fgRef.current) {
       const currentZoom = fgRef.current.zoom();
@@ -72,22 +54,21 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Режим создания связи */}
       <button
         onClick={toggleLinkMode}
-        className={`flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
-          isLinkMode
-            ? "bg-green-600 hover:bg-green-700 text-white"
-            : "bg-gray-800 hover:bg-gray-700 text-gray-300"
-        }`}
+        className="flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
+        style={{
+          backgroundColor: isLinkMode ? "#22c55e" : "var(--bg-secondary)",
+          color: isLinkMode ? "#fff" : "var(--text-primary)",
+        }}
       >
         <FiLink />
-        <span className="text-sm">
-          {isLinkMode ? "Создание связи..." : "Добавить связь"}
-        </span>
+        <span>{isLinkMode ? "Создание связи..." : "Добавить связь"}</span>
       </button>
 
       {/* Зум + */}
       <button
         onClick={handleZoomIn}
-        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
       >
         <FiZoomIn />
       </button>
@@ -95,7 +76,8 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Зум - */}
       <button
         onClick={handleZoomOut}
-        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
       >
         <FiZoomOut />
       </button>
@@ -103,7 +85,8 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Fit */}
       <button
         onClick={handleFit}
-        className="p-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="p-2 rounded-lg transition-colors"
+        style={btnStyle}
       >
         <FiMove />
       </button>
@@ -111,10 +94,11 @@ export const GraphControls: React.FC<GraphControlsProps> = ({
       {/* Экспорт */}
       <button
         onClick={onExport || exportData}
-        className="flex items-center gap-2 px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors text-gray-300"
+        className="flex items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
+        style={btnStyle}
       >
         <FiDownload />
-        <span className="text-sm">Экспорт</span>
+        <span>Экспорт</span>
       </button>
     </div>
   );