muting: Use more generic markup for undo-mute popup.

This makes everything generic except for the main
message given to the user.

static/js/muting_ui.js

@@ -58,13 +58,13 @@ exports.build_feedback_widget = function () {
         meta.undo = opts.on_undo;
 
         if (!meta.$container) {
-            meta.$container = $("#unmute_muted_topic_notification");
+            meta.$container = $("#feedback_container");
 
             meta.$container.find('.exit-me').click(function () {
                 animate.fadeOut();
             });
 
-            meta.$container.find("#unmute").click(function () {
+            meta.$container.find(".feedback_undo").click(function () {
                 if (meta.undo) {
                     meta.undo();
                 }
@@ -75,6 +75,8 @@ exports.build_feedback_widget = function () {
         // add a four second delay before closing up.
         meta.hide_me_time = new Date().getTime() + 4000;
 
+        meta.$container.find('.feedback_title').text(opts.title_text);
+        meta.$container.find('.feedback_undo').text(opts.undo_button_text);
         opts.populate(meta.$container);
 
         animate.fadeIn();
@@ -94,7 +96,7 @@ exports.build_feedback_widget = function () {
     };
 
     self.dismiss = function () {
-        var $container = $("#unmute_muted_topic_notification");
+        var $container = $("#feedback_container");
         if ($container) {
             $container.fadeOut(500).removeClass("show");
         }
@@ -191,6 +193,8 @@ exports.mute = function (stream_id, topic) {
         on_undo: function () {
             exports.unmute(stream_id, topic);
         },
+        title_text: i18n.t("Topic muted"),
+        undo_button_text: i18n.t("Unmute"),
     });
     exports.set_up_muted_topics_ui(muting.get_muted_topics());
 };

static/styles/media.scss

@@ -355,7 +355,7 @@
 }
 
 @media only screen and (min-width: 300px) and (max-width: 700px) {
-    #unmute_muted_topic_notification {
+    #feedback_container {
         width: calc(90% - 30px);
         left: 5%;
         top: 5%;

static/styles/night_mode.scss

@@ -481,7 +481,7 @@ on a dark background, and don't change the dark labels dark either. */
         background-color: rgba(0, 0, 0, 0.2);
     }
 
-    #unmute_muted_topic_notification,
+    #feedback_container,
     .message_content code,
     .message_edit_content code,
     #settings_page code,

static/styles/zulip.scss

@@ -120,7 +120,7 @@ p.n-margin {
     stroke: hsl(0, 0%, 100%);
 }
 
-#unmute_muted_topic_notification {
+#feedback_container {
     display: none;
     position: absolute;
     width: 400px;
@@ -141,11 +141,11 @@ p.n-margin {
     transition-duration: 0.5s;
 }
 
-#unmute_muted_topic_notification.show {
+#feedback_container.show {
     top: 50px;
 }
 
-#unmute_muted_topic_notification h3 {
+#feedback_container h3 {
     font-size: 16pt;
     margin-top: 2px;
 }
@@ -176,7 +176,7 @@ p.n-margin {
     animation-iteration-count: 1;
 }
 
-#unmute_muted_topic_notification .exit-me {
+#feedback_container .exit-me {
     font-size: 30pt;
     font-weight: 200;
     margin: 5px 0px 0px 10px;

templates/zerver/app/topic_is_muted.html

@@ -1,8 +1,8 @@
-<div id="unmute_muted_topic_notification" class="new-style">
+<div id="feedback_container" class="new-style">
     <div class="float-header">
-        <h3 class="light no-margin small-line-height float-left">{{ _("Topic muted") }}</h3>
+        <h3 class="light no-margin small-line-height float-left feedback_title"></h3>
         <div class="exit-me float-right">&#215;</div>
-        <button class="button small rounded float-right" id="unmute" type="button" name="button">{{ _("Unmute") }}</button>
+        <button class="button small rounded float-right feedback_undo" type="button" name="button"></button>
         <div class="float-clear"></div>
     </div>
     <p class="n-margin">{% trans %}You have muted the topic <span class="topic"></span> under the <span class="stream"></span> stream.{% endtrans %}</p>