feat: Details pane: use different colors for button categories

Author: mstimberg

graph.js

@@ -69,15 +69,15 @@ const BUTTON_ROWS = [
     ["forum", "issue tracker", "chat", "email"]
 ];
 
-function urlButton(type, url) {
+function urlButton(type, url, btnClass) {
     const button = document.createElement("button");
     let iconFile = BUTTON_ICONS[type];
     button.type = "button"
-    button.classList.add('btn', 'btn-sm', 'm-1');
+    button.classList.add('btn', 'm-1');
     let icon = `<img aria-hidden='true' focusable='false' class='icon' src='assets/${iconFile}'></img>`;
     button.innerHTML = icon + " " + type;
     if (url !== undefined)  {
-        button.classList.add('btn-info');
+        button.classList.add(btnClass);
         button.onclick = function() {
             window.open(url, "_blank");
         }

index.js

@@ -103,19 +103,17 @@ function showDetails(data, connected) {
         link_heading.innerHTML = "Links";
         let tool_links = data["urls"];
         details_bottom.appendChild(link_heading);
+        const flex_div = document.createElement("div");
+        flex_div.classList.add("d-flex", "flex-wrap");
+        const btnClasses = ["btn-primary", "btn-success", "btn-warning"];
         for (let row_idx=0; row_idx < BUTTON_ROWS.length; row_idx++) {
-            let row = document.createElement("div");
-            row.classList.add("row");
             // Go through elements in BUTTON_ROWS
             for (const button_type of BUTTON_ROWS[row_idx]) {
-                let col = document.createElement("div");
-                col.classList.add("col-auto");
-                let button = urlButton(button_type, tool_links[button_type]);
-                col.appendChild(button);
-                row.appendChild(col);
+                let button = urlButton(button_type, tool_links[button_type], btnClasses[row_idx]);
+                flex_div.appendChild(button);
             }
-            details_bottom.appendChild(row);
         }
+        details_bottom.appendChild(flex_div);
     }
     // hide filter pane
     const filterPane = new bootstrap.Offcanvas('#filter_pane');