UX: puts more emphasis on the shared url on share panel (#7055)

app/assets/javascripts/discourse/components/share-panel.js.es6

@@ -27,12 +27,12 @@ export default Ember.Component.extend({
     topicTitle = escapeExpression(topicTitle);
 
     if (type === "topic") {
-      return I18n.t("share.topic", { topicTitle });
+      return I18n.t("share.topic_html", { topicTitle });
     }
     if (postNumber) {
-      return I18n.t("share.post", { postNumber, postDate });
+      return I18n.t("share.post_html", { postNumber, postDate });
     }
-    return I18n.t("share.topic", { topicTitle });
+    return I18n.t("share.topic_html", { topicTitle });
   },
 
   @computed("panel.model.shareUrl", "topic.shareUrl")

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

@@ -3,7 +3,7 @@
 </div>
 
 <div class="body">
-  {{input value=shareUrl class="topic-share-url"}}
+  {{textarea value=shareUrl class="topic-share-url"}}
   <div class="topic-share-url-for-touch"><a></a></div>
 
   <div class="sources">

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

@@ -646,11 +646,7 @@
           background: $danger;
 
           &.single-tab {
-            color: $primary;
-            background: none;
-            padding: s(1 0);
-            font-weight: 700;
-            font-size: $font-up-3;
+            display: none;
           }
         }
       }

app/assets/stylesheets/common/components/share-and-invite-modal.scss

@@ -14,6 +14,11 @@
       font-size: $font-0;
       font-weight: normal;
       margin-bottom: s(2);
+
+      .post-date {
+        color: $primary-medium;
+        font-size: $font-down-1;
+      }
     }
   }
 
@@ -23,12 +28,15 @@
 
     .topic-share-url {
       width: 100%;
+      height: auto;
+      box-sizing: border-box;
     }
 
     .topic-share-url-for-touch {
-      width: 290px;
-
-      @extend .overflow-ellipsis;
+      a {
+        word-break: break-all;
+        font-size: $font-up-1;
+      }
     }
 
     .topic-share-url-for-touch,
@@ -43,7 +51,7 @@
       flex-direction: row;
 
       .social-link {
-        font-size: $font-up-4;
+        font-size: $font-up-6;
         margin-right: s(2);
       }
     }

config/locales/client.en.yml

@@ -135,8 +135,8 @@ en:
       next_month: "Next Month"
       placeholder: date
     share:
-      topic: "<b>Topic</b>: %{topicTitle}"
-      post: "<b>Post #%{postNumber}</b>, %{postDate}"
+      topic_html: 'Topic: <span class="topic-title">%{topicTitle}</span>'
+      post_html: '<span class="post-number">Post #%{postNumber}</span>, <span class="post-date">%{postDate}</span>'
       close: "close"
       twitter: "Share this link on Twitter"
       facebook: "Share this link on Facebook"