From 4853a9a736955ddefe28876232f03821a15c17ed Mon Sep 17 00:00:00 2001
From: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Date: Mon, 30 May 2022 06:12:28 +0530
Subject: [PATCH] navbar: Use feathericon close icon.

This uses the new close icon which we prefer over the one made available
from bootstrap. It also adds a reference to the icon in THIRDPARTY.
---
 docs/THIRDPARTY          | 4 ++++
 web/styles/search.css    | 8 ++++++--
 web/templates/navbar.hbs | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/THIRDPARTY b/docs/THIRDPARTY
index 6308010fa3..5af4d3fde8 100644
--- a/docs/THIRDPARTY
+++ b/docs/THIRDPARTY
@@ -118,6 +118,10 @@ Files: web/images/icons/search.svg
 Copyright: 2015-present Ionic (http://ionic.io/)
 License: Expat
 
+Files: web/images/icons/close.svg
+Copyright: 2013-2017 Cole Bemis (https://feathericons.com)
+License: Expat
+
 Files: tools/check-thirdparty
 Copyright: 2020 Kandra Labs, Inc.
 License: GPL-2.0+
diff --git a/web/styles/search.css b/web/styles/search.css
index b4daaf039f..6aed91103f 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -27,7 +27,11 @@
 
         .search_close_button {
             display: inline;
-            margin-right: 15px;
+            margin-right: 5px;
+        }
+
+        .zulip-icon-close {
+            font-size: 15px;
         }
     }
 
@@ -176,7 +180,7 @@
 
     .navbar-search.expanded {
         .search_close_button {
-            margin-right: 14px;
+            margin-right: 5px;
         }
     }
 }
diff --git a/web/templates/navbar.hbs b/web/templates/navbar.hbs
index 30753c2480..de7487d985 100644
--- a/web/templates/navbar.hbs
+++ b/web/templates/navbar.hbs
@@ -24,7 +24,7 @@
                                   autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)">
                                 </div>
                                 <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>
+                                    <i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
                                 </button>
                             </div>
                         </form>
@@ -36,7 +36,7 @@
                                 <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>
+                                <button class="btn search_close_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="zulip-icon zulip-icon-close" aria-hidden="true"></i></button>
                             </div>
                         </form>
                     </div>