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

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

diff --git a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
new file mode 100644
index 0000000..63be2ba
--- /dev/null
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 31ddf20..4ff9925 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 75ed4bf..51a27ce 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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;
           }
         }
       }
diff --git a/app/assets/stylesheets/common/components/share-and-invite-modal.scss b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
index ff164ee..9aaedee 100644
--- a/app/assets/stylesheets/common/components/share-and-invite-modal.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 8b4970d..7e0be8b 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/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;
   }
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index d92c007..b00d983 100644
--- a/config/locales/server.en.yml
+++ b/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: |
-      ### Let others join the conversation
-
-      This topic is clearly important to you &ndash; 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?
+    dominating_topic: You’ve posted more than %{percent}% of the replies here, is there anyone else you would like to hear from?
 
     get_a_room: |
       ### Encourage everyone to get involved in the conversation
diff --git a/lib/composer_messages_finder.rb b/lib/composer_messages_finder.rb
index 27bddef..fcacecb 100644
--- a/lib/composer_messages_finder.rb
+++ b/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
diff --git a/lib/svg_sprite/svg_sprite.rb b/lib/svg_sprite/svg_sprite.rb
index e65fa4f..fdc7e70 100644
--- a/lib/svg_sprite/svg_sprite.rb
+++ b/lib/svg_sprite/svg_sprite.rb
@@ -207,6 +207,7 @@ module SvgSprite
     "upload",
     "user",
     "user-edit",
+    "user-friends",
     "user-plus",
     "user-secret",
     "user-shield",

GitHub sha: 5f6b9e36edd80cea5901c42f9ebdfee5d12f534a

This commit appears in #13789 which was approved by eviltrout. It was merged by awesomerobot.