Standardize corners, backgrounds, and borders (#2271)

* 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

* Standardize & improve a bunch of corners, fix some backgrounds, fix merchants for dark mode

* Update balance sheet

* misc cleanup

* Fix import table

* Remove middot

app/views/accounts/index/_account_groups.erb

@@ -11,7 +11,7 @@
         <p class="ml-auto"><%= totals_by_currency(collection: accounts, money_method: :balance_money) %></p>
       <% end %>
     </div>
-    <div class="bg-container rounded-md">
+    <div class="bg-container rounded-lg shadow-border-xs">
       <% accounts.each do |account| %>
         <%= render account %>
       <% end %>

app/views/accounts/show/_activity.html.erb

@@ -75,16 +75,14 @@
         </div>
 
         <div>
-          <div class="rounded-tl-lg rounded-tr-lg bg-container border-alpha-black-25 shadow-xs">
-            <div class="space-y-4">
-              <% calculator = Balance::TrendCalculator.new(@account.balances) %>
+          <div class="space-y-4">
+            <% calculator = Balance::TrendCalculator.new(@account.balances) %>
 
-              <%= entries_by_date(@entries) do |entries| %>
-                <% entries.each_with_index do |entry, index| %>
-                  <%= render entry, balance_trend: index == 0 ? calculator.trend_for(entry.date) : nil, view_ctx: "account" %>
-                <% end %>
+            <%= entries_by_date(@entries) do |entries| %>
+              <% entries.each_with_index do |entry, index| %>
+                <%= render entry, balance_trend: index == 0 ? calculator.trend_for(entry.date) : nil, view_ctx: "account" %>
               <% end %>
-            </div>
+            <% end %>
           </div>
 
           <div class="p-4 bg-container rounded-bl-lg rounded-br-lg">

app/views/categories/_category_list_group.html.erb

@@ -7,8 +7,8 @@
     <p><%= categories.count %></p>
   </div>
 
-  <div class="shadow-border-xs rounded-md bg-container">
-    <div class="overflow-hidden rounded-md">
+  <div class="shadow-border-xs rounded-lg bg-container">
+    <div class="overflow-hidden rounded-lg">
       <% Category::Group.for(categories).each_with_index do |group, idx| %>
         <%= render group.category %>
 

app/views/categories/index.html.erb

@@ -22,7 +22,7 @@
   </div>
 </header>
 
-<div class="bg-container shadow-border-xs rounded-xl p-4">
+<div class="bg-container rounded-xl shadow-border-xs p-4">
   <% if @categories.any? %>
     <div class="space-y-4">
       <% if @categories.incomes.any? %>

app/views/entries/_entry_group.html.erb

@@ -21,7 +21,7 @@
       </div>
     <% end %>
   </div>
-  <div class="bg-container shadow-border-xs rounded-md divide-y divide-alpha-black-50">
+  <div class="bg-container shadow-border-xs rounded-lg">
     <%= content %>
   </div>
 </div>

app/views/family_merchants/_family_merchant.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (family_merchant:) %>
 
-<div class="flex justify-between items-center p-4 bg-white">
+<div class="flex justify-between items-center p-4 bg-container">
   <div class="flex w-full items-center gap-2.5">
     <% if family_merchant.logo_url %>
       <div class="w-8 h-8 rounded-full flex justify-center items-center">

app/views/family_merchants/index.html.erb

@@ -9,7 +9,7 @@
   ) %>
 </header>
 
-<div class="bg-container shadow-border-xs rounded-xl p-4">
+<div class="bg-container rounded-xl shadow-border-xs p-4">
   <% if @merchants.any? %>
     <div class="rounded-xl bg-container-inset space-y-1 p-1">
       <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
@@ -18,8 +18,8 @@
         <p><%= @merchants.count %></p>
       </div>
 
-      <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
-        <div class="overflow-hidden rounded-md">
+      <div class="bg-container rounded-lg shadow-border-xs">
+        <div class="overflow-hidden rounded-lg">
           <%= render partial: "family_merchants/family_merchant", collection: @merchants, spacer_template: "shared/ruler" %>
         </div>
       </div>

app/views/holdings/index.html.erb

@@ -13,7 +13,7 @@
       <% end %>
     </div>
 
-    <div class="rounded-xl bg-container-inset p-1">
+    <div class="bg-container-inset rounded-xl p-1">
       <div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
         <%= tag.p t(".name"), class: "col-span-4" %>
         <%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
@@ -22,7 +22,7 @@
         <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
       </div>
 
-      <div class="rounded-lg bg-container shadow-border-xs">
+      <div class="bg-container rounded-lg shadow-border-xs">
         <%= render "holdings/cash", account: @account %>
         <%= render "shared/ruler" %>
 

app/views/imports/_table.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (headers: [], rows: [], caption: nil) %>
-<div class="bg-container-inset rounded-xl overflow-hidden mx-1 md:mx-auto p-3 pl-2 pr-2">
+<div class="bg-container-inset rounded-xl overflow-hidden md:mx-auto p-4">
   <% if caption %>
     <div class="flex items-center mb-4">
       <div class="text-gray-500 mr-2">
@@ -8,40 +8,38 @@
       <h2 class="text-sm text-gray-500 font-medium"><%= caption %></h2>
     </div>
   <% end %>
