From 772969e68c9e4ab3b240b3306927a77343e49ec6 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 28 Jun 2024 10:09:31 +0000
Subject: [PATCH] emoji_picker: Format search bar same as dropdown widget.

---
 web/styles/dark_theme.css                     |  2 +-
 web/styles/reactions.css                      | 26 -------------------
 web/styles/zulip.css                          | 26 +++++++++----------
 web/templates/dropdown_list_container.hbs     |  4 +--
 .../popovers/emoji/emoji_popover.hbs          |  5 ++--
 5 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 5506a01745..dbe720564d 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -411,7 +411,7 @@
         color: inherit;
     }
 
-    .dropdown-list-search .dropdown-list-search-input:focus {
+    .popover-filter-input-wrapper .popover-filter-input:focus {
         background-color: hsl(225deg 6% 7%);
         border: 1px solid hsl(0deg 0% 100% / 50%);
         box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
diff --git a/web/styles/reactions.css b/web/styles/reactions.css
index c319e2776a..0909b23a63 100644
--- a/web/styles/reactions.css
+++ b/web/styles/reactions.css
@@ -171,32 +171,6 @@
     .emoji-popover {
         width: 250px;
 
-        .emoji-popover-top {
-            position: relative;
-
-            padding: 8px 10px;
-            margin-bottom: 0;
-
-            background-color: var(--color-background-emoji-picker-popover);
-
-            border-radius: 3px 3px 0 0;
-
-            .fa-search {
-                position: absolute;
-                color: hsl(0deg 0% 73%);
-                top: 15px;
-                left: 17px;
-                z-index: 3;
-            }
-
-            #emoji-popover-filter {
-                margin: auto;
-                padding-left: 22px;
-                width: calc(100% - 22px - 8px);
-                font-size: 90%;
-            }
-        }
-
         .emoji-popover-category-tabs {
             /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
             display: flex;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 93492e8b01..1cadcef04c 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -2218,24 +2218,24 @@ body:not(.hide-left-sidebar) {
     overscroll-behavior: contain;
 }
 
-.dropdown-list-container {
-    .dropdown-list-search {
-        display: flex;
+.popover-filter-input-wrapper {
+    display: flex;
 
-        .dropdown-list-search-input {
-            background: var(--color-background-widget-input);
-            color: var(--color-text-dropdown-input);
-            width: 100%;
-            margin: 4px 4px 2px;
+    .popover-filter-input {
+        background: var(--color-background-widget-input);
+        color: var(--color-text-dropdown-input);
+        width: 100%;
+        margin: 4px 4px 2px;
 
-            &:focus {
-                background: hsl(0deg 0% 100%);
-                border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
-                box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
-            }
+        &:focus {
+            background: hsl(0deg 0% 100%);
+            border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
+            box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
         }
     }
+}
 
+.dropdown-list-container {
     .dropdown-list-wrapper {
         /* Sync with `max-height` in dropdown_widget. */
         max-height: 210px;
diff --git a/web/templates/dropdown_list_container.hbs b/web/templates/dropdown_list_container.hbs
index 50986dc0a4..3954746ae6 100644
--- a/web/templates/dropdown_list_container.hbs
+++ b/web/templates/dropdown_list_container.hbs
@@ -1,6 +1,6 @@
 <div class="dropdown-list-container {{widget_name}}-dropdown-list-container">
-    <div class="dropdown-list-search">
-        <input class="dropdown-list-search-input filter_text_input{{#if hide_search_box}} hide{{/if}}" type="text" placeholder="{{t 'Filter' }}" autofocus/>
+    <div class="dropdown-list-search popover-filter-input-wrapper">
+        <input class="dropdown-list-search-input popover-filter-input filter_text_input{{#if hide_search_box}} hide{{/if}}" type="text" placeholder="{{t 'Filter' }}" autofocus/>
     </div>
     <div class="dropdown-list-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <ul class="dropdown-list"></ul>
diff --git a/web/templates/popovers/emoji/emoji_popover.hbs b/web/templates/popovers/emoji/emoji_popover.hbs
index 7c24972ea7..eb36585c54 100644
--- a/web/templates/popovers/emoji/emoji_popover.hbs
+++ b/web/templates/popovers/emoji/emoji_popover.hbs
@@ -1,8 +1,7 @@
 <div class="emoji-picker-popover" data-emoji-destination="{{#if message_id }}reaction{{else if is_status_emoji_popover}}status{{else}}composition{{/if}}">
     <div class="emoji-popover">
-        <div class="emoji-popover-top">
-            <input id="emoji-popover-filter" class="filter_text_input" type="text" placeholder="{{t 'Search' }}" />
-            <i class="fa fa-search" aria-hidden="true"></i>
+        <div class="popover-filter-input-wrapper">
+            <input id="emoji-popover-filter" class="popover-filter-input filter_text_input" type="text" placeholder="{{t 'Filter' }}" autofocus/>
         </div>
         <div class="emoji-popover-category-tabs">
             {{#each emoji_categories}}