From ccc429e25825fcc0348b06e1015a556ea6d81c1f Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 11 Jul 2025 19:01:33 +0300
Subject: [PATCH] Style buttons

---
 frontend/src/components/Diagram.jsx | 60 +++++++++++++++++++----------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx
index 90ec8f0..c916b47 100644
--- a/frontend/src/components/Diagram.jsx
+++ b/frontend/src/components/Diagram.jsx
@@ -199,30 +199,48 @@ function Diagram() {
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10 }}>
-        <div style={{ display: 'inline-block', marginRight: 8 }}>
-          <label style={{ fontWeight: 'bold', marginRight: 4 }}>Diagram: </label>
-          <select
-            value={diagramName || ''}
-            onChange={(e) => setDiagramName(e.target.value)}
-            style={{
-              padding: '6px 10px',
-              borderRadius: '8px',
-              border: '1px solid #aaa',
-              background: 'black',
-              fontWeight: 'bold',
-              minWidth: 120,
-            }}
-          >
-            {diagramList.map((name) => (
-              <option key={name} value={name}>
-                📌 {name}
-              </option>
-            ))}
-          </select>
-</div>
+  <div style={{ position: 'relative', display: 'inline-block', marginRight: 8 }}>
+    <select
+      value={diagramName || ''}
+      onChange={(e) => setDiagramName(e.target.value)}
+      className="btn"
+      style={{
+        padding: '10px 16px',
+        height: 48,
+        fontSize: 16,
+        fontWeight: 'bold',
+        borderRadius: '12px',
+        border: 'none',
+        background: '#111',
+        color: 'white',
+        cursor: 'pointer',
+        appearance: 'none',
+        width: 180,
+      }}
+    >
+      {diagramList.map((name) => (
+        <option key={name} value={name} style={{ color: 'white' }}>
+          📌 {name}
+        </option>
+      ))}
+    </select>
+    <div
+      style={{
+        position: 'absolute',
+        right: 16,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        pointerEvents: 'none',
+      }}
+    >
+      ⏷
+    </div>
+  </div>
+
 
         <button
           className="btn"
+          style={{ marginLeft: 8, background: '#d28519', color: 'white' }}
           onClick={() => {
             const newName = prompt("Enter new diagram name:");
             if (newName) {