Replace the modal footers with an exit button at top of overlay.

This replaces the bootstrap default modal footers that have a
[data-dismiss] button with an .exit button in the top section of the
overlay that is styled congruently to the current subscriptions page.

static/js/click_handlers.js

@@ -329,7 +329,7 @@ $(function () {
     });
 
     $(".informational-overlays").click(function (e) {
-        if ($(e.target).is(".informational-overlays, [data-dismiss]")) {
+        if ($(e.target).is(".informational-overlays, .exit")) {
             ui.hide_info_overlay();
         }
     });

static/styles/informational-overlays.css

@@ -32,19 +32,25 @@
     background-color: #fff;
 }
 
-.informational-overlays .overlay-content h1 {
-    padding: 0px 0px 7px 10px;
-
-    font-weight: 300;
-    font-size: 1.8em;
-
-    border-bottom: 1px solid #eee;
-}
-
 .informational-overlays .overlay-tabs {
     padding: 10px 0px;
     border-bottom: 1px solid #eee;
-    text-align: center;
+}
+
+.informational-overlays .overlay-tabs .tab-switcher {
+    margin-left: 15px ;
+}
+
+.informational-overlays .overlay-tabs .exit {
+    float: right;
+    font-size: 1.8em;
+    color: #aaa;
+    font-weight: 600;
+    margin: 1px 15px;
+}
+
+.informational-overlays .overlay-modal {
+    padding-bottom: 10px;
 }
 
 .informational-overlays .overlay-modal .modal-body {

templates/zerver/index.html

@@ -125,8 +125,8 @@ var page_params = {{ page_params }};
 </div><!--/row-->
     <div class="informational-overlays new-style">
         <div class="overlay-content">
-            <h1>Zulip Usage Guide</h1>
             <div class="overlay-tabs">
+                <button class="button no-style exit">&times;</button>
             </div>
             <div class="overlay-body">
                 {% include "zerver/keyboard_shortcuts.html" %}

templates/zerver/keyboard_shortcuts.html

@@ -129,7 +129,4 @@
       </table>
     </div>
   </div>
-  <div class="modal-footer">
-    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _("Close") }}</button>
-  </div>
 </div>

templates/zerver/markdown_help.html

@@ -102,7 +102,4 @@ Quoted block
       </table>
     </div>
   </div>
-  <div class="modal-footer">
-    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _("Close") }}</button>
-  </div>
 </div>

templates/zerver/search_operators.html

@@ -86,7 +86,4 @@
     containing the keyword <span class="operator_value">keyword</span>.</p>
     {% endtrans %}
   </div>
-  <div class="modal-footer">
-    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</button>
-  </div>
 </div>