From 90355c0b279b0008e9008fcadf83058c343df194 Mon Sep 17 00:00:00 2001
From: nana-4 <hnmaigo@gmail.com>
Date: Sat, 12 Dec 2020 16:32:27 +0900
Subject: [PATCH 1/2] emojichooser: Add .emoji-searchbar style class

Similar to .emoji-toolbar, it would be nice to have this for styling.
---
 gtk/gtkemojichooser.c     |  4 ++++
 gtk/ui/gtkemojichooser.ui | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/gtk/gtkemojichooser.c b/gtk/gtkemojichooser.c
index 11bf196e0a..6625599942 100644
--- a/gtk/gtkemojichooser.c
+++ b/gtk/gtkemojichooser.c
@@ -54,6 +54,8 @@
  * # CSS nodes
  * |[<!-- language="plain" -->
  * popover
+ * ├── box.emoji-searchbar
+ * │   ╰── entry.search
  * ╰── box.emoji-toolbar
  *     ├── button.image-button.emoji-section
  *     ├── ...
@@ -63,6 +65,8 @@
  * Every #GtkEmojiChooser consists of a main node called popover.
  * The contents of the popover are largely implementation defined
  * and supposed to inherit general styles.
+ * The top searchbar used to search emoji and gets the .emoji-searchbar
+ * style class itself.
  * The bottom toolbar used to switch between different emoji categories
  * consists of buttons with the .emoji-section style class and gets the
  * .emoji-toolbar style class itself.
diff --git a/gtk/ui/gtkemojichooser.ui b/gtk/ui/gtkemojichooser.ui
index cb8cb6fa1f..823fd026d5 100644
--- a/gtk/ui/gtkemojichooser.ui
+++ b/gtk/ui/gtkemojichooser.ui
@@ -8,9 +8,17 @@
       <object class="GtkBox" id="box">
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkSearchEntry" id="search_entry">
-            <signal name="search-changed" handler="search_changed"/>
-            <signal name="stop-search" handler="stop_search"/>
+          <object class="GtkBox">
+            <style>
+              <class name="emoji-searchbar"/>
+            </style>
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <property name="hexpand">1</property>
+                <signal name="search-changed" handler="search_changed"/>
+                <signal name="stop-search" handler="stop_search"/>
+              </object>
+            </child>
           </object>
         </child>
         <child>
@@ -211,7 +219,7 @@
                     <child>
                       <object class="GtkBox">
                         <style>
-                          <class name="emoji-toolbar" />
+                          <class name="emoji-toolbar"/>
                         </style>
                         <child>
                           <object class="GtkButton" id="recent.button">

From 34d99ea1d09e37630bfa6e27546251e5606de362 Mon Sep 17 00:00:00 2001
From: nana-4 <hnmaigo@gmail.com>
Date: Sat, 12 Dec 2020 16:52:49 +0900
Subject: [PATCH 2/2] Adwaita: Improve emoji picker styling

- Add borders around the main scrollable content, like most other
  places.
- Set padding and spacing on .emoji-searchbar and .emoji-toolbar in a
  more proper way.
- Remove unused button.emoji-section label styles.
---
 gtk/theme/Adwaita/_common.scss | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 845582650d..ba86fdba9c 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4229,8 +4229,18 @@ stackswitcher.circular {
 
 popover.emoji-picker > contents {
   padding: 0;
+}
 
-  entry.search { margin: 5px; }
+.emoji-searchbar {
+  padding: 6px;
+  border-spacing: 6px;
+  border-bottom: 1px solid $borders_color;
+}
+
+.emoji-toolbar {
+  padding: 6px;
+  border-spacing: 6px;
+  border-top: 1px solid $borders_color;
 }
 
 button.emoji-section {
@@ -4239,7 +4249,6 @@ button.emoji-section {
   border-style: none none solid;
   border-radius: 0;
 
-  margin: 2px 8px 4px;
   padding: 3px 0 0;
   min-width: 32px;
   min-height: 28px;
@@ -4249,20 +4258,8 @@ button.emoji-section {
   box-shadow: none;
   text-shadow: none;
 
-  &:dir(ltr):not(:last-child) { margin-right: 0; }
-  &:dir(rtl):not(:last-child) { margin-left: 0; }
-
   &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
   &:checked { border-color: $selected_bg_color; }
-
-  label {
-    padding: 0;
-
-    opacity: 0.55;
-  }
-
-  &:hover label { opacity: 0.775; }
-  &:checked label { opacity: 1; }
 }
 
 popover.emoji-picker emoji {