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

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}}

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

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;