From e3ad9c10bba672b008dfa7c7ff50340f3c3ca5d6 Mon Sep 17 00:00:00 2001
From: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Date: Mon, 30 May 2022 06:10:21 +0530
Subject: [PATCH] navbar: Add Ionic search icon and use for navbar search.

This adds a new search icon which we prefer over the one made
available from bootstrap, and replaces search icons in navbar
search with the Ionic icon.
---
 docs/THIRDPARTY                       |   4 ++++
 web/images/icons/search.svg           | Bin 0 -> 391 bytes
 web/styles/search.css                 |   4 ++--
 web/styles/zulip.css                  |  10 ++++++----
 web/templates/message_view_header.hbs |   2 +-
 web/templates/navbar.hbs              |   4 ++--
 6 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 web/images/icons/search.svg

diff --git a/docs/THIRDPARTY b/docs/THIRDPARTY
index b12735c21a..6308010fa3 100644
--- a/docs/THIRDPARTY
+++ b/docs/THIRDPARTY
@@ -114,6 +114,10 @@ Source: https://github.com/ionic-team/ionicons/blob/v5.5.2/src/svg/earth.svg, mo
 Copyright: 2015-present Ionic (http://ionic.io/)
 License: Expat
 
+Files: web/images/icons/search.svg
+Copyright: 2015-present Ionic (http://ionic.io/)
+License: Expat
+
 Files: tools/check-thirdparty
 Copyright: 2020 Kandra Labs, Inc.
 License: GPL-2.0+
diff --git a/web/images/icons/search.svg b/web/images/icons/search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bc560b89f8d52c9d1da0e2aecc7fb49ea88862b8
GIT binary patch
literal 391
zcmZutU2DTI4E!s?@0Bh2D;`N;+w1z&UtqG(1hS+wp(*|Kv(qp(7}zJBb?6S4^X&}x
zuVI`k(Jjm6Map$uan(3o&ytl=GART!L!6VOpT@qKMgh0JUEijAB@`&I#QBQ4T>52b
z>r)%AO;^e%D=%^B;Ik4(V;#Bxh6#1}(2mi8W{*0O*H{qjCGAw&U||lV4BFyd2am=8
zu|r*erhv+UDS(;LbLvis?9-p;*%w(&-ek?6^7@Zo&H-DdAsAEvHjHc`oh^|?eb5OW
m#}p^<?jDI#)a0H~0nu-s`(U?WDrpNHw(%1mLe^#e-})Q;h+Aj?

literal 0
HcmV?d00001

diff --git a/web/styles/search.css b/web/styles/search.css
index 1dca04dce3..b4daaf039f 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -37,7 +37,7 @@
         width: max-content;
         min-width: 100%;
 
-        .fa-search {
+        .zulip-icon-search {
             padding: 0;
             font-size: 20px;
             position: absolute;
@@ -50,7 +50,7 @@
             }
         }
 
-        .fa-search:not(.deactivated) {
+        .zulip-icon-search:not(.deactivated) {
             cursor: pointer;
         }
     }
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 2f32788237..4bef1733a7 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -2652,7 +2652,7 @@ select.invite-as {
         width: calc(100% - 84px);
     }
 
-    .search_closed .fa-search {
+    .search_closed .zulip-icon-search {
         right: 115px;
     }
 }
@@ -2725,7 +2725,7 @@ select.invite-as {
         width: calc(100% - 108px);
     }
 
-    .search_closed .fa-search {
+    .search_closed .zulip-icon-search {
         right: 115px;
     }
 }
@@ -2750,8 +2750,10 @@ select.invite-as {
         }
     }
 
-    .search_closed .fa-search {
-        top: 5px;
+    /* Usually the styling is applied directly to the icon, but here
+    the icon is `position: static`, so we can't. */
+    .search_closed {
+        top: 4px;
     }
 
     #streamlist-toggle,
diff --git a/web/templates/message_view_header.hbs b/web/templates/message_view_header.hbs
index 5bcfd6601e..dfa82a658c 100644
--- a/web/templates/message_view_header.hbs
+++ b/web/templates/message_view_header.hbs
@@ -18,4 +18,4 @@
     {{> navbar_icon_and_title }}
 </span>
 {{/if}}
-<span class="search_icon search_closed" role="button"><i class="fa fa-search" aria-hidden="true"></i></span>
+<span class="search_icon search_closed" role="button"><i class="zulip-icon zulip-icon-search" aria-hidden="true"></i></span>
diff --git a/web/templates/navbar.hbs b/web/templates/navbar.hbs
index dfcd765c0a..30753c2480 100644
--- a/web/templates/navbar.hbs
+++ b/web/templates/navbar.hbs
@@ -19,7 +19,7 @@
                     <div id="searchbox">
                         <form id="searchbox_form" class="navbar-search">
                             <div id="search_arrows" class="pill-container input-append">
-                                <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
+                                <span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
                                 <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
                                   autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)">
                                 </div>
@@ -33,7 +33,7 @@
                     <div id="searchbox_legacy">
                         <form id="searchbox_form" class="navbar-search">
                             <div id="search_arrows" class="input-append">
-                                <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
+                                <span class="search_icon search_open" ><i class="zulip-icon zulip-icon-search"></i></span>
                                 <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
                                   autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/>
                                 <button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button>