Minor polish

js/comfyui-share-common.js

@@ -163,7 +163,7 @@ export class ShareDialogChooser extends ComfyDialog {
 				{},
 				[...this.createButtons()]),
 			]);
-			
+
 	}
 	createButtons() {
 		const handleShowOpenArtShareDialog = () => {
@@ -173,7 +173,7 @@ export class ShareDialogChooser extends ComfyDialog {
 			OpenArtShareDialog.instance.show()
 			this.close();
 		}
-		
+
 		const handleShowShareDialog = () => {
 			if (!ShareDialog.instance) {
 				ShareDialog.instance = new ShareDialog();
@@ -206,21 +206,21 @@ export class ShareDialogChooser extends ComfyDialog {
 				key: "openart",
 				textContent: "OpenArt AI",
 				website: "https://openart.ai/workflows/",
-				description: "Best place to share your workflow and art.",
+				description: "Share ComfyUI workflows and art on OpenArt.ai",
 				onclick: handleShowOpenArtShareDialog
 			},
 			{
 				key: "matrix",
 				textContent: "Matrix Server",
 				website: "https://app.element.io/#/room/%23comfyui_space%3Amatrix.org",
-				description: "Share your art on the official ComfyUI matrix server.",
+				description: "Share your art on the official ComfyUI matrix server",
 				onclick: handleShowShareDialog
 			},
 			{
 				key: "comfyworkflows",
 				textContent: "ComfyWorkflows",
 				website: "https://comfyworkflows.com",
-				description: "Share ComfyUI art: Download & drop any image into ComfyUI to load its workflow.",
+				description: "Share ComfyUI art on comfyworkflows.com",
 				onclick: handleShowShareDialog
 			},
 		];
@@ -235,7 +235,7 @@ export class ShareDialogChooser extends ComfyDialog {
 					'padding': '20px',
 				}
 			});
-		
+
 			buttons.forEach(b => {
 				const button = $el("button", {
 					type: "button",
@@ -258,18 +258,17 @@ export class ShareDialogChooser extends ComfyDialog {
 				button.addEventListener('mouseout', () => {
 					button.style.backgroundColor = b.backgroundColor || '';
 				});
-		
+
 				const description = $el("p", {
 					textContent: b.description,
 					style: {
-						'text-align': 'center',
+						'text-align': 'left',
 						color: 'white',
-						'font-style': 'italic',
 						'font-size': '14px',
 						'margin-bottom': '10px',
 					},
 				});
-		
+
 				const websiteLink = $el("a", {
 					textContent: "🌐 Website",
 					href: b.website,
@@ -287,11 +286,11 @@ export class ShareDialogChooser extends ComfyDialog {
 				websiteLink.addEventListener('mouseover', () => {
 					websiteLink.style.opacity = '0.7';
 				});
-		
+
 				websiteLink.addEventListener('mouseout', () => {
 					websiteLink.style.opacity = '1';
 				});
-		
+
 				const buttonLinkContainer = $el("div", {
 					style: {
 						display: 'flex',
@@ -299,7 +298,7 @@ export class ShareDialogChooser extends ComfyDialog {
 						'margin-bottom': '10px',
 					}
 				}, [button, websiteLink]);
-		
+
 				const column = $el("div", {
 					style: {
 						'flex-basis': '100%',
@@ -310,13 +309,13 @@ export class ShareDialogChooser extends ComfyDialog {
 						'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
 					}
 				}, [buttonLinkContainer, description]);
-		
+
 				container.appendChild(column);
 			});
-		
+
 			return container;
 		}
-		
+
 
 		return [
 			$el("tr.td", { width: "100%" }, [
@@ -895,4 +894,4 @@ export class ShareDialog extends ComfyDialog {
 		this.radio_buttons.appendChild(new_radio_buttons);
 		this.element.style.display = "block";
 	}
-}
+}

js/comfyui-share-openart.js

@@ -68,7 +68,7 @@ export class OpenArtShareDialog extends ComfyDialog {
       display: "block",
       marginBottom: "15px",
       fontWeight: "bold",
-      fontSize: "20px",
+      fontSize: "14px",
     };
 
     const labelStyle = {
@@ -135,18 +135,37 @@ export class OpenArtShareDialog extends ComfyDialog {
       },
     });
 
+    // LinkSection
+    this.communityLink = $el("a", {
+      style: hyperLinkStyle,
+      href: DEFAULT_HOMEPAGE_URL,
+      target: "_blank"
+    }, ["👉 Check out thousands of workflows shared from the community"])
+    this.getAPIKeyLink = $el("a", {
+      style: {
+        ...hyperLinkStyle,
+        color: "#59E8C6"
+      },
+      href: DEFAULT_HOMEPAGE_URL,
+      target: "_blank"
+    }, ["👉 Get your API key here"])
+    const LinkSection = $el(
+      "div",
+      {
+        style: {
+          marginTop: "10px",
+          display: "flex",
+          flexDirection: "column",
+        },
+      },
+      [
+        this.communityLink,
+        this.getAPIKeyLink,
+      ]
+    );
+
     // Account Section
     const AccountSection = $el("div", { style: sectionStyle }, [
-      $el(
-        "a",
-        { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL, target: "_blank" },
-        ["Check out 1000+ workflows others have uploaded."]
-      ),
-      $el(
-        "a",
-        { style: hyperLinkStyle, href: DEFAULT_HOMEPAGE_URL, target: "_blank" },
-        ["You can get API key at here."]
-      ),
       $el("label", { style: labelStyle }, ["OpenArt API Key"]),
       this.keyInput,
     ]);
@@ -161,6 +180,20 @@ export class OpenArtShareDialog extends ComfyDialog {
       this.descriptionInput,
     ]);
 
+     // Message Section
+    this.message = $el(
+      "div",
+      {
+        style: {
+          color: "#ff3d00",
+          textAlign: "center",
+          padding: "10px",
+          fontSize: "20px",
+        },
+      },
+      []
+    );
+
     this.shareButton = $el("button", {
       type: "submit",
       textContent: "Share",
@@ -197,21 +230,9 @@ export class OpenArtShareDialog extends ComfyDialog {
       ]
     );
 
-    // Message Section
-    this.message = $el(
-      "div",
-      {
-        style: {
-          color: "#ff3d00",
-          textAlign: "center",
-          padding: "10px",
-          fontSize: "20px",
-        },
-      },
-      []
-    );
     // Composing the full layout
     const layout = [
+      LinkSection,
       AccountSection,
       additionalInputsSection,
       this.message,