context menu for connections

src/functions/contextmenu.js

@@ -12,7 +12,7 @@ export const initContextmenu = (instance) => {
       window.selectedConnection = component;
       $(
         `<div class='custom-menu'>
-          <button style='background-color: red; color: white; border: none; padding: 6px 12px;' class='delete-connection'>
+          <button class='custom-menu-button' id='delete-connection'>
             Delete connection
           </button>
         </div>`
@@ -22,7 +22,7 @@ export const initContextmenu = (instance) => {
     }
   });
 
-  $("body").on("click", ".delete-connection", (event) => {
+  $("body").on("click", "#delete-connection", (event) => {
     instance.deleteConnection(window.selectedConnection);
   });
   $(document).bind("click", (event) => {

src/style.css

@@ -98,6 +98,7 @@ body {
 
 #delete-pipe:hover {
   background-color: red;
+  color: white;
 }
 
 #delete-filter:hover {
@@ -105,6 +106,11 @@ body {
   color: white;
 }
 
+#delete-connection:hover {
+  background-color: red;
+  color: white;
+}
+
 #scale-out:hover {
   background-color: blue;
   color: white;