feat: Add table-divider class and use it in investments summary section (#1463)

* feat: Add table-divider class and use it in investments summary section

* fix: manage dark-theme variant

* feat: apply table-divider to other tables

* refactor: use rem instead of px for table-divider class

app/assets/tailwind/application.css

@@ -203,3 +203,25 @@
 .turbo-progress-bar {
   margin-top: env(safe-area-inset-top);
 }
+
+.table-divider {
+  position: relative;
+}
+
+.table-divider::after {
+  content: "";
+  position: absolute;
+  left: 1rem;
+  right: 1rem;
+  bottom: 0;
+  height: 1px;
+  background-color: var(--color-alpha-black-100);
+}
+
+[data-theme="dark"] .table-divider::after  {
+  background-color: var(--color-alpha-white-200);
+}
+
+.table-divider:last-child::after {
+  display: none;
+}

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

@@ -40,7 +40,7 @@
           </thead>
           <tbody class="font-medium text-sm">
             <% holdings.each_with_index do |holding, idx| %>
-              <tr class="<%= idx < holdings.size - 1 ? "border-b border-divider" : "" %>">
+              <tr class="<%= idx < holdings.size - 1 ? "table-divider" : "" %>">
                 <td class="p-4">
                   <div class="flex items-center gap-3">
                     <% if holding.security.logo_url.present? %>

app/views/reports/_category_row.html.erb

@@ -4,7 +4,7 @@
   show_border = local_assigns.fetch(:show_border, false)
 %>
 
-<tr data-category="category-<%= item[:category_id] %>" class="text-secondary text-sm <%= show_border ? "border-b border-divider" : "" %>">
+<tr data-category="category-<%= item[:category_id] %>" class="text-secondary text-sm <%= show_border ? "table-divider" : "" %>">
   <td colspan="2" class="py-3 px-4 lg:px-6 <%= is_sub ? "pl-7 lg:pl-9" : "" %>">
     <div class="flex items-center gap-2">
       <% if is_sub %>

app/views/reports/_investment_performance.html.erb

@@ -72,7 +72,7 @@
             </thead>
             <tbody class="text-secondary text-sm">
               <% investment_metrics[:top_holdings].each_with_index do |holding, idx| %>
-                <tr class="<%= idx < investment_metrics[:top_holdings].size - 1 ? "border-b border-divider" : "" %>">
+                <tr class="<%= idx < investment_metrics[:top_holdings].size - 1 ? "table-divider" : "" %>">
                   <td class="py-3 px-4 lg:px-6">
                     <div class="flex items-center gap-3">
                       <% if (logo = holding.security.display_logo_url).present? %>

app/views/reports/_net_worth.html.erb

@@ -50,7 +50,7 @@
         </thead>
         <tbody>
           <% net_worth_metrics[:asset_groups].each_with_index do |group, idx| %>
-            <tr class="<%= idx < net_worth_metrics[:asset_groups].size - 1 ? "border-b border-divider" : "" %>">
+            <tr class="<%= idx < net_worth_metrics[:asset_groups].size - 1 ? "table-divider" : "" %>">
               <td class="py-3 px-4 lg:px-6 text-sm font-medium text-secondary"><%= group[:name] %></td>
               <td class="py-3 px-4 lg:px-6 text-sm font-medium text-right text-success privacy-sensitive"><%= group[:total].format %></td>
             </tr>
@@ -77,7 +77,7 @@
         </thead>
         <tbody>
           <% net_worth_metrics[:liability_groups].each_with_index do |group, idx| %>
-            <tr class="<%= idx < net_worth_metrics[:liability_groups].size - 1 ? "border-b border-divider" : "" %>">
+            <tr class="<%= idx < net_worth_metrics[:liability_groups].size - 1 ? "table-divider" : "" %>">
               <td class="py-3 px-4 lg:px-6 text-sm font-medium text-secondary"><%= group[:name] %></td>
               <td class="py-3 px-4 lg:px-6 text-sm font-medium text-right text-destructive privacy-sensitive"><%= group[:total].format %></td>
             </tr>

app/views/reports/_trends_insights.html.erb

@@ -21,7 +21,7 @@
             </thead>
             <tbody class="text-secondary text-sm">
               <% trends_data.each_with_index do |trend, idx| %>
-                <tr class="<%= idx < trends_data.size - 1 ? "border-b border-divider" : "" %>">
+                <tr class="<%= idx < trends_data.size - 1 ? "table-divider" : "" %>">
                   <td class="py-3 px-4 lg:px-6">
                     <span class="flex items-center gap-2 <%= trend[:is_current_month] ? "font-medium" : "" %>">
                       <%= trend[:month] %>