Style buttons

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>
+  <div style={{ position: 'relative', display: 'inline-block', marginRight: 8 }}>
     <select
       value={diagramName || ''}
       onChange={(e) => setDiagramName(e.target.value)}
+      className="btn"
       style={{
-              padding: '6px 10px',
-              borderRadius: '8px',
-              border: '1px solid #aaa',
-              background: 'black',
+        padding: '10px 16px',
+        height: 48,
+        fontSize: 16,
         fontWeight: 'bold',
-              minWidth: 120,
+        borderRadius: '12px',
+        border: 'none',
+        background: '#111',
+        color: 'white',
+        cursor: 'pointer',
+        appearance: 'none',
+        width: 180,
       }}
     >
       {diagramList.map((name) => (
-              <option key={name} value={name}>
+        <option key={name} value={name} style={{ color: 'white' }}>
           📌 {name}
         </option>
       ))}
     </select>
-</div>
+    <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) {