From 5cce46e851fb0f59585903d00336a6d445c35017 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 20 Aug 2024 17:33:40 +0800
Subject: [PATCH] Share button improvements on publish flow modal (#20791)

ref DES-684

- switched social links from buttons to regular links
- added post title to share links
---
 .../app/components/modal-post-success.hbs     | 36 +++++--------------
 .../app/components/modal-post-success.js      | 26 ++++----------
 .../app/styles/components/publishmenu.css     |  3 ++
 3 files changed, 17 insertions(+), 48 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-success.hbs b/ghost/admin/app/components/modal-post-success.hbs
index 8fd086b91b..0ce2351e0c 100644
--- a/ghost/admin/app/components/modal-post-success.hbs
+++ b/ghost/admin/app/components/modal-post-success.hbs
@@ -92,38 +92,18 @@
 
     <footer class="modal-footer">
         {{#if (and this.post.isPublished (not this.post.emailOnly))}}
-            <button
-                class="gh-btn twitter"
-                type="button"
-                {{on "click" this.handleTwitter}}
-                {{on "mousedown" (optional this.noop)}}
-            >
+            <a href="https://twitter.com/intent/tweet?text={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn twitter" target="_blank" rel="noopener noreferrer">
                 <span>{{svg-jar "social-x"}}</span>
-            </button>
-            <button
-                class="gh-btn threads"
-                type="button"
-                {{on "click" this.handleThreads}}
-                {{on "mousedown" (optional this.noop)}}
-            >
+            </a>
+            <a href="https://threads.net/intent/post?text={{this.encodedTitleAndUrl}}" class="gh-btn threads" target="_blank" rel="noopener noreferrer">
                 <span>{{svg-jar "social-threads"}}</span>
-            </button>
-            <button
-                class="gh-btn facebook"
-                type="button"
-                {{on "click" this.handleFacebook}}
-                {{on "mousedown" (optional this.noop)}}
-            >
+            </a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{this.encodedUrl}}" class="gh-btn facebook" target="_blank" rel="noopener noreferrer">
                 <span>{{svg-jar "social-facebook"}}</span>
-            </button>
-            <button
-                class="gh-btn linkedin"
-                type="button"
-                {{on "click" this.handleLinkedIn}}
-                {{on "mousedown" (optional this.noop)}}
-            >
+            </a>
+            <a href="http://www.linkedin.com/shareArticle?mini=true&title={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn linkedin" target="_blank" rel="noopener noreferrer">
                 <span>{{svg-jar "social-linkedin"}}</span>
-            </button>
+            </a>
             <GhTaskButton
                 @buttonText="Copy link"
                 @task={{this.handleCopyLink}}
diff --git a/ghost/admin/app/components/modal-post-success.js b/ghost/admin/app/components/modal-post-success.js
index 74fcbe4729..0e58369a29 100644
--- a/ghost/admin/app/components/modal-post-success.js
+++ b/ghost/admin/app/components/modal-post-success.js
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
-import {action} from '@ember/object';
 import {capitalize} from '@ember/string';
 import {inject as service} from '@ember/service';
 import {task, timeout} from 'ember-concurrency';
@@ -27,29 +26,16 @@ export default class PostSuccessModal extends Component {
         return this.args.data.showPostCount;
     }
 
-    @action
-    handleTwitter() {
-        window.open(`https://twitter.com/intent/tweet?url=${encodeURI(this.post.url)}`, '_blank');
+    get encodedTitle() {
+        return encodeURIComponent(this.post.title);
     }
 
-    @action
-    handleThreads() {
-        window.open(`https://threads.net/intent/post?text=${encodeURI(this.post.url)}`, '_blank');
+    get encodedUrl() {
+        return encodeURIComponent(this.post.url);
     }
 
-    @action
-    handleFacebook() {
-        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURI(this.post.url)}`, '_blank');
-    }
-
-    @action
-    handleLinkedIn() {
-        window.open(`http://www.linkedin.com/shareArticle?mini=true&url=${encodeURI(this.post.url)}`, '_blank');
-    }
-
-    @action
-    viewInBrowser() {
-        window.open(this.post.url, '_blank');
+    get encodedTitleAndUrl() {
+        return encodeURIComponent(`${this.post.title} ${this.post.url}`);
     }
 
     @task
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index d96af237e7..6b85d1d167 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -944,6 +944,9 @@
 }
 
 .modal-post-success .modal-footer .gh-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     min-width: 64px;
     height: 40px;
     border-radius: 4px;