[gnome-builder/wip/gtk4-port] libide/terminal: fix up styling for terminal search bar

[Christian Hergert <chergert src gnome org>]

commit 4479efef1c6fcd2c535cea0ac5e0b12827d0ac01
Author: Christian Hergert <chergert redhat com>
Date:   Fri May 6 17:17:43 2022 -0700

    libide/terminal: fix up styling for terminal search bar

 src/libide/gui/style.css                   |  23 ++++
 src/libide/terminal/ide-terminal-search.ui | 205 ++++++++++++++---------------
 2 files changed, 124 insertions(+), 104 deletions(-)
---
diff --git a/src/libide/gui/style.css b/src/libide/gui/style.css
index dfecc5105..6a4d971ca 100644
--- a/src/libide/gui/style.css
+++ b/src/libide/gui/style.css
@@ -60,3 +60,26 @@ notificationstack button {
   padding: 0;
   background: none;
 }
+
+/* Styling for search bars */
+.searchbar {
+  background-color: @popover_bg_color;
+  background-clip: padding-box;
+  color: @popover_fg_color;
+  padding: 6px;
+  border-style: solid;
+  border-color: alpha(black, .14);
+  border-left-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-radius: 0 0 12px 12px;
+  margin: 0 10px 20px 10px;
+  box-shadow: 0 1px 5px 1px alpha(black, .09),
+              0 2px 14px 3px alpha(black, .05);
+}
+.searchbar button.flat.circular {
+  min-width: 24px;
+  min-height: 24px;
+  margin: 0px;
+  padding: 3px;
+}
diff --git a/src/libide/terminal/ide-terminal-search.ui b/src/libide/terminal/ide-terminal-search.ui
index 0e5254a7b..bf995f65b 100644
--- a/src/libide/terminal/ide-terminal-search.ui
+++ b/src/libide/terminal/ide-terminal-search.ui
@@ -6,138 +6,135 @@
     <child>
       <object class="GtkRevealer" id="search_revealer">
         <child>
-          <object class="GtkFrame">
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">7</property>
             <property name="margin-end">12</property>
             <style>
-              <class name="search-frame"/>
+              <class name="searchbar"/>
             </style>
             <child>
-              <object class="GtkBox">
-                <property name="orientation">vertical</property>
-                <property name="spacing">7</property>
+              <object class="GtkGrid">
+                <property name="row_spacing">8</property>
+                <property name="column_spacing">8</property>
                 <child>
-                  <object class="GtkGrid">
-                    <property name="row_spacing">8</property>
-                    <property name="column_spacing">8</property>
-                    <child>
-                      <object class="IdeSearchEntry" id="search_entry">
-                        <property name="width-chars">20</property>
-                        <property name="max-width-chars">30</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">0</property>
-                        </layout>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="homogeneous">true</property>
-                        <property name="valign">center</property>
-                        <style>
-                          <class name="linked"/>
-                        </style>
-                        <child>
-                          <object class="GtkButton" id="search_prev_button">
-                            <child>
-                              <object class="GtkImage">
-                                <property name="icon_name">go-up-symbolic</property>
-                                <property name="icon_size">1</property>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkButton" id="search_next_button">
-                            <child>
-                              <object class="GtkImage">
-                                <property name="icon_name">go-down-symbolic</property>
-                                <property name="icon_size">1</property>
-                              </object>
-                            </child>
-                          </object>
-                        </child>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">0</property>
-                        </layout>
-                      </object>
-                    </child>
+                  <object class="IdeSearchEntry" id="search_entry">
+                    <property name="width-chars">20</property>
+                    <property name="max-width-chars">30</property>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox">
+                    <property name="homogeneous">true</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="linked"/>
+                    </style>
                     <child>
-                      <object class="GtkToggleButton" id="reveal_button">
-                        <property name="action-target">true</property>
-                        <property name="tooltip-text" translatable="yes">Show or hide search options such as 
case sensitivity</property>
+                      <object class="GtkButton" id="search_prev_button">
                         <child>
                           <object class="GtkImage">
-                            <property name="icon_name">emblem-system-symbolic</property>
+                            <property name="icon_name">go-up-symbolic</property>
+                            <property name="icon_size">1</property>
                           </object>
                         </child>
-                        <layout>
-                          <property name="column">2</property>
-                          <property name="row">0</property>
-                        </layout>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkButton" id="close_button">
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                        <property name="focus_on_click">false</property>
-                        <style>
-                          <class name="close"/>
-                        </style>
+                      <object class="GtkButton" id="search_next_button">
                         <child>
                           <object class="GtkImage">
-                            <property name="icon_name">window-close-symbolic</property>
+                            <property name="icon_name">go-down-symbolic</property>
+                            <property name="icon_size">1</property>
                           </object>
                         </child>
-                        <layout>
-                          <property name="column">3</property>
-                          <property name="row">0</property>
-                        </layout>
                       </object>
                     </child>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">0</property>
+                    </layout>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkGrid" id="search_options">
-                    <property name="visible">false</property>
-                    <property name="column_spacing">8</property>
+                  <object class="GtkToggleButton" id="reveal_button">
+                    <property name="action-target">true</property>
+                    <property name="tooltip-text" translatable="yes">Show or hide search options such as 
case sensitivity</property>
                     <child>
-                      <object class="GtkCheckButton" id="regex_checkbutton">
-                        <property name="label" translatable="yes">Regex</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">0</property>
-                        </layout>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkCheckButton" id="match_case_checkbutton">
-                        <property name="label" translatable="yes">Case sensitive</property>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">0</property>
-                        </layout>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkCheckButton" id="entire_word_checkbutton">
-                        <property name="label" translatable="yes">Match whole word</property>
-                        <layout>
-                          <property name="column">2</property>
-                          <property name="row">0</property>
-                        </layout>
+                      <object class="GtkImage">
+                        <property name="icon_name">emblem-system-symbolic</property>
                       </object>
                     </child>
+                    <layout>
+                      <property name="column">2</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton" id="close_button">
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="focus_on_click">false</property>
+                    <style>
+                      <class name="flat"/>
+                      <class name="circular"/>
+                    </style>
                     <child>
-                      <object class="GtkCheckButton" id="wrap_around_checkbutton">
-                        <property name="label" translatable="yes">Wrap around</property>
-                        <layout>
-                          <property name="column">3</property>
-                          <property name="row">0</property>
-                        </layout>
+                      <object class="GtkImage">
+                        <property name="icon_name">window-close-symbolic</property>
                       </object>
                     </child>
+                    <layout>
+                      <property name="column">3</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkGrid" id="search_options">
+                <property name="visible">false</property>
+                <property name="column_spacing">8</property>
+                <child>
+                  <object class="GtkCheckButton" id="regex_checkbutton">
+                    <property name="label" translatable="yes">Regex</property>
+                    <layout>
+                      <property name="column">0</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="match_case_checkbutton">
+                    <property name="label" translatable="yes">Case sensitive</property>
+                    <layout>
+                      <property name="column">1</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="entire_word_checkbutton">
+                    <property name="label" translatable="yes">Match whole word</property>
+                    <layout>
+                      <property name="column">2</property>
+                      <property name="row">0</property>
+                    </layout>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="wrap_around_checkbutton">
+                    <property name="label" translatable="yes">Wrap around</property>
+                    <layout>
+                      <property name="column">3</property>
+                      <property name="row">0</property>
+                    </layout>
                   </object>
                 </child>
               </object>