UX: Improve share modal consistency (#13689)

app/assets/javascripts/discourse/app/components/share-source.js

@@ -1,7 +1,6 @@
 import Component from "@ember/component";
 export default Component.extend({
-  classNameBindings: [":social-link"],
-
+  tagName: "",
   actions: {
     share: function (source) {
       this.action(source);

app/assets/javascripts/discourse/app/initializers/sharing-sources.js

@@ -9,7 +9,7 @@ export default {
 
     Sharing.addSource({
       id: "twitter",
-      icon: "fab-twitter-square",
+      icon: "fab-twitter",
       generateUrl: function (link, title, quote = "") {
         const text = quote ? `"${quote}" -- ` : title;
         return `http://twitter.com/intent/tweet?url=${encodeURIComponent(
@@ -39,7 +39,7 @@ export default {
 
     Sharing.addSource({
       id: "email",
-      icon: "envelope-square",
+      icon: "envelope",
       title: I18n.t("share.email"),
       generateUrl: function (link, title, quote = "") {
         const body = quote ? `${quote} \n\n ${link}` : link;

app/assets/javascripts/discourse/app/templates/components/share-source.hbs

@@ -1,7 +1 @@
-<a href {{action "share" source}} title={{source.title}} aria-label={{source.title}}>
-  {{#if source.icon}}
-    {{d-icon source.icon}}
-  {{else}}
-    {{html-safe source.htmlIcon}}
-  {{/if}}
-</a>
+{{d-button action=(action "share" source) class=(concat "share-" source.id) translatedTitle=source.title translatedAriaLabel=source.title icon=(if source.icon source.icon source.htmlIcon)}}

app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs

@@ -19,7 +19,7 @@
       {{/each}}
 
       {{d-button
-        class="btn-primary"
+        class="btn-default"
         label="topic.share.notify_users.title"
         icon="hand-point-right"
         action=(action "toggleNotifyUsers")
@@ -27,7 +27,7 @@
 
       {{#if allowInvites}}
         {{d-button
-          class="btn-primary"
+          class="btn-default"
           label="topic.share.invite_users"
           icon="user-plus"
           action=(action "inviteUsers")

app/assets/javascripts/discourse/tests/acceptance/share-topic-test.js

@@ -30,15 +30,15 @@ acceptance("Share and Invite modal", function (needs) {
       "it shows the topic sharing url"
     );
 
-    assert.ok(count(".social-link") > 1, "it shows social sources");
+    assert.ok(count("button[class^='share-']") > 1, "it shows social sources");
 
     assert.ok(
-      exists(".btn-primary[aria-label='Notify']"),
+      exists(".btn[aria-label='Notify']"),
       "it shows the notify button"
     );
 
     assert.ok(
-      exists(".btn-primary[aria-label='Invite']"),
+      exists(".btn[aria-label='Invite']"),
       "it shows the invite button"
     );
   });

app/assets/stylesheets/common/base/modal.scss

@@ -969,30 +969,32 @@
 }
 
 .share-topic-modal {
+  form {
+    margin-bottom: 0;
+  }
   .sources {
-    align-items: center;
     display: flex;
     flex-wrap: wrap;
-    flex-direction: row;
-    margin-bottom: 1em;
-
-    .social-link {
-      font-size: $font-up-6;
-      margin-right: 8px;
+    align-items: stretch;
+    button {
+      margin-right: 0.5em;
+      margin-bottom: 0.5em;
+    }
   }
 
-    .btn-primary {
-      border-radius: 4px;
-      height: calc(#{$font-up-6} - 4px);
-      margin-bottom: 2px;
-      margin-right: 8px;
-      padding-left: 8px;
-      padding-right: 8px;
-
+  .share-twitter {
     .d-icon {
-        font-size: $font-up-3;
+      color: var(--twitter);
     }
   }
+  .share-facebook {
+    .d-icon {
+      color: var(--facebook);
+    }
+  }
+
+  .invite-users {
+    margin: 1em 0;
   }
 }