Minor polish

js/comfyui-share-common.js

@@ -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
 			},
 		];
@@ -262,9 +262,8 @@ export class ShareDialogChooser extends ComfyDialog {
 				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',
 					},

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,