onboarding: Redesign intro_reply hotspot in bottom whitespace.

This is a trial to have the first reply hotspot in the bottom
whitespace (and stick there until "Got it!"  is pressed).

Tweaked by tabbott to clean it up a bit.  Still needs more work on the
visuals.

frontend_tests/node_tests/templates.js

@@ -827,6 +827,12 @@ run_test('handlebars_bug', () => {
     assert($(html).hasClass('pill'));
 }());
 
+(function intro_reply_hotspot() {
+    var html = render('intro_reply_hotspot', {});
+
+    assert($(html).hasClass('hotspot-message'));
+}());
+
 (function invite_subscription() {
     var args = {
         streams: [

static/js/click_handlers.js

@@ -660,6 +660,14 @@ exports.initialize = function () {
         $('#hotspot_' + hotspot_name + '_icon').remove();
     });
 
+    $('body').on('click', '.hotspot-button', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        hotspots.post_hotspot_as_read('intro_reply');
+        hotspots.close_hotspot_icon($('#hotspot_intro_reply_icon'));
+    });
+
     // stop propagation
     $('body').on('click', '.hotspot.overlay .hotspot-popover', function (e) {
         e.stopPropagation();

static/js/hotspots.js

@@ -170,6 +170,11 @@ function place_popover(hotspot) {
 }
 
 function insert_hotspot_into_DOM(hotspot) {
+    if (hotspot.name === "intro_reply") {
+        $('#bottom_whitespace').append(templates.render('intro_reply_hotspot', {}));
+        return;
+    }
+
     var hotspot_overlay_HTML = templates.render('hotspot_overlay', {
         name: hotspot.name,
         title: hotspot.title,

static/styles/hotspots.scss

@@ -225,3 +225,27 @@
 #hotspot_intro_topics_icon {
     z-index: 103;
 }
+
+/* hacked together intro_reply styles */
+#bottom_whitespace .hotspot-message {
+    text-align: center;
+    margin-top: 30px;
+
+    span {
+        vertical-align: middle;
+    }
+
+    button {
+        padding: 3px 9px;
+        min-width: 0px;
+        margin-left: 7px;
+        margin-bottom: 0px;
+        border: none;
+        font-size: .97em;
+        font-weight: 600;
+        color: white;
+        background-color: hsl(164, 44%, 47%);
+        border-radius: 4px;
+        white-space: normal;
+    }
+}

static/templates/intro_reply_hotspot.handlebars

@@ -0,0 +1,4 @@
+<div class="trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
+    <span>{{t 'Click anywhere on a message to reply.' }}</span>
+    <button class="hotspot-button" type="button">{{t 'Got it' }}</button>
+</div>