+
+
<%= format_money(@budget_category.actual_spending_money) %>
/
@@ -28,26 +28,26 @@
+ text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
Overview
<%= lucide_icon "chevron-down",
- class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+ class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-
-
+
-
<%= @budget_category.budget.start_date.strftime("%b %Y") %> spending
- -
+
-
<%= format_money @budget_category.actual_spending_money %>
<% if @budget_category.budget.initialized? %>
-
- Status
+ - Status
<% if @budget_category.available_to_spend.negative? %>
-
<%= lucide_icon "alert-circle", class: "shrink-0 w-4 h-4 text-red-500" %>
@@ -61,7 +61,7 @@
left
<% else %>
- -
+
-
<%= lucide_icon "check-circle-2", class: "shrink-0 w-4 h-4 text-green-500" %>
<%= format_money @budget_category.available_to_spend_money %>
left
@@ -70,23 +70,23 @@
-
- Budgeted
- -
+
- Budgeted
+ -
<%= format_money @budget_category.budgeted_spending_money %>
<% end %>
-
- Monthly average spending
- -
+
- Monthly average spending
+ -
<%= format_money @budget_category.category.avg_monthly_total_money, precision: 0 %>
-
- Monthly median spending
- -
+
- Monthly median spending
+ -
<%= format_money @budget_category.category.median_monthly_total_money, precision: 0 %>
@@ -96,10 +96,10 @@
+ text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
Recent Transactions
<%= lucide_icon "chevron-down",
- class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+ class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
@@ -117,12 +117,12 @@
-
+
<%= entry.date.strftime("%b %d") %>
-
<%= entry.name %>
+
<%= entry.name %>
-
+
<%= format_money entry.amount_money %>
@@ -139,7 +139,7 @@
data: { turbo_frame: :_top },
class: "block text-center btn btn--outline w-full" %>
<% else %>
-
+
No transactions found for this budget period.
<% end %>
diff --git a/app/views/budgets/_actuals_summary.html.erb b/app/views/budgets/_actuals_summary.html.erb
index 1ecebbae..67cac86b 100644
--- a/app/views/budgets/_actuals_summary.html.erb
+++ b/app/views/budgets/_actuals_summary.html.erb
@@ -2,11 +2,11 @@
-
Income
+
Income
<% income_totals = budget.income_categories_with_totals %>
<% income_categories = income_totals.category_totals.reject { |ct| ct.amount_money.zero? }.sort_by { |ct| ct.percentage }.reverse %>
-
+
<%= format_money(income_totals.total_money) %>
@@ -22,8 +22,8 @@
<% income_categories.each do |item| %>
-
<%= item.category.name %>
-
<%= number_to_percentage(item.percentage, precision: 0) %>
+
<%= item.category.name %>
+
<%= number_to_percentage(item.percentage, precision: 0) %>
<% end %>
@@ -32,12 +32,12 @@
-
Expenses
+
Expenses
<% expense_totals = budget.expense_categories_with_totals %>
<% expense_categories = expense_totals.category_totals.reject { |ct| ct.amount_money.zero? || ct.category.subcategory? }.sort_by { |ct| ct.percentage }.reverse %>
-
<%= format_money(expense_totals.total_money) %>
+
<%= format_money(expense_totals.total_money) %>
<% if expense_categories.any? %>
@@ -51,8 +51,8 @@
<% expense_categories.each do |item| %>
-
<%= item.category.name %>
-
<%= number_to_percentage(item.percentage, precision: 0) %>
+
<%= item.category.name %>
+
<%= number_to_percentage(item.percentage, precision: 0) %>
<% end %>
diff --git a/app/views/budgets/_budget_categories.html.erb b/app/views/budgets/_budget_categories.html.erb
index 86cc3012..122c8348 100644
--- a/app/views/budgets/_budget_categories.html.erb
+++ b/app/views/budgets/_budget_categories.html.erb
@@ -1,9 +1,9 @@
<%# locals: (budget:) %>
-
+
Categories
-
·
+
·
<%= budget.budget_categories.count %>
Amount
@@ -24,7 +24,7 @@
<% group.budget_subcategories.each do |budget_subcategory| %>
-
+
<%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
diff --git a/app/views/budgets/_budget_donut.html.erb b/app/views/budgets/_budget_donut.html.erb
index 035389f7..8ec57be3 100644
--- a/app/views/budgets/_budget_donut.html.erb
+++ b/app/views/budgets/_budget_donut.html.erb
@@ -8,18 +8,18 @@
Spent
-
">
+
">
<%= format_money(budget.actual_spending_money) %>
<%= link_to edit_budget_path(budget), class: "btn btn--secondary flex items-center gap-1 mt-2" do %>
-
+
of <%= format_money(budget.budgeted_spending_money) %>
- <%= lucide_icon "pencil", class: "w-4 h-4 text-gray-500 hover:text-gray-600" %>
+ <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
<% end %>
<% else %>
-
+
<%= format_money Money.new(0, budget.currency || budget.family.currency) %>
<%= link_to edit_budget_path(budget), class: "flex items-center gap-2 btn btn--primary" do %>
@@ -34,26 +34,26 @@
-
<%= bc.category.name %>
+
<%= bc.category.name %>
-
">
+
">
<%= format_money(bc.actual_spending_money) %>
<%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
of <%= format_money(bc.budgeted_spending_money, precision: 0) %>
- <%= lucide_icon "pencil", class: "w-4 h-4 text-gray-500 shrink-0" %>
+ <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary shrink-0" %>
<% end %>
-
Unused
+
Unused
-
+
<%= format_money(budget.available_to_spend_money) %>
<%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-gray-50 rounded-md p-2" do %>
-
<%= @budget.name %>
- <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-gray-500" %>
+
<%= @budget.name %>
+ <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-secondary" %>
<% end %>
@@ -32,7 +32,7 @@
<% if @budget.current? %>
-
Today
+
Today
<% else %>
<%= link_to "Today", budget_path(@latest_budget), class: "btn btn--outline" %>
<% end %>
diff --git a/app/views/budgets/_budget_nav.html.erb b/app/views/budgets/_budget_nav.html.erb
index 2d336f4a..ec85965e 100644
--- a/app/views/budgets/_budget_nav.html.erb
+++ b/app/views/budgets/_budget_nav.html.erb
@@ -11,9 +11,9 @@
<% is_current = request.path == step[:path] %>
<% text_class = if is_current
- "text-gray-900"
+ "text-primary"
else
- step[:is_complete] ? "text-green-600" : "text-gray-500"
+ step[:is_complete] ? "text-green-600" : "text-secondary"
end %>
<% step_class = if is_current
"bg-gray-900 text-white"
diff --git a/app/views/budgets/_budgeted_summary.html.erb b/app/views/budgets/_budgeted_summary.html.erb
index 742d950c..ce55db5d 100644
--- a/app/views/budgets/_budgeted_summary.html.erb
+++ b/app/views/budgets/_budgeted_summary.html.erb
@@ -2,9 +2,9 @@
-
Expected income
+ Expected income
-
+
<%= format_money(budget.expected_income_money) %>
@@ -19,12 +19,12 @@
<% end %>
-
<%= format_money(budget.actual_income_money) %> earned
+
<%= format_money(budget.actual_income_money) %> earned
<% if budget.remaining_expected_income.negative? %>
<%= format_money(budget.remaining_expected_income_money.abs) %> over
<% else %>
- <%= format_money(budget.remaining_expected_income_money) %> left
+ <%= format_money(budget.remaining_expected_income_money) %> left
<% end %>
@@ -32,9 +32,9 @@
-
Budgeted
+ Budgeted
-
+
<%= format_money(budget.budgeted_spending_money) %>
@@ -49,12 +49,12 @@
<% end %>
-
<%= format_money(budget.actual_spending_money) %> spent
+
<%= format_money(budget.actual_spending_money) %> spent
<% if budget.available_to_spend.negative? %>
<%= format_money(budget.available_to_spend_money.abs) %> over
<% else %>
- <%= format_money(budget.available_to_spend_money) %> left
+ <%= format_money(budget.available_to_spend_money) %> left
<% end %>
diff --git a/app/views/budgets/_over_allocation_warning.html.erb b/app/views/budgets/_over_allocation_warning.html.erb
index 9999038c..95381811 100644
--- a/app/views/budgets/_over_allocation_warning.html.erb
+++ b/app/views/budgets/_over_allocation_warning.html.erb
@@ -2,12 +2,12 @@
<%= lucide_icon "alert-triangle", class: "w-6 h-6 text-red-500" %>
-
You have over-allocated your budget. Please fix your allocations.
+
You have over-allocated your budget. Please fix your allocations.
<%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
-
+
Fix allocations
- <%= lucide_icon "pencil", class: "w-4 h-4 text-gray-500 hover:text-gray-600" %>
+ <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
<% end %>
diff --git a/app/views/budgets/_picker.html.erb b/app/views/budgets/_picker.html.erb
index 53ad6c76..16bc50e5 100644
--- a/app/views/budgets/_picker.html.erb
+++ b/app/views/budgets/_picker.html.erb
@@ -5,25 +5,25 @@
<% if year > family.oldest_entry_date.year %>
<%= link_to picker_budgets_path(year: year - 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
- <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-gray-500" %>
+ <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-secondary" %>
<% end %>
<% else %>
- <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-gray-400" %>
+ <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-subdued" %>
<% end %>
-
+
<%= year %>
<% if year < Date.current.year %>
<%= link_to picker_budgets_path(year: year + 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
- <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-gray-500" %>
+ <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-secondary" %>
<% end %>
<% else %>
- <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-gray-400" %>
+ <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-subdued" %>
<% end %>
@@ -35,13 +35,13 @@
<% budget = family.budgets.for_date(start_date) %>
<% if budget %>
- <%= link_to month_name, budget_path(budget), data: { turbo_frame: "_top" }, class: "block px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 rounded-md" %>
+ <%= link_to month_name, budget_path(budget), data: { turbo_frame: "_top" }, class: "block px-3 py-2 text-sm text-primary hover:bg-gray-100 rounded-md" %>
<% elsif start_date >= family.oldest_entry_date.beginning_of_month && start_date <= Date.current %>
- <%= button_to budgets_path(budget: { start_date: start_date }), data: { turbo_frame: "_top" }, class: "block w-full px-3 py-2 text-gray-900 hover:bg-gray-100 rounded-md" do %>
+ <%= button_to budgets_path(budget: { start_date: start_date }), data: { turbo_frame: "_top" }, class: "block w-full px-3 py-2 text-primary hover:bg-gray-100 rounded-md" do %>
<%= month_name %>
<% end %>
<% else %>
-
<%= month_name %>
+
<%= month_name %>
<% end %>
<% end %>
diff --git a/app/views/budgets/edit.html.erb b/app/views/budgets/edit.html.erb
index f3a9854e..3728dc8c 100644
--- a/app/views/budgets/edit.html.erb
+++ b/app/views/budgets/edit.html.erb
@@ -8,8 +8,8 @@
-
Setup your budget
-
+
Setup your budget
+
Enter your monthly earnings and planned spending below to setup your budget.
@@ -20,11 +20,11 @@
<%= f.money_field :expected_income, label: "Expected income", required: true, disable_currency: true %>
<% if @budget.estimated_income && @budget.estimated_spending %>
-
- <%= lucide_icon "sparkles", class: "w-5 h-5 text-gray-500 shrink-0" %>
+
+ <%= lucide_icon "sparkles", class: "w-5 h-5 text-secondary shrink-0" %>
-
Autosuggest income & spending budget
-
+
Autosuggest income & spending budget
+
This will be based on transaction history. AI can make mistakes, verify before continuing.
@@ -35,7 +35,7 @@
budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
} %>
-
+
<% end %>
diff --git a/app/views/budgets/show.html.erb b/app/views/budgets/show.html.erb
index 0f63602b..2c98f805 100644
--- a/app/views/budgets/show.html.erb
+++ b/app/views/budgets/show.html.erb
@@ -25,16 +25,16 @@
budget_path(@budget, tab: "budgeted"),
class: class_names(
base_classes,
- "bg-white shadow-xs text-gray-900": selected_tab == "budgeted",
- "text-gray-500": selected_tab != "budgeted"
+ "bg-white shadow-xs text-primary": selected_tab == "budgeted",
+ "text-secondary": selected_tab != "budgeted"
) %>
<%= link_to "Actual",
budget_path(@budget, tab: "actuals"),
class: class_names(
base_classes,
- "bg-white shadow-xs text-gray-900": selected_tab == "actuals",
- "text-gray-500": selected_tab != "actuals"
+ "bg-white shadow-xs text-primary": selected_tab == "actuals",
+ "text-secondary": selected_tab != "actuals"
) %>
diff --git a/app/views/categories/_category.html.erb b/app/views/categories/_category.html.erb
index f74113a9..187979a0 100644
--- a/app/views/categories/_category.html.erb
+++ b/app/views/categories/_category.html.erb
@@ -3,14 +3,14 @@
<%= "pb-4" unless category.subcategories.any? %> bg-white">
<% if category.subcategory? %>
- <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-gray-400 ml-2" %>
+ <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-subdued ml-2" %>
<% end %>
<%= render partial: "categories/badge", locals: { category: category } %>
<%= contextual_menu do %>
-
+
<%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>
<% if category.transactions.any? %>
diff --git a/app/views/categories/_category_list_group.html.erb b/app/views/categories/_category_list_group.html.erb
index 671e10dd..882f0710 100644
--- a/app/views/categories/_category_list_group.html.erb
+++ b/app/views/categories/_category_list_group.html.erb
@@ -1,9 +1,9 @@
<%# locals: (title:, categories:) %>
-
+
<%= title %>
-
·
+
·
<%= categories.count %>
diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb
index 5a4627b3..ff098cb0 100644
--- a/app/views/categories/_menu.html.erb
+++ b/app/views/categories/_menu.html.erb
@@ -5,10 +5,10 @@
<%= render partial: "categories/badge", locals: { category: transaction.category } %>
-
+
<%= turbo_frame_tag "category_dropdown", src: category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
-
<%= t(".loading") %>
+
<%= t(".loading") %>
<% end %>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
index 64e6acb9..d440e633 100644
--- a/app/views/categories/index.html.erb
+++ b/app/views/categories/index.html.erb
@@ -4,7 +4,7 @@
- <%= t(".categories") %>
+ <%= t(".categories") %>
<%= link_to new_category_path, class: "btn btn--primary flex items-center gap-1 justify-center", data: { turbo_frame: :modal } do %>
<%= lucide_icon "plus", class: "w-5 h-5" %>
@@ -26,7 +26,7 @@
<% else %>
-
<%= t(".empty") %>
+
<%= t(".empty") %>
<%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--primary" %>
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index 45879b7c..d6b552f5 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -13,20 +13,20 @@
class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
- <%= lucide_icon("check", class: "w-5 h-5 text-gray-500") if is_selected %>
+ <%= lucide_icon("check", class: "w-5 h-5 text-secondary") if is_selected %>
<% if category.subcategory? %>
- <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-gray-400" %>
+ <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-subdued" %>
<% end %>
<%= render partial: "categories/badge", locals: { category: category } %>
<% end %>
<%= contextual_menu do %>
-
+
<%= link_to edit_category_path(category),
- class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg",
+ class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg",
data: { turbo_frame: :modal } do %>
- <%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
+ <%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
<%= t(".edit") %>
<% end %>
diff --git a/app/views/category/dropdowns/show.html.erb b/app/views/category/dropdowns/show.html.erb
index 4a0047cb..722fab82 100644
--- a/app/views/category/dropdowns/show.html.erb
+++ b/app/views/category/dropdowns/show.html.erb
@@ -2,12 +2,12 @@