Create shared ruler and standardize across views (#2240)

* Create shared ruler view

* Use collection rendering/spacer templates for rules, and new shared_ruler

* Use shared ruler for all the places a ruler is used

* Use shared ruler for imports and balance sheet

* Fix brakeman by using a static partial with a defined collection

* Update balance sheet

app/assets/tailwind/maybe-design-system/background-utils.css

@@ -78,14 +78,6 @@
   }
 }
 
-@utility bg-divider {
-  @apply bg-alpha-black-100;
-
-  @variant theme-dark {
-    @apply bg-alpha-white-100;
-  }
-}
-
 @utility bg-overlay {
   background-color: --alpha(var(--color-gray-100) / 50%);
 

app/assets/tailwind/maybe-design-system/border-utils.css

@@ -63,6 +63,10 @@
   }
 }
 
+@utility border-divider {
+  @apply border-tertiary;
+}
+
 @utility border-subdued {
   @apply border-alpha-black-50;
 

app/components/menu_item_component.html.erb

@@ -1,5 +1,5 @@
 <% if variant == :divider %>
-  <hr class="border-tertiary my-1">
+  <%= render "shared/ruler", classes: "my-1" %>
 <% else %>
   <div class="px-1">
     <%= wrapper do %>

app/views/accounts/_accountable_group.html.erb

@@ -50,7 +50,6 @@
           <% else %>
             <div class="ml-auto text-right grow h-10">
               <%= tag.p format_money(account.balance_money), class: "text-sm font-medium text-primary whitespace-nowrap" %>
-
               <%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy" do %>
                 <div class="flex items-center w-8 h-4 ml-auto">
                   <div class="w-6 h-px bg-loader"></div>

app/views/budgets/_budget_categories.html.erb

@@ -34,9 +34,7 @@
           </div>
         </div>
 
-        <div class="px-4">
-          <div class="h-px w-full bg-alpha-black-50"></div>
-        </div>
+        <%= render "shared/ruler" %>
       <% end %>
 
       <%= render "budget_categories/budget_category", budget_category: budget.uncategorized_budget_category %>

app/views/categories/_category_list_group.html.erb

@@ -17,7 +17,7 @@
         <% end %>
 
         <% unless idx == Category::Group.for(categories).count - 1 %>
-          <%= render "categories/ruler" %>
+          <%= render "shared/ruler" %>
         <% end %>
       <% end %>
     </div>

app/views/categories/_ruler.html.erb

@@ -1,3 +0,0 @@
-<div class="bg-container">
-  <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
-</div>

app/views/category/dropdowns/show.html.erb

@@ -40,7 +40,7 @@
       <% end %>
     </div>
 
-    <hr class="border-tertiary">
+    <%= render "shared/ruler", classes: "my-2" %>
 
     <div class="relative p-1.5 w-full">
       <% if @transaction.category %>

app/views/credit_cards/_form.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <%= render "accounts/form", account: account, url: url do |form| %>
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |credit_card_form| %>

app/views/entries/_ruler.html.erb

@@ -1 +0,0 @@
-<div class="h-px bg-alpha-black-50 ml-16 mr-4"></div>

app/views/family_merchants/_ruler.html.erb

@@ -1,3 +0,0 @@
-<div class="bg-container">
-  <div class="h-px bg-alpha-black-50 ml-14 mr-6"></div>
-</div>

app/views/family_merchants/index.html.erb

@@ -20,7 +20,7 @@
 
       <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
         <div class="overflow-hidden rounded-md">
-          <%= render partial: "family_merchants/family_merchant", collection: @merchants, spacer_template: "family_merchants/ruler" %>
+          <%= render partial: "family_merchants/family_merchant", collection: @merchants, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>

app/views/holdings/_ruler.html.erb

@@ -1 +0,0 @@
-<div class="h-px bg-alpha-black-50 ml-16 mr-4"></div>

app/views/holdings/index.html.erb

@@ -24,11 +24,10 @@
 
       <div class="rounded-lg bg-container shadow-border-xs">
         <%= render "holdings/cash", account: @account %>
-
-        <%= render "holdings/ruler" %>
+        <%= render "shared/ruler" %>
 
         <% if @account.current_holdings.any? %>
-          <%= render partial: "holdings/holding", collection: @account.current_holdings, spacer_template: "ruler" %>
+          <%= render partial: "holdings/holding", collection: @account.current_holdings, spacer_template: "shared/ruler" %>
         <% end %>
       </div>
     </div>

app/views/imports/_import.html.erb

@@ -1,4 +1,4 @@
-<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-4 border-b last:border-b-0 border-alpha-black-50">
+<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-4">
 
   <div class="flex items-center gap-2 mb-1">
     <%= link_to import_path(import), class: "text-sm text-primary hover:underline" do %>

app/views/imports/_ready.html.erb

@@ -16,7 +16,7 @@
       <% import.dry_run.each do |key, count| %>
         <% resource = dry_run_resource(key) %>
 
-        <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-tl-lg rounded-tr-lg">
+        <div class="flex items-center justify-between gap-2 bg-container px-5 py-3 rounded-lg">
           <div class="flex items-center gap-3">
             <%= tag.div class: class_names(resource.bg_class, resource.text_class, "w-8 h-8 rounded-full flex justify-center items-center") do %>
               <%= icon resource.icon, color: "current" %>
@@ -29,7 +29,7 @@
         </div>
 
         <% if key != import.dry_run.keys.last %>
-          <div class="h-px bg-alpha-black-50 ml-14 mr-5"></div>
+          <%= render "shared/ruler" %>
         <% end %>
       <% end %>
     </div>

app/views/imports/index.html.erb

@@ -18,7 +18,7 @@
       <h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
 
       <div class="border border-alpha-black-100 rounded-lg bg-container shadow-xs">
-        <%= render partial: "imports/import", collection: @imports.ordered %>
+        <%= render partial: "imports/import", collection: @imports.ordered, spacer_template: "shared/ruler" %>
       </div>
     </div>
   <% end %>

app/views/imports/new.html.erb

@@ -21,9 +21,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -43,9 +41,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -65,9 +61,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -87,9 +81,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
 
@@ -105,9 +97,7 @@
               <%= icon("chevron-right") %>
             <% end %>
 
-            <div class="pl-14 pr-3">
-              <div class="h-px bg-alpha-black-50"></div>
-            </div>
+            <%= render "shared/ruler" %>
           </li>
         <% end %>
       </ul>

app/views/loans/_form.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <%= render "accounts/form", account: account, url: url do |form| %>
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |loan_form| %>

app/views/pages/dashboard/_balance_sheet.html.erb

@@ -124,9 +124,7 @@
                     </div>
 
                     <% if idx < account_group.accounts.size - 1 %>
-                      <div class="pl-[84px] pr-40">
-                        <div class="w-full border-subdued border-b"></div>
-                      </div>
+                      <%= render "shared/ruler", classes: "ml-21 mr-4" %>
                     <% end %>
                   <% end %>
                 </div>

app/views/properties/_form.html.erb

@@ -5,7 +5,7 @@
                  Property::SUBTYPES.map { |k, v| [v[:long], k] },
                  { label: true, prompt: t("properties.form.subtype_prompt"), include_blank: t("properties.form.none") } %>
 
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |property_form| %>

app/views/rules/_rule.html.erb

@@ -1,5 +1,6 @@
 <%# locals: (rule:) %>
-<div class="flex justify-between items-center p-4 <%= rule.active? ? "text-primary" : "text-secondary" %>">
+<div id="<%= dom_id(rule) %>" class="flex justify-between items-center p-4 <%= rule.active? ? 'text-primary' : 'text-secondary' %>">
+
   <div class="text-sm space-y-1.5">
     <% if rule.name.present? %>
       <h3 class="font-medium text-md"><%= rule.name %></h3>

app/views/rules/index.html.erb

@@ -59,12 +59,7 @@
       </div>
       <div class="p-1">
         <div class="flex flex-col bg-container rounded-xl shadow-border-xs first_child:rounded-t-xl last_child:rounded-b-xl">
-          <% @rules.each_with_index do |rule, idx| %>
-            <%= render "rule", rule: rule %>
-            <% unless idx == @rules.size - 1 %>
-              <div class="h-px bg-divider ml-4 mr-6"></div>
-            <% end %>
-          <% end %>
+          <%= render partial: "rule", collection: @rules, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>

app/views/settings/_settings_nav.html.erb

@@ -48,7 +48,7 @@ nav_sections = [
       <section class="space-y-2">
         <div class="flex items-center gap-2 px-3">
           <h3 class="uppercase text-secondary font-medium text-xs"><%= section[:header] %></h3>
-          <div class="h-px bg-alpha-black-100 w-full"></div>
+          <%= render "shared/ruler", classes: "w-full" %>
         </div>
         <ul class="space-y-1">
           <% section[:items].each do |item| %>

app/views/shared/_ruler.html.erb

@@ -0,0 +1,2 @@
+<%# locals: (classes: nil) %>
+<hr class="border-divider <%= classes || 'mx-4' %>">

app/views/tags/_ruler.html.erb

@@ -1,3 +0,0 @@
-<div class="bg-container">
-  <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
-</div>

app/views/tags/index.html.erb

@@ -35,7 +35,7 @@
 
       <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
         <div class="overflow-hidden rounded-md">
-          <%= render partial: @tags, spacer_template: "tags/ruler" %>
+          <%= render partial: @tags, spacer_template: "shared/ruler" %>
         </div>
       </div>
     </div>

app/views/transfers/show.html.erb

@@ -44,7 +44,7 @@
           </dl>
         </div>
 
-        <div class="bg-alpha-black-100 h-px my-2"></div>
+        <%= render "shared/ruler", classes: "my-2" %>
 
         <div class="space-y-3">
           <dl class="flex items-center gap-2 justify-between">

app/views/valuations/index.html.erb

@@ -27,7 +27,7 @@
           <%= render partial: "valuations/valuation",
                      collection:      @entries,
                      as:              :entry,
-                     spacer_template: "entries/ruler" %>
+                     spacer_template: "shared/ruler" %>
         <% else %>
           <p class="text-secondary text-sm p-4"><%= t(".no_valuations") %></p>
         <% end %>

app/views/vehicles/_form.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (account:, url:) %>
 
 <%= render "accounts/form", account: account, url: url do |form| %>
-  <hr class="my-4">
+  <%= render "shared/ruler", classes: "my-4" %>
 
   <div class="space-y-2">
     <%= form.fields_for :accountable do |vehicle_form| %>