From 4407c5b5b0591c64ddf5de113239d766c33b7acd Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Thu, 14 Dec 2023 16:27:03 +0000
Subject: [PATCH] Improve styles of slim header's search and filters for better
 vertical alignment

---
 client/scss/components/_filters.scss              | 15 +++++++++++++++
 client/scss/components/_header.scss               | 14 ++++++++++++++
 .../wagtailadmin/shared/headers/slim_header.html  |  6 +++---
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/client/scss/components/_filters.scss b/client/scss/components/_filters.scss
index cc6dd4e43f..70bd8ad801 100644
--- a/client/scss/components/_filters.scss
+++ b/client/scss/components/_filters.scss
@@ -23,3 +23,18 @@
     grid-row: 1;
   }
 }
+
+.w-filter-button {
+  width: theme('spacing.10');
+  height: theme('spacing.10');
+  padding: 0;
+  border: 1px solid theme('borderColor.border-field-default');
+  border-radius: theme('borderRadius.sm');
+  color: theme('colors.text-link-default');
+  background-color: theme('backgroundColor.surface-header');
+
+  .icon {
+    width: theme('fontSize.16');
+    height: theme('fontSize.16');
+  }
+}
diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
index bf1bf975fd..5f07ff6407 100644
--- a/client/scss/components/_header.scss
+++ b/client/scss/components/_header.scss
@@ -167,3 +167,17 @@
     }
   }
 }
+
+.w-slim-header {
+  &__search-form {
+    @apply w-mx-2;
+
+    .w-field__wrapper {
+      @apply w-mb-0;
+    }
+
+    .w-field__input {
+      @apply w-mt-0;
+    }
+  }
+}
diff --git a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
index 314fddae07..f2a10882a8 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
@@ -60,7 +60,7 @@
                     <form
                         action="{{ search_url }}"
                         method="get"
-                        class="w-mx-2"
+                        class="w-slim-header__search-form"
                         novalidate
                         role="search"
                         data-controller="w-swap"
@@ -69,7 +69,7 @@
                         data-w-swap-target-value="#listing-results"
                     >
                         {% for field in search_form %}
-                            {% formattedfield field=field classname="w-mb-0 -w-mt-2.5" sr_only_label=True icon="search" %}
+                            {% formattedfield field=field sr_only_label=True icon="search" %}
                         {% endfor %}
                         {% comment %}
                             Add an initial disabled & hidden submit button so that
@@ -84,7 +84,7 @@
             {% block filters %}
                 {% if filters %}
                     {% fragment as filters_icon %}{% icon name="sliders" title=_("Show filters") %}{% endfragment %}
-                    {% dialog_toggle classname="button button-secondary button--icon" dialog_id="filters-dialog" text=filters_icon %}
+                    {% dialog_toggle classname="w-filter-button" dialog_id="filters-dialog" text=filters_icon %}
 
                     {% dialog theme="floating" id="filters-dialog" title=_("Filters") %}
                         {% include "wagtailadmin/shared/filters.html" %}