Use search_field and put search icon inside input

slovensko-digital · Sep 13, 2023 · 1cc6568 · 1cc6568
1 parent 6dc9e1c
commit 1cc6568
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/app/components/t_w/top_navigation_component.html.erb b/app/components/t_w/top_navigation_component.html.erb
@@ -20,11 +20,13 @@
   </svg>
   <div class="flex flex-col justify-center items-stretch grow gap-2">
     <div class="flex justify-start items-center relative gap-3 p-1.5 rounded-md bg-white">
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="  w-5 h-5 relative" preserveAspectRatio="xMidYMid meet">
-        <path d="M17.5 17.5L12.5 12.5M14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-      <%= form_with url: message_threads_path, method: :get, html: { style: 'width: 100%' } do |f| %>
-        <%= f.text_field :q, value: params[:q], placeholder: 'Vyhľadaj správu', style: 'width: 100%', class: 'grow text-base text-left text-gray-400' %>
+      <%= form_with url: message_threads_path, method: :get, html: { style: 'width: 100%', class: 'relative' } do |f| %>
+        <%= f.label :q, class: 'flex' do %>
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute top-2.5 left-3 w-5 h-5" preserveAspectRatio="xMidYMid meet">
+            <path d="M17.5 17.5L12.5 12.5M14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        <% end %>
+        <%= f.search_field :q, value: params[:q], placeholder: 'Vyhľadaj správu', class: 'pl-10 text-base text-left text-gray-900 placeholder-gray-400', style: 'width: 100%' %>
       <% end %>
 
     </div>