Fix popup

frontend/src/App.css

@@ -10,3 +10,20 @@
 .btn:hover {
   background: #125ea8;
 }
+
+select {
+  font-size: 14px;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+code {
+  background: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.form-title {
+  color: #125ea8;
+}

frontend/src/components/Diagram.jsx

@@ -106,18 +106,61 @@ function Diagram() {
       </div>
 
       {showForm && (
-        <div style={{ position: 'absolute', zIndex: 20, right: 10, top: 80, background: '#fff', padding: 10, borderRadius: 6, boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}>
-          <h4>Add Node</h4>
+        <div
+          style={{
+            position: 'absolute',
+            zIndex: 20,
+            right: 10,
+            top: 80,
+            background: '#e6f0fa',
+            padding: '16px',
+            borderRadius: '12px',
+            boxShadow: '0 4px 8px rgba(0,0,0,0.15)',
+            width: 280,
+          }}
+        >
+          <h4
+            style={{
+              color: '#125ea8',
+              marginBottom: 12,
+              fontSize: 18,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            🧩 Add New Node
+          </h4>
+
+          <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>
+            Label:
+          </label>
           <input
             type="text"
             placeholder="Enter label"
             value={newLabel}
             onChange={(e) => setNewLabel(e.target.value)}
-            style={{ marginBottom: 8, display: 'block', width: '100%' }}
+            style={{
+              padding: '6px',
+              width: '100%',
+              borderRadius: 6,
+              border: '1px solid #ccc',
+              marginBottom: 12,
+            }}
           />
+
           <IconSelector onSelect={setSelectedIcon} />
-          <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
-          <button className="btn" style={{ marginLeft: 8 }} onClick={() => setShowForm(false)}>❌ Cancel</button>
+
+          <div style={{ marginTop: 12 }}>
+            <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
+            <button
+              className="btn"
+              style={{ marginLeft: 8, background: '#ccc', color: '#333' }}
+              onClick={() => setShowForm(false)}
+            >
+              ❌ Cancel
+            </button>
+          </div>
         </div>
       )}
 
@@ -139,4 +182,4 @@ function Diagram() {
   );
 }
 
-export default Diagram;
+export default Diagram;

frontend/src/components/IconSelector.jsx

@@ -17,39 +17,75 @@ function IconSelector({ onSelect }) {
     onSelect('');
   };
 
-  const handleIconChange = (e) => {
-    const icon = e.target.value;
-    setSelectedIcon(icon);
-    onSelect(icon);
+  const handleIconClick = (url) => {
+    setSelectedIcon(url);
+    onSelect(url);
   };
 
   return (
     <div style={{ marginBottom: '1rem' }}>
-      <label>Category:&nbsp;</label>
-      <select value={selectedCategory} onChange={handleCategoryChange}>
-        <option value="">Select Category</option>
-        {Object.keys(categories).map((cat) => (
-          <option key={cat} value={cat}>{cat}</option>
-        ))}
-      </select>
+      <div style={{ marginBottom: '0.5rem' }}>
+        <label style={{ fontWeight: 'bold', color: '#333' }}>Category:&nbsp;</label>
+        <select
+          value={selectedCategory}
+          onChange={handleCategoryChange}
+          style={{
+            padding: '6px',
+            borderRadius: '6px',
+            border: '1px solid #ccc',
+            fontSize: '14px',
+          }}
+        >
+          <option value="">Select Category</option>
+          {Object.keys(categories).map((cat) => (
+            <option key={cat} value={cat}>
+              {cat}
+            </option>
+          ))}
+        </select>
+      </div>
 
       {selectedCategory && (
-        <>
-          <label style={{ marginLeft: '1rem' }}>Icon:&nbsp;</label>
-          <select value={selectedIcon} onChange={handleIconChange}>
-            <option value="">Select Icon</option>
+        <div>
+          <label style={{ fontWeight: 'bold' }}>Choose an icon:</label>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(40px, 1fr))',
+              gap: '10px',
+              marginTop: '0.5rem',
+              maxHeight: 120,
+              overflowY: 'auto',
+              padding: '6px',
+              border: '1px solid #ddd',
+              borderRadius: '6px',
+              background: '#f9f9f9',
+            }}
+          >
             {categories[selectedCategory].map((url) => (
-              <option key={url} value={url}>{url.split('/').pop()}</option>
+              <img
+                key={url}
+                src={url}
+                alt=""
+                title={url.split('/').pop()}
+                onClick={() => handleIconClick(url)}
+                style={{
+                  width: 32,
+                  height: 32,
+                  cursor: 'pointer',
+                  border: url === selectedIcon ? '2px solid #1976d2' : '2px solid transparent',
+                  borderRadius: 4,
+                  backgroundColor: '#fff',
+                }}
+              />
             ))}
-          </select>
+          </div>
           {selectedIcon && (
-            <img
-              src={selectedIcon}
-              alt="preview"
-              style={{ width: 32, height: 32, marginLeft: 10, verticalAlign: 'middle' }}
-            />
+            <p style={{ marginTop: 8, fontSize: 13 }}>
+              Selected: <code>{selectedIcon.split('/').pop()}</code>
+            </p>
           )}
-        </>
+        </div>
       )}
     </div>
   );