From ef9d7579df8ac929c0f47d911e9716cb87c7f79b Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Tue, 3 Dec 2024 00:22:13 -0700
Subject: [PATCH] UX: Add admin filter row styling (#30057)

* DEV: add scss file for admin filter

* UX: apply styling for the filter row
---
 .../admin/addon/templates/users-list-show.hbs        |  5 +++--
 app/assets/stylesheets/common/admin/admin_base.scss  |  1 +
 .../stylesheets/common/admin/admin_filter.scss       | 12 ++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/common/admin/admin_filter.scss

diff --git a/app/assets/javascripts/admin/addon/templates/users-list-show.hbs b/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
index 288c5a2369e..ec82e1b1096 100644
--- a/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
@@ -20,9 +20,10 @@
 
 <PluginOutlet @name="admin-users-list-show-before" />
 
-<div class="admin-users-list__controls">
-  <div class="admin-users-list__search">
+<div class="d-admin-filter admin-users-list__controls">
+  <div class="admin-filter__input-container admin-users-list__search">
     <input
+      class="admin-filter__input"
       type="text"
       dir="auto"
       placeholder={{this.searchHint}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 41ef3fdbfcf..f06bd7f7522 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1104,6 +1104,7 @@ a.inline-editable-field {
 @import "common/admin/site-settings";
 @import "common/admin/admin_config_area";
 @import "common/admin/admin_table";
+@import "common/admin/admin_filter";
 @import "common/admin/admin_reports";
 @import "common/admin/admin_report";
 @import "common/admin/admin_report_counters";
diff --git a/app/assets/stylesheets/common/admin/admin_filter.scss b/app/assets/stylesheets/common/admin/admin_filter.scss
new file mode 100644
index 00000000000..87d63586c88
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/admin_filter.scss
@@ -0,0 +1,12 @@
+.d-admin-filter {
+  background-color: var(--primary-very-low);
+  padding: var(--space-2);
+}
+
+.admin-users-list__search {
+  min-width: 50%;
+}
+
+.admin-filter__input {
+  width: 100%;
+}