Use shared ruler for all the places a ruler is used

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

@@ -6,8 +6,8 @@
       <%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>
 
       <%= turbo_frame_tag "#{account_group.key}_sparkline", src: accountable_sparkline_path(account_group.key), loading: "lazy" do %>
-        <div class="flex items-center w-8 h-4 ml-auto">
+        <div class="flex items-center w-16 h-4 ml-auto">
-          <div class="w-6 h-px bg-surface-inset"></div>
+          <%= render "shared/ruler", classes: "w-full" %>
         </div>
       <% end %>
     </div>
@@ -33,9 +33,7 @@
           <%= 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-5 ml-auto">
+            <%= render "shared/ruler", classes: "w-6" %>
-              <div class="w-6 h-px bg-surface-inset"></div>
-            </div>
           <% end %>
         </div>
       <% end %>

app/views/budgets/_budget_categories.html.erb

@@ -34,9 +34,7 @@
           </div>
         </div>
 
-        <div class="px-4">
+        <%= render "shared/ruler" %>
-          <div class="h-px w-full bg-alpha-black-50"></div>
-        </div>
       <% 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 "shared/ruler" %>
-        <%= render "holdings/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/_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/new.html.erb

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

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