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/rules/_category_rule_cta.html.erb

@@ -17,4 +17,4 @@
       <%= tag.a "Create rule", href: new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]), class: "btn btn--primary", data: { turbo_frame: "modal" } %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

app/views/rules/_form.html.erb

@@ -10,7 +10,7 @@
   <% end %>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium">If <%= rule.resource_type %></h3>
+    <h3 class="text-sm font-medium text-primary">If <%= rule.resource_type %></h3>
 
     <%# Condition template, used by Stimulus controller to add new conditions dynamically %>
     <template data-rules-target="conditionGroupTemplate">
@@ -50,7 +50,7 @@
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium">Then</h3>
+    <h3 class="text-sm font-medium text-primary">Then</h3>
 
     <%# Action template, used by Stimulus controller to add new actions dynamically %>
     <template data-rules-target="actionTemplate">
@@ -75,18 +75,18 @@
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium">Apply this</h3>
+    <h3 class="text-sm font-medium text-primary">Apply this</h3>
 
     <div class="space-y-2">
       <div class="flex items-center gap-2">
         <%= f.radio_button :effective_date_enabled, false, checked: rule.effective_date.nil?, data: { action: "rules#clearEffectiveDate" } %>
-        <%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm" %>
+        <%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
       </div>
 
       <div class="flex items-center gap-2">
         <div class="flex items-center gap-2">
           <%= f.radio_button :effective_date_enabled, true, checked: rule.effective_date.present? %>
-          <%= f.label :effective_date_enabled_true, "Starting from", class: "text-sm" %>
+          <%= f.label :effective_date_enabled_true, "Starting from", class: "text-sm text-primary" %>
         </div>
 
         <%= f.date_field :effective_date, container_class: "w-fit", data: { rules_target: "effectiveDateInput" } %>

app/views/rules/_rule.html.erb

@@ -22,7 +22,7 @@
       <span class="px-2 py-1 border border-alpha-black-200 rounded-full">
         <% if rule.actions.first.value && rule.actions.first.options %>
           <%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
-        <% else%>
+        <% else %>
           <%= rule.actions.first.executor.label %>
         <% end %>
       </span>

app/views/rules/confirm.html.erb

@@ -9,7 +9,7 @@
       </div>
       <div class="text-secondary text-sm">
         <p>
-          You are about to apply this rule to 
+          You are about to apply this rule to
           <span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
           that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
         </p>
@@ -17,4 +17,4 @@
     </div>
     <%= button_to "Confirm changes", apply_rule_path(@rule), class: "btn btn--primary w-full justify-center", data: { turbo_frame: "_top"} %>
   </div>
-<% end %>
+<% end %>

app/views/rules/index.html.erb

@@ -30,7 +30,7 @@
   </div>
 <% end %>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
 
   <% if @rules.any? %>
     <div class="rounded-xl bg-gray-25 space-y-1">