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/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>