-  <div class="overflow-x-auto -webkit-overflow-scrolling-touch">
-    <div class="inline-block min-w-fit sm:w-full border border-secondary rounded-md shadow-border-xs text-sm bg-container">
-      <table class="min-w-full divide-y divide-alpha-black-200">
-        <thead>
+  <div class="inline-block min-w-fit sm:w-full rounded-lg shadow-border-xs text-sm bg-container">
+    <table class="min-w-full">
+      <thead>
+        <tr>
+          <% headers.each_with_index do |header, index| %>
+            <th class="
+              bg-container-inset px-3 py-2 font-medium border-b border-b-alpha-black-200 text-left whitespace-nowrap 
+              <%= index == 0 ? "rounded-tl-lg" : "" %>
+              <%= index == headers.length - 1 ? "rounded-tr-lg" : "" %>
+              <%= index < headers.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
+            ">
+              <%= header %>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody class="">
+        <% rows.each_with_index do |row, row_index| %>
           <tr>
-            <% headers.each_with_index do |header, index| %>
-              <th class="
-                bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
-                <%= index == 0 ? "rounded-tl-md" : "" %>
-                <%= index == headers.length - 1 ? "rounded-tr-md" : "" %>
-                <%= index < headers.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
+            <% row.each_with_index do |(header, value), col_index| %>
+              <td class="
+                px-3 py-2 whitespace-nowrap text-left
+                <%= col_index < row.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
+                <%= !caption && row_index == rows.length - 1 && col_index == 0 ? "rounded-bl-md" : "" %>
+                <%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? "rounded-br-md" : "" %>
               ">
-                <%= header %>
-              </th>
+                <%= value %>
+              </td>
             <% end %>
           </tr>
-        </thead>
-        <tbody class="divide-y divide-alpha-black-200">
-          <% rows.each_with_index do |row, row_index| %>
-            <tr>
-              <% row.each_with_index do |(header, value), col_index| %>
-                <td class="
-                  px-3 py-2.5 whitespace-nowrap text-left
-                  <%= col_index < row.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
-                  <%= !caption && row_index == rows.length - 1 && col_index == 0 ? "rounded-bl-md" : "" %>
-                  <%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? "rounded-br-md" : "" %>
-                ">
-                  <%= value %>
-                </td>
-              <% end %>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+        <% end %>
+      </tbody>
+    </table>
   </div>
 </div>

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

@@ -58,10 +58,10 @@
             </div>
           </div>
 
-          <div class="shadow-border-xs rounded-lg bg-container min-w-fit">
+          <div class="shadow-border-xs rounded-lg font-medium text-sm bg-container min-w-fit">
             <% classification_group.account_groups.each do |account_group| %>
-              <details class="group rounded-lg open:bg-surface font-medium text-sm">
-                <summary class="focus-visible:outline-none focus-visible:ring-0 cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
+              <details class="group">
+                <summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
                   <div class="w-40 shrink-0 flex items-center gap-4">
                     <%= icon("chevron-right", class: "group-open:rotate-90") %>
 
@@ -93,7 +93,7 @@
 
                 <div>
                   <% account_group.accounts.each_with_index do |account, idx| %>
-                    <div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
+                    <div class="pl-12 pr-4 py-3 flex items-center bg-container justify-between text-sm font-medium">
                       <div class="flex items-center gap-3">
                         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
 

app/views/rules/index.html.erb

@@ -29,7 +29,7 @@
     </p>
   </div>
 <% end %>
-<div class="bg-container shadow-border-xs rounded-xl p-4">
+<div class="bg-container rounded-xl shadow-border-xs p-4">
   <% if @rules.any? %>
     <div class="bg-container-inset rounded-xl">
       <div class="flex justify-between px-4 py-2 text-xs uppercase">
@@ -58,7 +58,7 @@
         </div>
       </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">
+        <div class="flex flex-col bg-container rounded-lg shadow-border-xs">
           <%= render partial: "rule", collection: @rules, spacer_template: "shared/ruler" %>
         </div>
       </div>

app/views/settings/profiles/show.html.erb

@@ -41,7 +41,7 @@
         <p class="uppercase text-xs text-secondary font-medium"><%= Current.family.name %> &middot; <%= Current.family.users.size %></p>
       </div>
       <% @users.each do |user| %>
-        <div class="flex gap-2 mt-2 items-center bg-container p-4 border border-alpha-black-25 rounded-lg">
+        <div class="flex gap-2 mt-2 items-center bg-container p-4 shadow-border-xs rounded-lg">
           <div class="w-9 h-9 shrink-0">
             <%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials %>
           </div>

app/views/tags/index.html.erb

@@ -24,7 +24,7 @@
 
 </header>
 
-<div class="bg-container shadow-border-xs rounded-xl p-4">
+<div class="bg-container rounded-xl shadow-border-xs p-4">
   <% if @tags.any? %>
     <div class="rounded-xl bg-container-inset space-y-1 p-1">
       <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
@@ -33,8 +33,8 @@
         <p><%= @tags.count %></p>
       </div>
 
-      <div class="border border-alpha-black-25 rounded-md bg-container shadow-border-xs">
-        <div class="overflow-hidden rounded-md">
+      <div class="bg-container rounded-lg shadow-border-xs">
+        <div class="overflow-hidden rounded-lg">
           <%= render partial: @tags, spacer_template: "shared/ruler" %>
         </div>
       </div>