UX: New text and style for dominating topic message (#13789)

app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs

@@ -0,0 +1,11 @@
+<a href {{action closeMessage message}} class="close">{{d-icon "times"}}</a>
+{{html-safe message.body}}
+
+{{#if currentUser.can_invite_to_forum}}
+  {{d-button
+    class="btn-primary"
+    label="topic.invite_reply.title"
+    icon="user-friends"
+    action=(route-action "showInvite")
+  }}
+{{/if}}

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

@@ -322,7 +322,7 @@
     display: flex;
     align-items: center;
     margin-right: auto;
-    button {
+    .btn-primary {
       flex: 0 0 auto;
     }
     .cancel {

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

@@ -631,7 +631,9 @@
           &.single-tab {
             background: none;
             color: var(--primary);
-            padding: 4px 0;
+            padding: 0;
+            font-size: var(--font-up-3);
+            font-weight: bold;
           }
         }
       }

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

@@ -2,11 +2,6 @@
   .modal-body {
     max-width: 475px;
     min-width: 320px;
-    padding: 0;
-  }
-
-  .modal-panel {
-    padding: 0.667em;
   }
 
   .modal-header {

app/assets/stylesheets/desktop/compose.scss

@@ -85,16 +85,17 @@
 }
 
 .composer-popup {
+  box-sizing: border-box;
   position: absolute;
-  width: calc(50% - 45px);
+  width: calc(50% - 30px);
   max-width: 724px;
-  top: 20px;
+  top: 21px; // grippie height + .reply-to margin-top + .reply-area padding-top
   bottom: 10px;
   left: 51%;
   overflow-y: auto;
   z-index: z("composer", "popover");
   padding: 10px 10px 35px 10px;
-  box-shadow: shadow("card");
+  box-shadow: shadow("dropdown");
   background: var(--highlight-medium);
   .hide-preview & {
     z-index: z("composer", "dropdown") + 1;
@@ -108,6 +109,18 @@
     background-color: var(--tertiary-low);
   }
 
+  &.dominating-topic-message {
+    bottom: unset;
+    padding: 2.25em 6em 2.5em 2.25em;
+    p {
+      margin-top: 0;
+      font-size: var(--font-up-1);
+    }
+    button {
+      margin-top: 0.5em;
+    }
+  }
+
   h3 {
     margin-bottom: 10px;
   }

config/locales/server.en.yml

@@ -523,12 +523,7 @@ en:
 
       It’s easier for everyone to read topics that have fewer in-depth replies versus lots of small, individual replies.
 
-    dominating_topic: |
+    dominating_topic: You’ve posted more than %{percent}% of the replies here, is there anyone else you would like to hear from?
-      ### Let others join the conversation
-
-      This topic is clearly important to you – you've posted more than %{percent}% of the replies here.
-
-      It could be even better if you gave other people space to share their points of view, too. Can you invite them over?
 
     get_a_room: |
       ### Encourage everyone to get involved in the conversation

lib/composer_messages_finder.rb

@@ -141,9 +141,9 @@ class ComposerMessagesFinder
 
     {
       id: 'dominating_topic',
-      templateName: 'education',
+      templateName: 'dominating-topic',
       wait_for_typing: true,
-      extraClass: 'education-message',
+      extraClass: 'education-message dominating-topic-message',
       body: PrettyText.cook(I18n.t('education.dominating_topic', percent: (ratio * 100).round))
     }
   end

lib/svg_sprite/svg_sprite.rb

@@ -207,6 +207,7 @@ module SvgSprite
     "upload",
     "user",
     "user-edit",
+    "user-friends",
     "user-plus",
     "user-secret",
     "user-shield",