From 49c22b880cb0ae6adce5ebe40407402f98ce90b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 3 Dec 2020 11:39:33 +0100
Subject: [PATCH] Use CSS to style the search component

We simplify the view, and so make it easier to customize.
---
 app/assets/stylesheets/admin/search.css        | 17 +++++++++++++++++
 app/components/admin/search_component.html.erb | 14 ++++----------
 2 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/search.css

diff --git a/app/assets/stylesheets/admin/search.css b/app/assets/stylesheets/admin/search.css
new file mode 100644
index 000000000..f4e818abd
--- /dev/null
+++ b/app/assets/stylesheets/admin/search.css
@@ -0,0 +1,17 @@
+.admin  [role=search] {
+  display: flex;
+
+  [type="submit"] {
+    @include button($background: $link);
+    border-radius: 0;
+    font-size: 1rem;
+
+    &[disabled] {
+      @include button-disabled;
+    }
+  }
+
+  @include breakpoint(medium) {
+    width: 50%;
+  }
+}
diff --git a/app/components/admin/search_component.html.erb b/app/components/admin/search_component.html.erb
index 6af631ccc..117a9b50f 100644
--- a/app/components/admin/search_component.html.erb
+++ b/app/components/admin/search_component.html.erb
@@ -1,10 +1,4 @@
-<div class="small-12 medium-6">
-  <%= form_tag(url, method: :get, role: "search") do |f| %>
-    <div class="input-group">
-        <%= text_field_tag :search, search_terms.to_s, placeholder: label, "aria-label": label %>
-      <div class="input-group-button">
-        <%= submit_tag t("admin.shared.user_search.button"), class: "button" %>
-      </div>
-    </div>
-  <% end %>
-</div>
+<%= form_tag(url, method: :get, role: "search") do |f| %>
+  <%= text_field_tag :search, search_terms.to_s, placeholder: label, "aria-label": label %>
+  <%= submit_tag t("admin.shared.user_search.button") %>
+<% end %>