fix: adjust style in new budget tab and sections (#1464)

This commit is contained in:
Alessio Cappa
2026-04-13 23:32:27 +02:00
committed by GitHub
parent 943a4d007d
commit 0c58da1a3e
3 changed files with 7 additions and 8 deletions

View File

@@ -32,7 +32,8 @@ export default class extends Controller {
this.tabTargets.forEach((tab) => {
const isActive = tab.dataset.budgetFilterFilterParam === filter;
tab.classList.toggle("bg-container", isActive);
tab.classList.toggle("bg-white", isActive);
tab.classList.toggle("theme-dark:bg-gray-700", isActive);
tab.classList.toggle("text-primary", isActive);
tab.classList.toggle("shadow-sm", isActive);
tab.classList.toggle("text-secondary", !isActive);

View File

@@ -11,7 +11,7 @@
end
%>
<div data-budget-filter-target="<%= target %>">
<div class="bg-container-inset rounded-xl p-1" data-budget-filter-target="<%= target %>">
<!-- Section Header -->
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">

View File

@@ -66,7 +66,7 @@
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="all"
data-budget-filter-target="tab"
class="px-3 py-1.5 rounded-md transition-colors bg-container text-primary shadow-sm">
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 bg-white theme-dark:bg-gray-700 text-primary shadow-sm">
<%= t("budgets.show.filter.all") %>
</button>
@@ -74,7 +74,7 @@
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="over_budget"
data-budget-filter-target="tab"
class="px-3 py-1.5 rounded-md transition-colors text-secondary">
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
<%= t("budgets.show.filter.over_budget") %>
</button>
@@ -82,7 +82,7 @@
data-action="click->budget-filter#setFilter"
data-budget-filter-filter-param="on_track"
data-budget-filter-target="tab"
class="px-3 py-1.5 rounded-md transition-colors text-secondary">
class="w-full inline-flex justify-center items-center text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 shadow-sm">
<%= t("budgets.show.filter.on_track") %>
</button>
@@ -104,9 +104,7 @@
</div>
</div>
<div class="bg-container-inset rounded-xl p-1">
<%= render "budgets/budget_categories", budget: @budget %>
</div>
<%= render "budgets/budget_categories", budget: @budget %>
<% end %>
</div>
</div>