From 78d511fd03e68f860d43ea080b02b2c699b2595a Mon Sep 17 00:00:00 2001
From: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Date: Tue, 14 Jul 2020 21:14:18 +0000
Subject: [PATCH] navbar: Clean up implementation of tab_bar.narrow_description
 hover.

This handler adds a neat little effect whereby hovering over the
clickable region to open the navbar triggers the search_icon hover
effect and is a neat little visual cue about what happens onClick.

The previous implementation was slightly messy because it fetched the
color and applied it via ".css(". This commit cleans it up by creating
and using the class "search_icon_hover_highlight" instead. We also
make the selectors more specific, ensuring they target children of
"#tab_bar", this was so because it was reasonable to expect someone to
define eg `search_closed` elsewhere and we wanted to prevent bugs when
that happened.
---
 frontend_tests/node_tests/ui_init.js |  2 +-
 static/js/tab_bar.js                 | 17 +++++------------
 static/styles/night_mode.scss        |  1 +
 static/styles/zulip.scss             |  1 +
 4 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js
index 809b0d0d24..0c3826062a 100644
--- a/frontend_tests/node_tests/ui_init.js
+++ b/frontend_tests/node_tests/ui_init.js
@@ -194,7 +194,7 @@ $tab_bar.find = () => false;
 compose.compute_show_video_chat_button = () => {};
 $("#below-compose-content .video_link").toggle = () => {};
 
-$(".narrow_description > a").hover = () => {};
+$("#tab_bar .narrow_description > a").hover = () => {};
 
 run_test('initialize_everything', () => {
     ui_init.initialize_everything();
diff --git a/static/js/tab_bar.js b/static/js/tab_bar.js
index 3665e1b583..777705ecea 100644
--- a/static/js/tab_bar.js
+++ b/static/js/tab_bar.js
@@ -90,19 +90,12 @@ function bind_title_area_handlers() {
         }
     });
 
-    const color = $(".search_closed").css("color");
-    const night_mode_color = $(".nightmode .closed_icon").css("color");
-
-    // make sure that hover plays nicely with whether search is being
-    // opened or not.
-    $(".narrow_description > a").hover(() => {
-        if (night_mode_color) {
-            $(".search_closed").css("color", night_mode_color);
-        } else {
-            $(".search_closed").css("color", color);
-        }
+    // handler that makes sure that hover plays nicely
+    // with whether search is being opened or not.
+    $("#tab_bar .narrow_description > a").hover(() => {
+        $("#tab_bar .search_closed").addClass("search_icon_hover_highlight");
     }, () => {
-        $(".search_closed").css("color", "");
+        $("#tab_bar .search_closed").removeClass("search_icon_hover_highlight");
     });
 }
 
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index 05999edf55..fbc65b6631 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -343,6 +343,7 @@ on a dark background, and don't change the dark labels dark either. */
     #message_edit_tooltip:hover,
     .clear_search_button:hover,
     #tab_bar .search_icon:hover,
+    .search_icon_hover_highlight,
     #searchbox_legacy .search_icon:hover,
     #searchbox_legacy .search_button:hover,
     #searchbox .search_icon:hover,
diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index ab0280dc53..615e6c20d8 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -1734,6 +1734,7 @@ div.focused_table {
         left: 0px;
     }
 
+    .search_icon_hover_highlight,
     .search_icon:hover {
         color: hsl(0, 0%, 0%);
         text-decoration: none;