feat: tweak ui styles

web-plugin/index.js

@@ -4,6 +4,39 @@ import { ComfyWidgets, LGraphNode } from "./widgets.js";
 import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.25";
 import { ComfyDeploy } from "https://esm.sh/comfydeploy@0.0.19-beta.30";
 
+const styles = `
+.comfydeploy-menu-item {
+    background: linear-gradient(to right, rgba(74, 144, 226, 0.9), rgba(103, 178, 111, 0.9)) !important;
+    color: white !important;
+    position: relative !important;
+    padding-left: 20px !important;
+}
+
+.comfydeploy-menu-item:hover {
+    filter: brightness(1.1) !important;
+    cursor: pointer !important;
+}
+
+.comfydeploy-menu-item::before {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    background-image: url('https://www.comfydeploy.com/icon.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+`;
+
+// Add stylesheet to document
+const styleSheet = document.createElement("style");
+styleSheet.textContent = styles;
+document.head.appendChild(styleSheet);
+
 const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg>`;
 
 function sendEventToCD(event, data) {
@@ -188,15 +221,14 @@ function convertToInput(node, widget, config) {
     console.log(app.graph);
     app.graph.add(inputNode);
 
-    const links = app.graph.links
+    const links = app.graph.links;
 
     console.log(links);
 
-
     currentOutputsLinks.forEach((link) => {
-      const llink = links[link]
+      const llink = links[link];
       console.log(links[link]);
-      inputNode.connect(0, llink.target_id, llink.target_slot)
+      inputNode.connect(0, llink.target_id, llink.target_slot);
       // const link = graph.links[link];
       // console.log(link);
       // inputNode.connect(0, )
@@ -398,11 +430,12 @@ const ext = {
             ];
             if (isConvertibleWidget(w, config)) {
               toInput.push({
-                content: `Convert ${w.name} to input`,
+                content: `Convert ${w.name} to external input`,
                 callback: /* @__PURE__ */ __name(
                   () => convertToInput(this, w, config),
                   "callback",
                 ),
+                className: "comfydeploy-menu-item",
               });
             }
           }
@@ -417,12 +450,14 @@ const ext = {
             options.splice(
               0,
               0,
-              {
+              // {
-                content: "[ComfyDeploy] Convert to External Input",
+              //   content: "[ComfyDeploy] Convert to External Input",
-                submenu: {
+              //   submenu: {
-                  options: toInput,
+              //     options: toInput,
-                },
+              //   },
-              },
+              //   className: "comfydeploy-menu-item"
+              // },
+              ...toInput,
               null,
             );
           } else {