Improve dark mode styles across multiple pages (#2125)

* fix: improve dark mode readability across the app

* fix: improve dark mode support for asset percentage text

* fix: apply suggested patch for theme-related improvements

* chore: apply PR feedback – remove dark:, align with design tokens, update form builder

* chore: revert background token and restore original style for visual consistency

* chore: remove unnecessary class attributes from form fields using builder

* refactor: move number_field and date_field into metaprogramming block

* refactor: replace bg-divider-adaptive divs with <hr> and border-secondary

* fix: apply requested changes and linting fixes

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

@@ -4,10 +4,10 @@
   id="transaction-filters-menu"
   data-menu-target="content"
   data-controller="tabs"
-  data-tabs-active-class="bg-gray-25 text-primary"
+  data-tabs-active-class="bg-surface text-primary"
   data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
   class="hidden absolute flex flex-col md:flex-row z-10 h-auto md:h-80 w-full md:w-[540px] top-12 right-0 shadow-border-xs bg-container rounded-lg overflow-hidden">
-  <div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-alpha-black-100 overflow-x-auto md:overflow-x-visible">
+  <div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-secondary overflow-x-auto md:overflow-x-visible">
     <% transaction_search_filters.each do |filter| %>
       <button
         class="flex text-secondary hover:bg-container-inset items-center gap-2 px-3 rounded-md py-2 min-w-max md:w-full"
@@ -20,9 +20,8 @@
       </button>
     <% end %>
   </div>
-
   <div class="flex flex-col grow">
-    <div class="grow p-3 border-b border-b-alpha-black-100 overflow-y-auto max-h-[50vh] md:max-h-none">
+    <div class="grow p-3 border-b border-secondary overflow-y-auto max-h-[50vh] md:max-h-none">
       <% 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/filters/_account_filter.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-secondary rounded-md py-2 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">

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

@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">

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

@@ -3,9 +3,9 @@
   <%= form.date_field :start_date,
                       placeholder: "Start date",
                       value: @q[:start_date],
-                      class: "block w-full border border-gray-200 rounded-md py-2 pl-3 pr-3 focus:border-gray-500 focus:ring-gray-500 sm:text-sm" %>
+                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3  focus:ring-gray-500 sm:text-sm" %>
   <%= form.date_field :end_date,
                       placeholder: "End date",
                       value: @q[:end_date],
-                      class: "block w-full border border-gray-200 rounded-md py-2 pl-3 pr-3 focus:border-gray-500 focus:ring-gray-500 sm:text-sm mt-2" %>
+                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3  focus:ring-gray-500 sm:text-sm mt-2" %>
 </div>

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

@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">

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

@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">