From 1ab4d08258ac062d8edf98be10b7cd885bd33c49 Mon Sep 17 00:00:00 2001
From: Cynthia Lin <cynthialin1004@gmail.com>
Date: Sun, 19 Aug 2018 14:18:51 -0700
Subject: [PATCH] right-sidebar: Improve keyboard shortcuts icon styling.

* Eliminate unnecessary div element wrapping around the icon and
change jQuery selectors accordingly
* Set initial position through CSS instead of JS
* Set color to inherit to prevent night mode issues.
---
 static/js/resize.js                     | 2 +-
 static/js/scroll_bar.js                 | 2 +-
 static/js/ui_init.js                    | 5 -----
 static/styles/right-sidebar.scss        | 7 ++++---
 templates/zerver/app/right_sidebar.html | 8 +++-----
 5 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/static/js/resize.js b/static/js/resize.js
index d18a7f5640..1fb2b106b6 100644
--- a/static/js/resize.js
+++ b/static/js/resize.js
@@ -72,7 +72,7 @@ function get_new_heights() {
     // RIGHT SIDEBAR
     var buddy_list_wrapper = $('#buddy_list_wrapper').expectOne();
     var group_pms = $('#group-pms').expectOne();
-    var keyboard_popover_shortcut = $('#sidebar-keyboard-shortcuts #keyboard-icon').expectOne();
+    var keyboard_popover_shortcut = $('#keyboard-icon').expectOne();
 
     var usable_height =
         res.right_sidebar_height
diff --git a/static/js/scroll_bar.js b/static/js/scroll_bar.js
index 5f4a3b36cf..e45227f7b6 100644
--- a/static/js/scroll_bar.js
+++ b/static/js/scroll_bar.js
@@ -51,7 +51,7 @@ exports.initialize = function () {
         $(".compose-content").css({left: sbWidth + "px",
                                    "margin-right": 250 + sbWidth + "px"});
         $("#compose-container").css("max-width", 1400 + sbWidth + "px");
-        $('#sidebar-keyboard-shortcuts #keyboard-icon').css({right: sbWidth + 13 + "px"});
+        $('#keyboard-icon').css({right: sbWidth + 13 + "px"});
 
         $("head").append("<style> @media (max-width: 1025px) { .compose-content, .header-main .column-middle { margin-right: " + (7 + sbWidth) + "px !important; } } " +
                          "@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index 32a5cfc350..5a3ce6bef3 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -219,11 +219,6 @@ function initialize_kitchen_sink_stuff() {
         timerender.set_full_datetime(message, time_elem);
     });
 
-    // compose-content padding = icon bottom to make keyboard popover shortcut
-    // vertically aligned with the compose box
-    $('#sidebar-keyboard-shortcuts #keyboard-icon').css('bottom',
-                                                        parseInt($(".compose-content").css("paddingBottom"), 10));
-
     $('#streams_header h4').tooltip({placement: 'right',
                                      animation: false});
 
diff --git a/static/styles/right-sidebar.scss b/static/styles/right-sidebar.scss
index 6c384f8b96..6cc9b7b842 100644
--- a/static/styles/right-sidebar.scss
+++ b/static/styles/right-sidebar.scss
@@ -236,12 +236,13 @@
     margin-right: 10px;
 }
 
-#sidebar-keyboard-shortcuts #keyboard-icon {
+#keyboard-icon {
     position: fixed;
+    bottom: 8px; /* bottom padding of .compose-content */
     cursor: pointer;
     font-size: 20px;
 }
 
-#sidebar-keyboard-shortcuts a {
-    color: hsl(0, 0%, 1.2%); //#333
+#sidebar-keyboard-shortcuts {
+    color: inherit;
 }
diff --git a/templates/zerver/app/right_sidebar.html b/templates/zerver/app/right_sidebar.html
index e74140cb21..6940df179e 100644
--- a/templates/zerver/app/right_sidebar.html
+++ b/templates/zerver/app/right_sidebar.html
@@ -33,10 +33,8 @@
             <ul id="group-pms" class="filters scrolling_list">
             </ul>
         </div>
-        <div id="sidebar-keyboard-shortcuts">
-            <a data-overlay-trigger="keyboard-shortcuts">
-                <i class="fa fa-keyboard-o fa-2x" id="keyboard-icon" data-html="true" data-toggle="tooltip" title="{{ _('Keyboard shortcuts') }} <span class='hotkey-hint'>(?)</span>"></i>
-            </a>
-        </div>
+        <a id="sidebar-keyboard-shortcuts" data-overlay-trigger="keyboard-shortcuts">
+            <i class="fa fa-keyboard-o fa-2x" id="keyboard-icon" data-html="true" data-toggle="tooltip" title="{{ _('Keyboard shortcuts') }} <span class='hotkey-hint'>(?)</span>"></i>
+        </a>
     </div>
 </div>