From 9135ccd4b9f6d359c1ba91e8184900a9fce5650a Mon Sep 17 00:00:00 2001
From: Cinder <cinder@e621.net>
Date: Tue, 11 Feb 2025 22:27:16 -0800
Subject: [PATCH] [Posts] Replace the search submit icon with a lucide one
 (#910)

---
 app/helpers/icon_helper.rb                    |  1 +
 .../src/styles/common/post_search.scss        | 22 +++++++++++++------
 app/javascript/src/styles/specific/home.scss  | 13 +++++++----
 .../posts/partials/common/_search.html.erb    |  2 +-
 app/views/static/home.html.erb                |  2 +-
 5 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/helpers/icon_helper.rb b/app/helpers/icon_helper.rb
index 077752253..34bc65282 100644
--- a/app/helpers/icon_helper.rb
+++ b/app/helpers/icon_helper.rb
@@ -28,6 +28,7 @@ module IconHelper
     ellipsis: %(<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>),
 
     # Posts
+    search: %(<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>),
     fullscreen: %(<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/>),
   }.freeze
 
diff --git a/app/javascript/src/styles/common/post_search.scss b/app/javascript/src/styles/common/post_search.scss
index 68ce953d4..ede222255 100644
--- a/app/javascript/src/styles/common/post_search.scss
+++ b/app/javascript/src/styles/common/post_search.scss
@@ -30,7 +30,7 @@
       // Disable manual resizing
       resize: none;
 
-      border-radius: 3px 0 0 3px;
+      border-radius: 0.25rem 0 0 0.25rem;
       box-sizing: border-box;
       flex: 1;
 
@@ -43,19 +43,27 @@
       font-size: unset;
       max-width: unset;
 
-      font-size: 1rem;
-      line-height: 1rem;
+      display: flex;
+      align-items: center;
       padding: 0.5rem;
 
-      border-radius: 0 3px 3px 0;
+      border-radius: 0 0.25rem 0.25rem 0;
       background: white;
+      color: black;
 
-      span { display: none; }
+      svg {
+        height: 1.5rem;
+        width: 1.5rem;
+        margin: -0.25rem 0 -0.25rem;
+      }
     }
 
     @include window-larger-than(800px) {
-      textarea, button[type="submit"] {
-        font-size: 0.85rem;
+      textarea { font-size: 0.85rem; }
+      button[type="submit"] svg {
+        height: 1.25rem;
+        width: 1.25rem;
+        margin: -0.125rem 0 -0.125rem;
       }
     }
   }
diff --git a/app/javascript/src/styles/specific/home.scss b/app/javascript/src/styles/specific/home.scss
index 94dd52ea2..9b6a95b85 100644
--- a/app/javascript/src/styles/specific/home.scss
+++ b/app/javascript/src/styles/specific/home.scss
@@ -39,7 +39,7 @@ body.c-static.a-home {
     input[type="text"] {
       flex: 1;
       border: 0;
-      border-radius: 3px 0 0 3px;
+      border-radius: 0.25rem 0 0 0.25rem;
       padding: 0.5rem;
       font-size: 1rem;
 
@@ -53,9 +53,14 @@ body.c-static.a-home {
 
     button[type="submit"] {
       background: white;
-      border-radius: 0 3px 3px 0;
-      padding: 0 0.5em;
-      font-size: 1rem;
+      border-radius: 0 0.25rem 0.25rem 0;
+      padding: 0 0.5rem;
+
+      svg {
+        height: 1.25rem;
+        width: 1.25rem;
+        margin: -0.125rem 0 -0.125rem;
+      }
     }
   }
 
diff --git a/app/views/posts/partials/common/_search.html.erb b/app/views/posts/partials/common/_search.html.erb
index 051a9a259..3c4266be7 100644
--- a/app/views/posts/partials/common/_search.html.erb
+++ b/app/views/posts/partials/common/_search.html.erb
@@ -10,6 +10,6 @@
     <% end %>
 
     <%= text_area_tag("tags", tags, placeholder: "Search posts by tag", rows: 1, data: { shortcut: "q", autocomplete: "tag-query" }) %>
-    <%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit", title: "Search") %>
+    <%= tag.button(svg_icon(:search), type: "submit", title: "Search") %>
   <% end %>
 </section>
diff --git a/app/views/static/home.html.erb b/app/views/static/home.html.erb
index 244aed43f..41f8e4e0f 100644
--- a/app/views/static/home.html.erb
+++ b/app/views/static/home.html.erb
@@ -9,7 +9,7 @@
       <!-- Primary Searchbar -->
       <div class="home-search">
         <%= text_field_tag("tags", "", autofocus: "autofocus", placeholder: "Search posts by tag", data: { shortcut: "q", autocomplete: "tag-query" }) %>
-        <%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit") %>
+        <%= tag.button(svg_icon(:search), type: "submit") %>
       </div>
 
       <!-- Secondary search buttons -->