From a71b62575c1313edc57562e9791250dc88d76a37 Mon Sep 17 00:00:00 2001
From: Alex Hatzenbuhler <hatz@hey.com>
Date: Thu, 22 May 2025 10:35:55 -0500
Subject: [PATCH] UI Fixes (#2276)

* Use rounded-full on budget allocation bar

* Fix backgrounds when balance sheet groups are open

* Add rulers between accounts and classification groups in balance sheet and account groups views.
---
 app/views/accounts/index/_account_groups.erb  |  5 +++-
 app/views/budgets/_actuals_summary.html.erb   |  4 ++--
 .../pages/dashboard/_balance_sheet.html.erb   | 23 +++++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/views/accounts/index/_account_groups.erb b/app/views/accounts/index/_account_groups.erb
index 6c1ba1ed..841e60c2 100644
--- a/app/views/accounts/index/_account_groups.erb
+++ b/app/views/accounts/index/_account_groups.erb
@@ -12,8 +12,11 @@
       <% end %>
     </div>
     <div class="bg-container rounded-lg shadow-border-xs">
-      <% accounts.each do |account| %>
+      <% accounts.each_with_index do |account, index| %>
         <%= render account %>
+        <% unless index == accounts.count - 1 %>
+          <%= render "shared/ruler" %>
+        <% end %>
       <% end %>
     </div>
   </div>
diff --git a/app/views/budgets/_actuals_summary.html.erb b/app/views/budgets/_actuals_summary.html.erb
index 784f2020..5b4adf1d 100644
--- a/app/views/budgets/_actuals_summary.html.erb
+++ b/app/views/budgets/_actuals_summary.html.erb
@@ -12,7 +12,7 @@
       <div>
         <div class="flex h-1.5 mb-3 gap-1">
           <% budget.income_category_totals.each do |category_total| %>
-            <div class="h-full rounded-xs" style="background-color: <%= category_total.category.color %>; width: <%= category_total.weight %>%"></div>
+            <div class="h-full rounded-full" style="background-color: <%= category_total.category.color %>; width: <%= category_total.weight %>%"></div>
           <% end %>
         </div>
 
@@ -38,7 +38,7 @@
       <div>
         <div class="flex h-1.5 mb-3 gap-1">
           <% budget.expense_category_totals.each do |category_total| %>
-            <div class="h-full rounded-xs" style="background-color: <%= category_total.category.color %>; width: <%= category_total.weight %>%"></div>
+            <div class="h-full rounded-full" style="background-color: <%= category_total.category.color %>; width: <%= category_total.weight %>%"></div>
           <% end %>
         </div>
 
diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index a73e6a03..7a71afe7 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -58,10 +58,13 @@
             </div>
           </div>
 
-          <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">
-                <summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
+          <div class="shadow-border-xs rounded-lg bg-container font-medium text-sm min-w-fit">
+            <% classification_group.account_groups.each_with_index do |account_group, idx| %>
+              <details class="group open:bg-surface
+                <%= idx == 0 ? "rounded-t-lg" : "" %>
+                <%= idx == classification_group.account_groups.size - 1 ? "rounded-b-lg" : "" %>
+              ">
+                <summary class="cursor-pointer p-4 group-open:bg-surface 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 +96,7 @@
 
                 <div>
                   <% account_group.accounts.each_with_index do |account, idx| %>
-                    <div class="pl-12 pr-4 py-3 flex items-center bg-container justify-between text-sm font-medium">
+                    <div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
                       <div class="flex items-center gap-3">
                         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
 
@@ -129,6 +132,9 @@
                   <% end %>
                 </div>
               </details>
+              <% unless idx == classification_group.account_groups.size - 1 %>
+                <%= render "shared/ruler", classes: "mx-4 group-ruler" %>
+              <% end %>
             <% end %>
           </div>
         </div>
@@ -147,3 +153,10 @@
     </div>
   <% end %>
 </div>
+
+<%# Custom style for hiding ruler when details are open %>
+<style>
+  details[open] + .group-ruler {
+    display: none;
+  }
+</style>