Transaction page design fixes (#1176)

* Fix transaction summary spacing

* Fix search input padding

* Search and transfer design fixes

app/javascript/controllers/menu_controller.js

@@ -10,7 +10,7 @@ export default class extends Controller {
   static values = {
     show: Boolean,
     placement: { type: String, default: "bottom-end" },
-    offset: { type: Number, default: 5 },
+    offset: { type: Number, default: 6 },
   };
 
   connect() {
@@ -103,7 +103,6 @@ export default class extends Controller {
         position: 'fixed',
         left: `${x}px`,
         top: `${y}px`,
-        width: 'max-content',
       });
     });
   }

app/views/account/transfers/_transfer.html.erb

@@ -10,7 +10,7 @@
       <% end %>
 
       <%= tag.div class: short ? "max-w-[250px]" : "max-w-[325px]" do %>
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 <%= selectable ? "" : "pl-8" %>">
           <%= circle_logo(transfer.from_name[0].upcase) %>
 
           <%= tag.p transfer.name, class: "truncate text-gray-900" %>

app/views/transactions/_summary.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (totals:) %>
-<div class="grid grid-cols-3 bg-white rounded-xl border border-alpha-black-25 shadow-xs px-4 divide-x divide-alpha-black-100">
+<div class="grid grid-cols-3 bg-white rounded-xl border border-alpha-black-25 shadow-xs divide-x divide-alpha-black-100">
   <div class="p-4 space-y-2">
     <p class="text-sm text-gray-500">Total transactions</p>
     <p class="text-gray-900 font-medium text-xl" id="total-transactions"><%= totals[:count] %></p>

app/views/transactions/searches/_form.html.erb

@@ -5,13 +5,13 @@
               data: { controller: "auto-submit-form" } do |form| %>
   <div class="flex gap-2 mb-4">
     <div class="grow">
-      <div class="relative flex items-center bg-white border border-alpha-black-200 rounded-lg focus-within:border-alpha-black-500">
+      <div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
+        <%= lucide_icon("search", class: "w-5 h-5 text-gray-500") %>
         <%= form.text_field :search,
                             placeholder: "Search transactions by name",
                             value: @q[:search],
-                            class: "placeholder:text-sm placeholder:text-gray-500 relative pl-10 w-full border-none rounded-lg focus:outline-none focus:ring-0",
+                            class: "form-field__input placeholder:text-sm placeholder:text-gray-500",
                             "data-auto-submit-form-target": "auto" %>
-        <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
       </div>
     </div>
     <div data-controller="menu" class="relative">

app/views/transactions/searches/_menu.html.erb

@@ -4,8 +4,8 @@
   data-controller="tabs"
   data-tabs-active-class="bg-gray-25 text-gray-900"
   data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
-  class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-alpha-black-25 bg-white rounded-lg shadow-xs">
+  class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-alpha-black-100 bg-white rounded-lg shadow-xs">
-  <div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-gray-500 border-r border-r-alpha-black-25">
+  <div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-gray-500 border-r border-r-alpha-black-100">
     <% transaction_search_filters.each do |filter| %>
       <button
         class="flex text-gray-500 hover:bg-gray-25 items-center gap-2 px-3 rounded-md py-2 w-full"
@@ -20,7 +20,7 @@
   </div>
 
   <div class="flex flex-col grow">
-    <div class="grow p-2 border-b border-b-alpha-black-25 overflow-y-auto">
+    <div class="grow p-2 border-b border-b-alpha-black-100 overflow-y-auto">
       <% transaction_search_filters.each do |filter| %>
         <div id="<%= filter[:key] %>" data-tabs-target="tab">
           <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>

app/views/transactions/searches/_search.html.erb

@@ -1,13 +1,11 @@
 <%= render "transactions/searches/form" %>
 
-<ul id="transaction-search-filters" class="flex items-center flex-wrap gap-2">
+<ul id="transaction-search-filters" class="flex items-center flex-wrap gap-2 mb-4">
   <% @q.each do |param_key, param_value| %>
     <% unless param_value.blank? %>
-      <div class="pb-4">
       <% Array(param_value).each do |value| %>
         <%= render partial: "transactions/searches/filters/badge", locals: { param_key: param_key, param_value: value } %>
       <% end %>
-      </div>
     <% end %>
   <% end %>
 </ul>

app/views/transactions/searches/filters/_account_filter.html.erb

@@ -11,7 +11,7 @@
                            {
                              multiple: true,
                              checked: @q[:accounts]&.include?(account.name),
-                             class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                             class: "maybe-checkbox maybe-checkbox--light"
                            },
                            account.name,
                            nil %>

app/views/transactions/searches/filters/_category_filter.html.erb

@@ -11,7 +11,7 @@
                            {
                              multiple: true,
                              checked: @q[:categories]&.include?(category.name),
-                             class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                             class: "maybe-checkbox maybe-checkbox--light"
                            },
                            category.name,
                            nil %>

app/views/transactions/searches/filters/_merchant_filter.html.erb

@@ -11,11 +11,14 @@
                            {
                              multiple: true,
                              checked: @q[:merchants]&.include?(merchant.name),
-                             class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                             class: "maybe-checkbox maybe-checkbox--light"
                            },
                            merchant.name,
                            nil %>
-        <%= form.label :merchants, merchant.name, value: merchant.name, class: "text-sm text-gray-900" %>
+        <%= form.label :merchants, value: merchant.name, class: "text-sm text-gray-900 flex items-center gap-2" do %>
+          <%= circle_logo(merchant.name, hex: merchant.color, size: "sm") %>
+          <%= merchant.name %>
+        <% end %>
       </div>
     <% end %>
   </div>