From 77a0cfff41de393228f8d1fc1ffd5cd8dd1b0c6c Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Date: Fri, 13 Sep 2024 14:48:00 -0400
Subject: [PATCH 1/3] Fix transaction summary spacing

---
 app/views/transactions/_summary.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/transactions/_summary.html.erb b/app/views/transactions/_summary.html.erb
index 468f5a73..f31eff5e 100644
--- a/app/views/transactions/_summary.html.erb
+++ b/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>
-- 
2.53.0


From f1072bf958a887369ed9dff3844e6f9969096bbf Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Date: Fri, 13 Sep 2024 14:50:16 -0400
Subject: [PATCH 2/3] Fix search input padding

---
 app/views/transactions/searches/_form.html.erb              | 6 +++---
 app/views/transactions/searches/_menu.html.erb              | 6 +++---
 .../transactions/searches/filters/_account_filter.html.erb  | 2 +-
 .../transactions/searches/filters/_category_filter.html.erb | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/views/transactions/searches/_form.html.erb b/app/views/transactions/searches/_form.html.erb
index 0cfd8a1a..2cbccd63 100644
--- a/app/views/transactions/searches/_form.html.erb
+++ b/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">
diff --git a/app/views/transactions/searches/_menu.html.erb b/app/views/transactions/searches/_menu.html.erb
index 7f04a39b..2964ea1d 100644
--- a/app/views/transactions/searches/_menu.html.erb
+++ b/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">
-  <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">
+  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-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 } %>
diff --git a/app/views/transactions/searches/filters/_account_filter.html.erb b/app/views/transactions/searches/filters/_account_filter.html.erb
index 63b2eb26..0c6a4669 100644
--- a/app/views/transactions/searches/filters/_account_filter.html.erb
+++ b/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 %>
diff --git a/app/views/transactions/searches/filters/_category_filter.html.erb b/app/views/transactions/searches/filters/_category_filter.html.erb
index 60e3a05c..5f399126 100644
--- a/app/views/transactions/searches/filters/_category_filter.html.erb
+++ b/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 %>
-- 
2.53.0


From 27651dad5c7ed8fac8a837ed1f61c51547178e35 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Date: Fri, 13 Sep 2024 15:12:36 -0400
Subject: [PATCH 3/3] Search and transfer design fixes

---
 app/javascript/controllers/menu_controller.js          |  3 +--
 app/views/account/transfers/_transfer.html.erb         |  2 +-
 app/views/transactions/searches/_search.html.erb       | 10 ++++------
 .../searches/filters/_merchant_filter.html.erb         |  7 +++++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/javascript/controllers/menu_controller.js b/app/javascript/controllers/menu_controller.js
index 04d23a2c..3107a206 100644
--- a/app/javascript/controllers/menu_controller.js
+++ b/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',
       });
     });
   }
diff --git a/app/views/account/transfers/_transfer.html.erb b/app/views/account/transfers/_transfer.html.erb
index 4dbfc26a..1948b965 100644
--- a/app/views/account/transfers/_transfer.html.erb
+++ b/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" %>
diff --git a/app/views/transactions/searches/_search.html.erb b/app/views/transactions/searches/_search.html.erb
index 8f4d136c..506444ea 100644
--- a/app/views/transactions/searches/_search.html.erb
+++ b/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>
+      <% Array(param_value).each do |value| %>
+        <%= render partial: "transactions/searches/filters/badge", locals: { param_key: param_key, param_value: value } %>
+      <% end %>
     <% end %>
   <% end %>
 </ul>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb
index 5faca04c..33cfe068 100644
--- a/app/views/transactions/searches/filters/_merchant_filter.html.erb
+++ b/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>
-- 
2.53.0