From cd96cbf15dbdac5f2b41325c563455e12245ff5e Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 11 Jul 2025 18:44:10 +0300
Subject: [PATCH] Style buttons

---
 frontend/src/components/Diagram.jsx | 34 ++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index b0564dc..27ea053 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -240,11 +240,35 @@ function Diagram() {
         >
           🆕 New Diagram
         </button>
-        <button onClick={handleSave} className="btn" style={{ marginLeft: 8 }}>💾 Save</button>
-        <button onClick={handleAddNode} className="btn" style={{ marginLeft: 8 }}>➕ Add Node</button>
-        <button onClick={handleDeleteNode} className="btn" style={{ marginLeft: 8 }} disabled={!selectedNode}>🗑️ Delete Node</button>
-        <button onClick={handleDeleteEdge} className="btn" style={{ marginLeft: 8 }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
-        <button onClick={handleDeleteDiagram} className="btn" style={{ marginLeft: 8 }}>🗑️ Delete Diagram</button>
+        <button onClick={handleSave} className="btn" style={{ marginLeft: 8, background: 'green' }}>💾 Save</button>
+        <button onClick={handleAddNode} className="btn" style={{ marginLeft: 8, background: 'blue' }}>➕ Add Node</button>
+        <button
+          onClick={handleDeleteNode}
+          className="btn"
+          style={{
+            marginLeft: 8,
+            background: selectedNode ? '#b81a1a' : '#ccc',
+            color: selectedNode ? 'white' : '#666',
+            cursor: selectedNode ? 'pointer' : 'not-allowed',
+          }}
+          disabled={!selectedNode}
+        >
+          🗑️ Delete Node
+        </button>
+        <button
+          onClick={handleDeleteEdge}
+          className="btn" 
+          style={{ 
+            marginLeft: 8,
+            background: selectedNode ? '#b81a1a' : '#ccc',
+            color: selectedNode ? 'white' : '#666',
+            cursor: selectedNode ? 'pointer' : 'not-allowed',
+          }} 
+          disabled={!selectedEdge}
+        >
+          🗑️ Delete Edge
+        </button>
+        <button onClick={handleDeleteDiagram} className="btn" style={{ marginLeft: 8, background: 'red' }}>🗑️ Delete Diagram</button>
       </div>
 
       {showForm && (