Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-06 05:55:21 +02:00
Code Issues Releases Activity Actions

Maybe Design System Updates (#1856)

Browse source 
* Add geist font

* Design system css file

* Add cursor ui/ux rules

* Add shadows and shadow borders

* Replace primitives with tokens for common text and backgrounds

* Organize css

* Update switch and checkbox class names

* Add back global color variables
This commit is contained in:
Zach Gollwitzer 2025-02-13 11:31:07 -05:00 • committed by GitHub
parent c0e290a07e
commit 849c58dd3e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
193 changed files with 1356 additions and 1073 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/views/account/entries/_empty.html.erb
View file

@ -1,4 +1,4 @@
<div class="flex flex-col items-center justify-center py-40">
<p class="text-gray-500 mb-2"><%= t(".title") %></p>
<p class="text-gray-400 max-w-xs text-center"><%= t(".description") %></p>
<p class="text-secondary mb-2"><%= t(".title") %></p>
<p class="text-subdued max-w-xs text-center"><%= t(".description") %></p>
</div>

4
app/views/account/entries/_entry_group.html.erb
View file

@ -1,10 +1,10 @@
<%# locals: (date:, entries:, content:, selectable:, totals: false) %>
<div id="entry-group-<%= date %>" class="bg-gray-25 rounded-xl p-1 w-full" data-bulk-select-target="group">
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-gray-500">
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-secondary">
<div class="flex pl-0.5 items-center gap-4">
<% if selectable %>
<%= check_box_tag "#{date}_entries_selection",
class: ["maybe-checkbox maybe-checkbox--light", "hidden": entries.size == 0],
class: ["checkbox checkbox--light", "hidden": entries.size == 0],
id: "selection_entry_#{date}",
data: { action: "bulk-select#toggleGroupSelection" } %>
<% end %>

2
app/views/account/entries/_loading.html.erb
View file

@ -1,5 +1,5 @@
<div class="bg-white space-y-4 p-5 border border-alpha-black-25 rounded-xl shadow-xs">
<div class="p-5 flex justify-center items-center">
<%= tag.p t(".loading"), class: "text-gray-500 animate-pulse text-sm" %>
<%= tag.p t(".loading"), class: "text-secondary animate-pulse text-sm" %>
</div>
</div>

4
app/views/account/entries/_selection_bar.html.erb
View file

@ -1,11 +1,11 @@
<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
<div class="flex items-center gap-2">
<%= check_box_tag "entry_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<p data-bulk-select-target="selectionBarText"></p>
</div>
<div class="flex items-center gap-1 text-gray-500">
<div class="flex items-center gap-1 text-secondary">
<%= form_with url: bulk_delete_account_transactions_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
<button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
<%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>

10
app/views/account/holdings/_cash.html.erb
View file

@ -2,13 +2,13 @@
<% currency = Money::Currency.new(account.currency) %>
<div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4">
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4">
<div class="col-span-4 flex items-center gap-4">
<%= render "shared/circle_logo", name: currency.iso_code %>
<div class="space-y-0.5">
<%= tag.p t(".brokerage_cash"), class: "text-gray-900" %>
<%= tag.p account.currency, class: "text-gray-500 text-xs uppercase" %>
<%= tag.p t(".brokerage_cash"), class: "text-primary" %>
<%= tag.p account.currency, class: "text-secondary text-xs uppercase" %>
</div>
</div>
@ -19,7 +19,7 @@
</div>
<div class="col-span-2 text-right">
<%= tag.p "--", class: "text-gray-500" %>
<%= tag.p "--", class: "text-secondary" %>
</div>
<div class="col-span-2 text-right">
@ -27,6 +27,6 @@
</div>
<div class="col-span-2 text-right">
<%= tag.p "--", class: "text-gray-500" %>
<%= tag.p "--", class: "text-secondary" %>
</div>
</div>

14
app/views/account/holdings/_holding.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (holding:) %>
<%= turbo_frame_tag dom_id(holding) do %>
<div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4">
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4">
<div class="col-span-4 flex items-center gap-4">
<%= image_tag "https://logo.synthfinance.com/ticker/#{holding.ticker}", class: "w-9 h-9 rounded-full", loading: "lazy" %>
@ -9,7 +9,7 @@
<%= link_to holding.name, account_holding_path(holding), data: { turbo_frame: :drawer }, class: "hover:underline" %>
<% if holding.amount %>
<%= tag.p holding.ticker, class: "text-gray-500 text-xs uppercase" %>
<%= tag.p holding.ticker, class: "text-secondary text-xs uppercase" %>
<% else %>
<%= render "missing_price_tooltip" %>
<% end %>
@ -21,22 +21,22 @@
<%= render "shared/progress_circle", progress: holding.weight, text_class: "text-blue-500" %>
<%= tag.p number_to_percentage(holding.weight, precision: 1) %>
<% else %>
<%= tag.p "--", class: "text-gray-500 mb-5" %>
<%= tag.p "--", class: "text-secondary mb-5" %>
<% end %>
</div>
<div class="col-span-2 text-right">
<%= tag.p format_money holding.avg_cost %>
<%= tag.p t(".per_share"), class: "font-normal text-gray-500" %>
<%= tag.p t(".per_share"), class: "font-normal text-secondary" %>
</div>
<div class="col-span-2 text-right">
<% if holding.amount_money %>
<%= tag.p format_money holding.amount_money %>
<% else %>
<%= tag.p "--", class: "text-gray-500" %>
<%= tag.p "--", class: "text-secondary" %>
<% end %>
<%= tag.p t(".shares", qty: number_with_precision(holding.qty, precision: 1)), class: "font-normal text-gray-500" %>
<%= tag.p t(".shares", qty: number_with_precision(holding.qty, precision: 1)), class: "font-normal text-secondary" %>
</div>
<div class="col-span-2 text-right">
@ -44,7 +44,7 @@
<%= tag.p format_money(holding.trend.value), style: "color: #{holding.trend.color};" %>
<%= tag.p "(#{number_to_percentage(holding.trend.percent, precision: 1)})", style: "color: #{holding.trend.color};" %>
<% else %>
<%= tag.p "--", class: "text-gray-500 mb-4" %>
<%= tag.p "--", class: "text-secondary mb-4" %>
<% end %>
</div>
</div>

8
app/views/account/holdings/index.html.erb
View file

@ -5,14 +5,14 @@
<%= link_to new_account_trade_path(account_id: @account.id),
id: dom_id(@account, "new_trade"),
data: { turbo_frame: :modal },
class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg" do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
<%= tag.span t(".new_holding"), class: "text-sm" %>
<% end %>
</div>
<div class="rounded-xl bg-gray-25 p-1">
<div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-4 py-2">
<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" %>
<%= tag.p t(".cost"), class: "col-span-2 justify-self-end" %>
@ -26,7 +26,7 @@
<%= render "account/holdings/ruler" %>
<%= render partial: "account/holdings/holding", collection: @account.current_holdings, spacer_template: "ruler" %>
<% else %>
<p class="text-gray-500 text-sm p-4"><%= t(".no_holdings") %></p>
<p class="text-secondary text-sm p-4"><%= t(".no_holdings") %></p>
<% end %>
</div>
</div>

44
app/views/account/holdings/show.html.erb
View file

@ -2,43 +2,43 @@
<div class="space-y-4">
<header class="flex justify-between">
<div>
<%= tag.h3 @holding.name, class: "text-2xl font-medium text-gray-900" %>
<%= tag.p @holding.ticker, class: "text-sm text-gray-500" %>
<%= tag.h3 @holding.name, class: "text-2xl font-medium text-primary" %>
<%= tag.p @holding.ticker, class: "text-sm text-secondary" %>
</div>
<%= image_tag "https://logo.synthfinance.com/ticker/#{@holding.ticker}", loading: "lazy", class: "w-9 h-9 rounded-full" %>
</header>
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4><%= t(".overview") %></h4>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
</summary>
<div class="pb-4">
<dl class="space-y-3 px-3 py-2">
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".ticker_label") %></dt>
<dd class="text-gray-900"><%= @holding.ticker %></dd>
<dt class="text-secondary"><%= t(".ticker_label") %></dt>
<dd class="text-primary"><%= @holding.ticker %></dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".current_market_price_label") %></dt>
<dd class="text-gray-900"><%= @holding.security.current_price ? format_money(@holding.security.current_price) : t(".unknown") %></dd>
<dt class="text-secondary"><%= t(".current_market_price_label") %></dt>
<dd class="text-primary"><%= @holding.security.current_price ? format_money(@holding.security.current_price) : t(".unknown") %></dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".portfolio_weight_label") %></dt>
<dd class="text-gray-900"><%= @holding.weight ? number_to_percentage(@holding.weight, precision: 2) : t(".unknown") %></dd>
<dt class="text-secondary"><%= t(".portfolio_weight_label") %></dt>
<dd class="text-primary"><%= @holding.weight ? number_to_percentage(@holding.weight, precision: 2) : t(".unknown") %></dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".avg_cost_label") %></dt>
<dd class="text-gray-900"><%= @holding.avg_cost ? format_money(@holding.avg_cost) : t(".unknown") %></dd>
<dt class="text-secondary"><%= t(".avg_cost_label") %></dt>
<dd class="text-primary"><%= @holding.avg_cost ? format_money(@holding.avg_cost) : t(".unknown") %></dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".trend_label") %></dt>
<dt class="text-secondary"><%= t(".trend_label") %></dt>
<dd style="color: <%= @holding.trend&.color %>;">
<%= @holding.trend ? render("shared/trend_change", trend: @holding.trend) : t(".unknown") %>
</dd>
@ -48,9 +48,9 @@
</details>
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4><%= t(".history") %></h4>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
</summary>
<div class="space-y-2">
@ -67,7 +67,7 @@
</div>
<div>
<p class="text-gray-500 text-xs uppercase"><%= l(trade_entry.date, format: :long) %></p>
<p class="text-secondary text-xs uppercase"><%= l(trade_entry.date, format: :long) %></p>
<p><%= t(
".trade_history_entry",
@ -81,29 +81,29 @@
</ul>
<% else %>
<p class="text-gray-500">No trade history available for this holding.</p>
<p class="text-secondary">No trade history available for this holding.</p>
<% end %>
</div>
</div>
</details>
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4><%= t(".settings") %></h4>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
</summary>
<div class="pb-4">
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-gray-900"><%= t(".delete_title") %></h4>
<p class="text-gray-500"><%= t(".delete_subtitle") %></p>
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= button_to t(".delete"),
account_holding_path(@holding),
method: :delete,
class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-alpha-black-200",
class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-secondary",
data: { turbo_confirm: true } %>
</div>
</div>

24
app/views/account/trades/_header.html.erb
View file

@ -2,7 +2,7 @@
<div id="<%= dom_id(entry, :header) %>">
<%= tag.header class: "mb-4 space-y-1" do %>
<span class="text-gray-500 text-sm">
<span class="text-secondary text-sm">
<%= entry.amount.negative? ? t(".sell") : t(".buy") %>
</span>
@ -12,13 +12,13 @@
<%= format_money entry.amount_money %>
</span>
<span class="text-lg text-gray-500">
<span class="text-lg text-secondary">
<%= entry.currency %>
</span>
</h3>
</div>
<span class="text-sm text-gray-500">
<span class="text-sm text-secondary">
<%= I18n.l(entry.date, format: :long) %>
</span>
<% end %>
@ -30,32 +30,32 @@
<div class="pb-4">
<dl class="space-y-3 px-3 py-2">
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".symbol_label") %></dt>
<dd class="text-gray-900"><%= trade.security.ticker %></dd>
<dt class="text-secondary"><%= t(".symbol_label") %></dt>
<dd class="text-primary"><%= trade.security.ticker %></dd>
</div>
<% if trade.qty.positive? %>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".purchase_qty_label") %></dt>
<dd class="text-gray-900"><%= trade.qty.abs %></dd>
<dt class="text-secondary"><%= t(".purchase_qty_label") %></dt>
<dd class="text-primary"><%= trade.qty.abs %></dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".purchase_price_label") %></dt>
<dd class="text-gray-900"><%= format_money trade.price_money %></dd>
<dt class="text-secondary"><%= t(".purchase_price_label") %></dt>
<dd class="text-primary"><%= format_money trade.price_money %></dd>
</div>
<% end %>
<% if trade.security.current_price.present? %>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".current_market_price_label") %></dt>
<dd class="text-gray-900"><%= format_money trade.security.current_price %></dd>
<dt class="text-secondary"><%= t(".current_market_price_label") %></dt>
<dd class="text-primary"><%= format_money trade.security.current_price %></dd>
</div>
<% end %>
<% if trade.qty.positive? && trade.unrealized_gain_loss.present? %>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500"><%= t(".total_return_label") %></dt>
<dt class="text-secondary"><%= t(".total_return_label") %></dt>
<dd style="color: <%= trade.unrealized_gain_loss.color %>;">
<%= render "shared/trend_change", trend: trade.unrealized_gain_loss %>
</dd>

4
app/views/account/trades/_selection_bar.html.erb
View file

@ -1,11 +1,11 @@
<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
<div class="flex items-center gap-2">
<%= check_box_tag "entry_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<p data-bulk-select-target="selectionBarText"></p>
</div>
<div class="flex items-center gap-1 text-gray-500">
<div class="flex items-center gap-1 text-secondary">
<%= form_with url: bulk_delete_account_transactions_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
<button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
<%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>

8
app/views/account/trades/_trade.html.erb
View file

@ -2,11 +2,11 @@
<% trade, account = entry.account_trade, entry.account %>
<div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-gray-400 bg-gray-25" : "text-gray-900" %> text-sm font-medium p-4">
<div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-subdued bg-gray-25" : "text-primary" %> text-sm font-medium p-4">
<div class="col-span-6 flex items-center gap-4">
<% if selectable %>
<%= check_box_tag dom_id(entry, "selection"),
class: "maybe-checkbox maybe-checkbox--light",
class: "checkbox checkbox--light",
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
<% end %>
@ -43,10 +43,10 @@
<div class="col-span-2 justify-self-end">
<% if balance_trend&.trend %>
<div class="flex items-center gap-2">
<%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-gray-900" %>
<%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-primary" %>
</div>
<% else %>
<%= tag.p "--", class: "font-medium text-sm text-gray-400" %>
<%= tag.p "--", class: "font-medium text-sm text-subdued" %>
<% end %>
</div>
</div>

10
app/views/account/trades/index.html.erb
View file

@ -4,17 +4,17 @@
<h3 class="font-medium text-lg"><%= t(".trades") %></h3>
<%= link_to new_account_trade_path(@account),
id: dom_id(@account, "new_trade"),
class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg",
class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg",
data: { turbo_frame: :modal } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
<%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
<span class="text-sm"><%= t(".new") %></span>
<% end %>
</div>
<div class="bg-gray-25 rounded-xl grid grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-5 py-3">
<div class="bg-gray-25 rounded-xl grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3">
<div class="pl-0.5 col-span-6 flex items-center gap-4">
<%= check_box_tag "selection_entry",
class: "maybe-checkbox maybe-checkbox--light",
class: "checkbox checkbox--light",
data: { action: "bulk-select#togglePageSelection" } %>
<%= tag.p t(".trade") %>
</div>
@ -29,7 +29,7 @@
</div>
<% if @entries.empty? %>
<p class="text-gray-500 py-4"><%= t(".no_trades") %></p>
<p class="text-secondary py-4"><%= t(".no_trades") %></p>
<% else %>
<div class="space-y-6">
<%= entries_by_date(@entries) do |entries, _transfers| %>

12
app/views/account/trades/show.html.erb
View file

@ -68,8 +68,8 @@
data: { controller: "auto-submit-form" } do |f| %>
<div class="flex cursor-pointer items-center gap-2 justify-between">
<div class="text-sm space-y-1">
<h4 class="text-gray-900"><%= t(".exclude_title") %></h4>
<p class="text-gray-500"><%= t(".exclude_subtitle") %></p>
<h4 class="text-primary"><%= t(".exclude_title") %></h4>
<p class="text-secondary"><%= t(".exclude_subtitle") %></p>
</div>
<div class="relative inline-block select-none">
@ -77,7 +77,7 @@
class: "sr-only peer",
"data-auto-submit-form-target": "auto" %>
<label for="account_entry_excluded"
class="maybe-switch"></label>
class="switch"></label>
</div>
</div>
<% end %>
@ -85,15 +85,15 @@
<!-- Delete Trade Form -->
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-gray-900"><%= t(".delete_title") %></h4>
<p class="text-gray-500"><%= t(".delete_subtitle") %></p>
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= button_to t(".delete"),
account_entry_path(@entry),
method: :delete,
class: "rounded-lg px-3 py-2 text-red-500 text-sm
font-medium border border-alpha-black-200",
font-medium border border-secondary",
data: { turbo_confirm: true } %>
</div>
</div>

2
app/views/account/transactions/_form.html.erb
View file

@ -8,7 +8,7 @@
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
<%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil? %>
<%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow" %>
<%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
<%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
<%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
<%= tag.span t(".transfer") %>
<% end %>

6
app/views/account/transactions/_header.html.erb
View file

@ -7,17 +7,17 @@
<%= format_money -entry.amount_money %>
</span>
<span class="text-lg text-gray-500">
<span class="text-lg text-secondary">
<%= entry.currency %>
</span>
</h3>
<% if entry.account_transaction.transfer? %>
<%= lucide_icon "arrow-left-right", class: "text-gray-500 mt-1 w-5 h-5" %>
<%= lucide_icon "arrow-left-right", class: "text-secondary mt-1 w-5 h-5" %>
<% end %>
</div>
<span class="text-sm text-gray-500">
<span class="text-sm text-secondary">
<%= I18n.l(entry.date, format: :long) %>
</span>
<% end %>

4
app/views/account/transactions/_selection_bar.html.erb
View file

@ -1,11 +1,11 @@
<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
<div class="flex items-center gap-2">
<%= check_box_tag "entry_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
<p data-bulk-select-target="selectionBarText"></p>
</div>
<div class="flex items-center gap-1 text-gray-500">
<div class="flex items-center gap-1 text-secondary">
<%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
<%= link_to bulk_edit_account_transactions_path,

10
app/views/account/transactions/_transaction.html.erb
View file

@ -1,11 +1,11 @@
<%# locals: (entry:, selectable: true, balance_trend: nil) %>
<div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4 <%= @focused_record == entry ? "border border-gray-900 rounded-lg" : "" %>">
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 <%= @focused_record == entry ? "border border-gray-900 rounded-lg" : "" %>">
<div class="pr-10 flex items-center gap-4 <%= balance_trend ? "col-span-6" : "col-span-8" %>">
<% if selectable %>
<%= check_box_tag dom_id(entry, "selection"),
disabled: entry.entryable.transfer?,
class: "maybe-checkbox maybe-checkbox--light",
class: "checkbox checkbox--light",
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
<% end %>
@ -40,7 +40,7 @@
<% end %>
</div>
<div class="text-gray-500 text-xs font-normal">
<div class="text-secondary text-xs font-normal">
<% if entry.entryable.transfer? %>
<%= render "transfers/account_links", transfer: entry.entryable.transfer, is_inflow: entry.entryable.transfer_as_inflow.present? %>
<% else %>
@ -66,9 +66,9 @@
<% if balance_trend %>
<div class="col-span-2 justify-self-end">
<% if balance_trend.trend %>
<%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-gray-900" %>
<%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-primary" %>
<% else %>
<%= tag.p "--", class: "font-medium text-sm text-gray-400" %>
<%= tag.p "--", class: "font-medium text-sm text-subdued" %>
<% end %>
</div>
<% end %>

6
app/views/account/transactions/_transfer_match.html.erb
View file

@ -12,7 +12,7 @@
<%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "confirmed" }),
method: :patch,
class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
class: "text-secondary hover:text-gray-800 flex items-center justify-center",
title: "Confirm match" do %>
<%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
<% end %>
@ -20,9 +20,9 @@
<%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "rejected" }),
method: :patch,
data: { turbo: false },
class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
class: "text-secondary hover:text-gray-800 flex items-center justify-center",
title: "Reject match" do %>
<%= lucide_icon "x", class: "w-4 h-4 text-gray-400 hover:text-gray-600" %>
<%= lucide_icon "x", class: "w-4 h-4 text-subdued hover:text-gray-600" %>
<% end %>
<% end %>
</div>

14
app/views/account/transactions/bulk_edit.html.erb
View file

@ -21,9 +21,9 @@
<div class="space-y-2">
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4><%= t(".overview") %></h4>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
</summary>
<div class="pb-6 space-y-2">
@ -32,14 +32,14 @@
</details>
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4><%= t(".details") %></h4>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
<%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
</summary>
<div class="space-y-2">
<%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-gray-400" } %>
<%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-gray-400" } %>
<%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-subdued" } %>
<%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-subdued" } %>
<%= form.text_area :notes, label: t(".note_label"), placeholder: t(".note_placeholder"), rows: 5 %>
</div>
</details>
@ -49,7 +49,7 @@
</div>
<div class="flex justify-end items-center gap-2">
<%= link_to t(".cancel"), transactions_path, class: "text-sm font-medium text-gray-900 px-3 py-2" %>
<%= link_to t(".cancel"), transactions_path, class: "text-sm font-medium text-primary px-3 py-2" %>
<%= tag.button t(".save"),
type: "button",

6
app/views/account/transactions/index.html.erb
View file

@ -3,9 +3,9 @@
<div class="flex justify-between items-center">
<h3 class="font-medium text-lg"><%= t(".transactions") %></h3>
<%= link_to new_account_transaction_path(account_id: @account),
class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg",
class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg",
data: { turbo_frame: :modal } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
<%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
<span class="text-sm"><%= t(".new") %></span>
<% end %>
</div>
@ -16,7 +16,7 @@
</div>
<% if @entries.empty? %>
<p class="text-gray-500 py-4"><%= t(".no_transactions") %></p>
<p class="text-secondary py-4"><%= t(".no_transactions") %></p>
<% else %>
<div class="space-y-6">
<%= entries_by_date(@entries) do |entries, _transfers| %>

20
app/views/account/transactions/show.html.erb
View file

@ -38,7 +38,7 @@
Current.family.categories.alphabetically,
:id, :name,
{ label: t(".category_label"),
class: "text-gray-400", include_blank: t(".uncategorized") },
class: "text-subdued", include_blank: t(".uncategorized") },
"data-auto-submit-form-target": "auto" %>
<% end %>
<% end %>
@ -70,7 +70,7 @@
:id, :name,
{ include_blank: t(".none"),
label: t(".merchant_label"),
class: "text-gray-400" },
class: "text-subdued" },
"data-auto-submit-form-target": "auto" %>
<%= ef.select :tag_ids,
@ -105,8 +105,8 @@
data: { controller: "auto-submit-form" } do |f| %>
<div class="flex cursor-pointer items-center gap-4 justify-between">
<div class="text-sm space-y-1">
<h4 class="text-gray-900">One-time <%= @entry.amount.negative? ? "Income" : "Expense" %></h4>
<p class="text-gray-500">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
<h4 class="text-primary">One-time <%= @entry.amount.negative? ? "Income" : "Expense" %></h4>
<p class="text-secondary">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
</div>
<div class="relative inline-block select-none">
@ -114,15 +114,15 @@
class: "sr-only peer",
"data-auto-submit-form-target": "auto" %>
<label for="account_entry_excluded"
class="maybe-switch"></label>
class="switch"></label>
</div>
</div>
<% end %>
<div class="flex items-center justify-between gap-4 p-3">
<div class="text-sm space-y-1">
<h4 class="text-gray-900">Transfer or Debt Payment?</h4>
<p class="text-gray-500">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
<h4 class="text-primary">Transfer or Debt Payment?</h4>
<p class="text-secondary">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
</div>
<%= link_to new_account_transaction_transfer_match_path(@entry), class: "btn btn--outline flex items-center gap-2", data: { turbo_frame: :modal } do %>
@ -134,15 +134,15 @@
<!-- Delete Transaction Form -->
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-gray-900"><%= t(".delete_title") %></h4>
<p class="text-gray-500"><%= t(".delete_subtitle") %></p>
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= button_to t(".delete"),
account_entry_path(@entry),
method: :delete,
class: "rounded-lg px-3 py-2 text-red-500 text-sm
font-medium border border-alpha-black-200",
font-medium border border-secondary",
data: { turbo_confirm: true, turbo_frame: "_top" } %>
</div>
</div>

4
app/views/account/transfer_matches/_matching_fields.html.erb
View file

@ -2,7 +2,7 @@
<% if candidates.any? %>
<div data-controller="transfer-match" class="space-y-2">
<p class="text-sm text-gray-500">
<p class="text-sm text-secondary">
Select a method for matching your transactions.
</p>
@ -29,7 +29,7 @@
</div>
</div>
<% else %>
<p class="text-sm text-gray-500">
<p class="text-sm text-secondary">
We couldn't find any transactions to match from your other accounts.
Please select an account and we will create a new inflow transaction for you.
</p>

4
app/views/account/valuations/_header.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (entry:) %>
<%= tag.header class: "mb-4 space-y-1", id: dom_id(entry, :header) do %>
<span class="text-gray-500 text-sm">
<span class="text-secondary text-sm">
<%= t(".balance") %>
</span>
@ -13,7 +13,7 @@
</h3>
</div>
<span class="text-sm text-gray-500">
<span class="text-sm text-secondary">
<%= I18n.l(entry.date, format: :long) %>
</span>
<% end %>

10
app/views/account/valuations/_valuation.html.erb
View file

@ -3,11 +3,11 @@
<% color = balance_trend&.trend&.color || "#D444F1" %>
<% icon = balance_trend&.trend&.icon || "plus" %>
<div class="p-4 grid grid-cols-12 items-center text-gray-900 text-sm font-medium">
<div class="p-4 grid grid-cols-12 items-center text-primary text-sm font-medium">
<div class="col-span-8 flex items-center gap-4">
<% if selectable %>
<%= check_box_tag dom_id(entry, "selection"),
class: "maybe-checkbox maybe-checkbox--light",
class: "checkbox checkbox--light",
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
<% end %>
@ -16,7 +16,7 @@
<%= lucide_icon icon, class: "w-4 h-4 shrink-0" %>
<% end %>
<div class="truncate text-gray-900">
<div class="truncate text-primary">
<% if entry.new_record? %>
<%= content_tag :p, entry.display_name %>
<% else %>
@ -33,11 +33,11 @@
<% if balance_trend&.trend %>
<%= tag.span format_money(balance_trend.trend.value), style: "color: #{balance_trend.trend.color}" %>
<% else %>
<%= tag.span "--", class: "text-gray-400" %>
<%= tag.span "--", class: "text-subdued" %>
<% end %>
</div>
<div class="col-span-2 justify-self-end">
<%= tag.p format_money(entry.amount_money), class: "font-medium text-sm text-gray-900" %>
<%= tag.p format_money(entry.amount_money), class: "font-medium text-sm text-primary" %>
</div>
</div>

8
app/views/account/valuations/index.html.erb
View file

@ -4,14 +4,14 @@
<%= tag.h2 t(".valuations"), class: "font-medium text-lg" %>
<%= link_to new_account_valuation_path(@account),
data: { turbo_frame: dom_id(@account.entries.account_valuations.new) },
class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg" do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
<%= tag.span t(".new_entry"), class: "text-sm" %>
<% end %>
</div>
<div class="rounded-xl bg-gray-25 p-1">
<div class="grid grid-cols-10 items-center uppercase text-xs font-medium text-gray-500 px-4 py-2">
<div class="grid grid-cols-10 items-center uppercase text-xs font-medium text-secondary px-4 py-2">
<%= tag.p t(".date"), class: "col-span-5" %>
<%= tag.p t(".value"), class: "col-span-2 justify-self-end" %>
<%= tag.p t(".change"), class: "col-span-2 justify-self-end" %>
@ -27,7 +27,7 @@
as: :entry,
spacer_template: "account/entries/ruler" %>
<% else %>
<p class="text-gray-500 text-sm p-4"><%= t(".no_valuations") %></p>
<p class="text-secondary text-sm p-4"><%= t(".no_valuations") %></p>
<% end %>
</div>
</div>

6
app/views/account/valuations/show.html.erb
View file

@ -51,14 +51,14 @@
<!-- Delete Valuation Form -->
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-gray-900"><%= t(".delete_title") %></h4>
<p class="text-gray-500"><%= t(".delete_subtitle") %></p>
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= button_to t(".delete"),
account_entry_path(entry),
method: :delete,
class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-alpha-black-200",
class: "rounded-lg px-3 py-2 text-red-500 text-sm font-medium border border-secondary",
data: { turbo_confirm: true, turbo_frame: "_top" } %>
</div>
</div>

10
app/views/accounts/_account.html.erb
View file

@ -7,7 +7,7 @@
<div>
<% if account.scheduled_for_deletion? %>
<p class="text-sm font-medium text-gray-900">
<p class="text-sm font-medium text-primary">
<span>
<%= account.name %>
</span>
@ -16,7 +16,7 @@
</span>
</p>
<% else %>
<%= link_to account.name, account, class: [(account.is_active ? "text-gray-900" : "text-gray-400"), "text-sm font-medium hover:underline"], data: { turbo_frame: "_top" } %>
<%= link_to account.name, account, class: [(account.is_active ? "text-primary" : "text-subdued"), "text-sm font-medium hover:underline"], data: { turbo_frame: "_top" } %>
<% if account.has_issues? %>
<div class="text-sm flex items-center gap-1 text-error">
<%= lucide_icon "alert-octagon", class: "shrink-0 w-4 h-4" %>
@ -29,12 +29,12 @@
<% unless account.scheduled_for_deletion? %>
<%= link_to edit_account_path(account, return_to: return_to), data: { turbo_frame: :modal }, class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center" do %>
<%= lucide_icon "pencil-line", class: "w-4 h-4 text-gray-500" %>
<%= lucide_icon "pencil-line", class: "w-4 h-4 text-secondary" %>
<% end %>
<% end %>
</div>
<div class="flex items-center gap-8">
<p class="text-sm font-medium <%= account.is_active ? "text-gray-900" : "text-gray-400" %>">
<p class="text-sm font-medium <%= account.is_active ? "text-primary" : "text-subdued" %>">
<%= format_money account.balance_money %>
</p>
@ -44,7 +44,7 @@
data: { controller: "auto-submit-form", turbo_frame: "_top" } do |form| %>
<div class="relative inline-block select-none">
<%= form.check_box :is_active, { class: "sr-only peer", data: { "auto-submit-form-target": "auto" } } %>
<%= form.label :is_active, "&nbsp;".html_safe, class: "maybe-switch" %>
<%= form.label :is_active, "&nbsp;".html_safe, class: "switch" %>
</div>
<% end %>
<% end %>

8
app/views/accounts/_account_list.html.erb
View file

@ -10,9 +10,9 @@
<summary class="flex gap-4 px-3 py-2 items-center w-full rounded-[10px] font-medium
hover:bg-gray-100 cursor-pointer">
<%= lucide_icon("chevron-down",
class: "hidden group-open:block text-gray-500 w-5 h-5") %>
class: "hidden group-open:block text-secondary w-5 h-5") %>
<%= lucide_icon("chevron-right",
class: "group-open:hidden text-gray-500 w-5 h-5") %>
class: "group-open:hidden text-secondary w-5 h-5") %>
<div class="text-left"><%= type.model_name.human %></div>
@ -36,7 +36,7 @@
<div class="overflow-hidden">
<p class="font-medium truncate"><%= account_value_node.name %></p>
<% if account.subtype %>
<p class="text-xs text-gray-500"><%= account.subtype&.humanize %></p>
<p class="text-xs text-secondary"><%= account.subtype&.humanize %></p>
<% end %>
</div>
<div class="flex flex-col items-end font-medium text-right ml-auto">
@ -53,7 +53,7 @@
</div>
<% end %>
<% end %>
<%= link_to new_polymorphic_path(type, step: "method_select"), class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= link_to new_polymorphic_path(type, step: "method_select"), class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-secondary text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<%= t(".new_account", type: type.model_name.human.downcase) %>
<% end %>

2
app/views/accounts/_chart_loader.html.erb
View file

@ -1,5 +1,5 @@
<div class="h-10">
</div>
<div class="h-64 flex items-center justify-center">
<p class="text-gray-500 animate-pulse text-sm">Loading...</p>
<p class="text-secondary animate-pulse text-sm">Loading...</p>
</div>

4
app/views/accounts/_empty.html.erb
View file

@ -1,7 +1,7 @@
<div class="flex justify-center items-center h-[800px] text-sm">
<div class="text-center flex flex-col items-center max-w-[300px]">
<%= tag.p t(".no_accounts"), class: "text-gray-900 mb-1 font-medium" %>
<%= tag.p t(".empty_message"), class: "text-gray-500 mb-4" %>
<%= tag.p t(".no_accounts"), class: "text-primary mb-1 font-medium" %>
<%= tag.p t(".empty_message"), class: "text-secondary mb-4" %>
<%= link_to new_account_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>

4
app/views/accounts/_summary_card.html.erb
View file

@ -1,8 +1,8 @@
<%# locals: (title:, content:) %>
<div class="rounded-xl bg-white shadow-xs border border-alpha-black-25 p-4">
<h4 class="text-gray-500 text-sm"><%= title %></h4>
<p class="text-xl font-medium text-gray-900">
<h4 class="text-secondary text-sm"><%= title %></h4>
<p class="text-xl font-medium text-primary">
<%= content %>
</p>
</div>

8
app/views/accounts/chart.html.erb
View file

@ -5,7 +5,7 @@
<%= turbo_frame_tag dom_id(@account, :chart_details) do %>
<div class="px-4">
<% if trend.direction.flat? %>
<%= tag.span t(".no_change"), class: "text-gray-500" %>
<%= tag.span t(".no_change"), class: "text-secondary" %>
<% else %>
<%= tag.span "#{trend.value.positive? ? "+" : ""}#{format_money(trend.value)}", style: "color: #{trend.color}" %>
<% unless trend.percent.infinite? %>
@ -13,7 +13,7 @@
<% end %>
<% end %>
<%= tag.span period_label(period), class: "text-gray-500" %>
<%= tag.span period_label(period), class: "text-secondary" %>
</div>
<div class="h-64">
@ -25,11 +25,11 @@
data-time-series-chart-data-value="<%= series.to_json %>"></div>
<% elsif series.empty? %>
<div class="w-full h-full flex items-center justify-center">
<p class="text-gray-500 text-sm">No data available for the selected period.</p>
<p class="text-secondary text-sm">No data available for the selected period.</p>
</div>
<% else %>
<div class="w-full h-full flex items-center justify-center">
<p class="text-gray-500 text-sm animate-pulse">Calculating latest balance data...</p>
<p class="text-secondary text-sm animate-pulse">Calculating latest balance data...</p>
</div>
<% end %>
</div>

2
app/views/accounts/index.html.erb
View file

@ -3,7 +3,7 @@
<% end %>
<div class="space-y-4">
<header class="flex justify-between items-center text-gray-900 font-medium">
<header class="flex justify-between items-center text-primary font-medium">
<h1 class="text-xl"><%= t(".accounts") %></h1>
<div class="flex items-center gap-5">
<div class="flex items-center gap-2">

4
app/views/accounts/index/_account_groups.erb
View file

@ -2,9 +2,9 @@
<% accounts.group_by(&:accountable_type).sort_by { |group, _| group }.each do |group, accounts| %>
<div class="bg-gray-25 p-1 rounded-xl">
<div class="flex items-center px-4 py-2 text-xs font-medium text-gray-500">
<div class="flex items-center px-4 py-2 text-xs font-medium text-secondary">
<p><%= to_accountable_title(Accountable.from_type(group)) %></p>
<span class="text-gray-400 mx-2">&middot;</span>
<span class="text-subdued mx-2">&middot;</span>
<p><%= accounts.count %></p>
<p class="ml-auto"><%= totals_by_currency(collection: accounts, money_method: :balance_money) %></p>
</div>

6
app/views/accounts/index/_manual_accounts.html.erb
View file

@ -2,13 +2,13 @@
<details open class="group bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
<summary class="flex items-center gap-2 focus-visible:outline-hidden">
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-gray-500 w-5" %>
<%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-black/5">
<%= lucide_icon("folder-pen", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("folder-pen", class: "w-5 h-5 text-secondary") %>
</div>
<span class="mr-auto text-sm font-medium text-gray-900"><%= t(".other_accounts") %></span>
<span class="mr-auto text-sm font-medium text-primary"><%= t(".other_accounts") %></span>
</summary>
<div class="space-y-4 mt-4">

6
app/views/accounts/new/_container.html.erb
View file

@ -5,11 +5,11 @@
<div class="border-b border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
<% if back_path %>
<%= link_to back_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %>
<%= lucide_icon("arrow-left", class: "text-gray-500 w-5 h-5") %>
<%= lucide_icon("arrow-left", class: "text-secondary w-5 h-5") %>
<% end %>
<% end %>
<span class="text-gray-400"><%= title %></span>
<span class="text-subdued"><%= title %></span>
</div>
<div class="p-2">
@ -19,7 +19,7 @@
<%= yield %>
</div>
<div class="border-t border-alpha-black-25 p-4 text-gray-500 text-sm flex justify-between">
<div class="border-t border-alpha-black-25 p-4 text-secondary text-sm flex justify-between">
<div class="flex space-x-5">
<div class="flex items-center space-x-2">
<span>Select</span>

6
app/views/accounts/new/_method_selector.html.erb
View file

@ -4,7 +4,7 @@
<div class="text-sm">
<%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= lucide_icon("keyboard", class: "text-gray-500 w-5 h-5") %>
<%= lucide_icon("keyboard", class: "text-secondary w-5 h-5") %>
</span>
<%= t("accounts.new.method_selector.manual_entry") %>
<% end %>
@ -13,7 +13,7 @@
<%# Default US-only Link %>
<button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="us" data-plaid-link-token-value="<%= us_link_token %>" class="flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= lucide_icon("link-2", class: "text-gray-500 w-5 h-5") %>
<%= lucide_icon("link-2", class: "text-secondary w-5 h-5") %>
</span>
<%= t("accounts.new.method_selector.connected_entry") %>
</button>
@ -23,7 +23,7 @@
<% if eu_link_token %>
<button data-controller="plaid" data-action="plaid#open modal#close" data-plaid-region-value="eu" data-plaid-link-token-value="<%= eu_link_token %>" class="flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2">
<span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
<%= lucide_icon("link-2", class: "text-gray-500 w-5 h-5") %>
<%= lucide_icon("link-2", class: "text-secondary w-5 h-5") %>
</span>
<%= t("accounts.new.method_selector.connected_entry_eu") %>
</button>

14
app/views/accounts/show/_activity.html.erb
View file

@ -12,13 +12,13 @@
</button>
<div data-menu-target="content" class="z-10 hidden bg-white rounded-lg border border-alpha-black-25 shadow-xs p-1">
<%= link_to new_account_valuation_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
<%= lucide_icon("circle-dollar-sign", class: "text-gray-500 w-5 h-5") %>
<%= lucide_icon("circle-dollar-sign", class: "text-secondary w-5 h-5") %>
<%= tag.span t(".new_balance"), class: "text-sm" %>
<% end %>
<% unless @account.crypto? %>
<%= link_to @account.investment? ? new_account_trade_path(account_id: @account.id) : new_account_transaction_path(account_id: @account.id), data: { turbo_frame: :modal }, class: "block p-2 rounded-lg hover:bg-gray-50 flex items-center gap-2" do %>
<%= lucide_icon("credit-card", class: "text-gray-500 w-5 h-5") %>
<%= lucide_icon("credit-card", class: "text-secondary w-5 h-5") %>
<%= tag.span t(".new_transaction"), class: "text-sm" %>
<% end %>
<% end %>
@ -36,12 +36,12 @@
<div class="flex gap-2 mb-4">
<div class="grow">
<div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
<%= hidden_field_tag :account_id, @account.id %>
<%= form.search_field :search,
placeholder: "Search entries by name",
value: @q[:search],
class: "form-field__input placeholder:text-sm placeholder:text-gray-500",
class: "form-field__input placeholder:text-sm placeholder:text-secondary",
"data-auto-submit-form-target": "auto" %>
</div>
</div>
@ -50,7 +50,7 @@
</div>
<% if @entries.empty? %>
<p class="text-gray-500 text-sm p-4"><%= t(".no_entries") %></p>
<p class="text-secondary text-sm p-4"><%= t(".no_entries") %></p>
<% else %>
<%= tag.div id: dom_id(@account, "entries_bulk_select"),
data: {
@ -62,10 +62,10 @@
<%= render "account/entries/selection_bar" %>
</div>
<div class="grid bg-gray-25 rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-5 py-3 mb-4">
<div class="grid bg-gray-25 rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
<div class="pl-0.5 col-span-8 flex items-center gap-4">
<%= check_box_tag "selection_entry",
class: "maybe-checkbox maybe-checkbox--light",
class: "checkbox checkbox--light",
data: { action: "bulk-select#togglePageSelection" } %>
<p><%= t(".date") %></p>
</div>

4
app/views/accounts/show/_chart.html.erb
View file

@ -7,11 +7,11 @@
<div class="flex justify-between px-4 pt-4 mb-2">
<div class="space-y-2">
<div class="flex items-center gap-1">
<%= tag.p title || default_value_title, class: "text-sm font-medium text-gray-500" %>
<%= tag.p title || default_value_title, class: "text-sm font-medium text-secondary" %>
<%= tooltip %>
</div>
<%= tag.p format_money(account.balance_money), class: "text-gray-900 text-3xl font-medium" %>
<%= tag.p format_money(account.balance_money), class: "text-primary text-3xl font-medium" %>
</div>
<%= form_with url: request.path, method: :get, data: { controller: "auto-submit-form" } do |form| %>

6
app/views/accounts/show/_header.html.erb
View file

@ -13,7 +13,7 @@
<div class="truncate">
<h2 class="font-medium text-xl truncate"><%= title || account.name %></h2>
<% if subtitle.present? %>
<p class="text-sm text-gray-500"><%= subtitle %></p>
<p class="text-sm text-secondary"><%= subtitle %></p>
<% end %>
</div>
</div>
@ -23,12 +23,12 @@
<% if account.plaid_account_id.present? %>
<% if Rails.env.development? %>
<%= button_to sync_plaid_item_path(account.plaid_account.plaid_item), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
<%= lucide_icon "refresh-cw", class: "w-4 h-4 text-gray-500 hover:text-gray-400" %>
<%= lucide_icon "refresh-cw", class: "w-4 h-4 text-secondary hover:text-subdued" %>
<% end %>
<% end %>
<% else %>
<%= button_to sync_account_path(account), disabled: account.syncing?, data: { turbo: false }, class: "flex items-center gap-2", title: "Sync Account" do %>
<%= lucide_icon "refresh-cw", class: "w-4 h-4 text-gray-500 hover:text-gray-400" %>
<%= lucide_icon "refresh-cw", class: "w-4 h-4 text-secondary hover:text-subdued" %>
<% end %>
<% end %>

2
app/views/accounts/show/_loading.html.erb
View file

@ -1,3 +1,3 @@
<div class="p-5">
<p class="text-gray-500 animate-pulse">Loading account...</p>
<p class="text-secondary animate-pulse">Loading account...</p>
</div>

14
app/views/accounts/show/_menu.html.erb
View file

@ -1,20 +1,20 @@
<%# locals: (account:) %>
<%= contextual_menu do %>
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<% if account.plaid_account_id.present? %>
<%= link_to accounts_path,
data: { turbo_frame: :_top },
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
<span><%= t(".manage") %></span>
<% end %>
<% else %>
<%= link_to edit_account_path(account),
data: { turbo_frame: :modal },
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
<span><%= t(".edit") %></span>
<% end %>
@ -22,8 +22,8 @@
<% unless account.crypto? %>
<%= link_to new_import_path,
data: { turbo_frame: :modal },
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "download", class: "w-5 h-5 text-gray-500" %>
class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "download", class: "w-5 h-5 text-secondary" %>
<span><%= t(".import") %></span>
<% end %>

2
app/views/accounts/show/_tabs.html.erb
View file

@ -2,7 +2,7 @@
<% selected_tab = tabs.find { |tab| tab[:key] == params[:tab] } || tabs.first %>
<div class="flex gap-2 text-sm text-gray-900 font-medium mb-4">
<div class="flex gap-2 text-sm text-primary font-medium mb-4">
<% tabs.each do |tab| %>
<%= render "accounts/show/tab", account: account, key: tab[:key], is_selected: selected_tab[:key] == tab[:key] %>
<% end %>

22
app/views/accounts/summary.html.erb
View file

@ -4,7 +4,7 @@
<%= render "accounts/summary/header" %>
<div class="bg-white rounded-xl shadow-xs border border-alpha-black-100 flex divide-x divide-gray-200">
<div class="bg-white rounded-xl shadow-xs border border-tertiary flex divide-x divide-gray-200">
<div class="w-1/2 p-4 flex items-stretch justify-between">
<div class="space-y-2 grow">
<%= render partial: "shared/value_heading", locals: {
@ -41,10 +41,10 @@
</div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">
<div class="flex justify-between items-center mb-5">
<h2 class="text-lg font-medium text-gray-900">Assets</h2>
<h2 class="text-lg font-medium text-primary">Assets</h2>
<div class="flex items-center gap-2">
<%= link_to new_account_path, class: "btn btn--secondary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
<p><%= t(".new") %></p>
<% end %>
<%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
@ -58,18 +58,18 @@
<%= render partial: "pages/account_percentages_table", locals: { account_groups: @account_groups[:assets].children } %>
<% else %>
<div class="py-20 flex flex-col items-center">
<%= lucide_icon "blocks", class: "w-6 h-6 shrink-0 text-gray-500" %>
<p class="text-gray-900 text-sm font-medium mb-1 mt-4"><%= t(".no_assets") %></p>
<p class="text-gray-500 text-sm max-w-xs text-center"><%= t(".no_assets_description") %></p>
<%= lucide_icon "blocks", class: "w-6 h-6 shrink-0 text-secondary" %>
<p class="text-primary text-sm font-medium mb-1 mt-4"><%= t(".no_assets") %></p>
<p class="text-secondary text-sm max-w-xs text-center"><%= t(".no_assets_description") %></p>
</div>
<% end %>
</div>
<div class="p-4 bg-white rounded-xl shadow-xs border border-alpha-black-25 space-y-4">
<div class="flex justify-between items-center mb-5">
<h2 class="text-lg font-medium text-gray-900">Liabilities</h2>
<h2 class="text-lg font-medium text-primary">Liabilities</h2>
<div class="flex items-center gap-2">
<%= link_to new_account_path, class: "btn btn--secondary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
<p><%= t(".new") %></p>
<% end %>
<%= form_with url: summary_accounts_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
@ -83,9 +83,9 @@
<%= render partial: "pages/account_percentages_table", locals: { account_groups: @account_groups[:liabilities].children } %>
<% else %>
<div class="py-20 flex flex-col items-center">
<%= lucide_icon "scale", class: "w-6 h-6 shrink-0 text-gray-500" %>
<p class="text-gray-900 text-sm font-medium mb-1 mt-4"><%= t(".no_liabilities") %></p>
<p class="text-gray-500 text-sm max-w-xs text-center"><%= t(".no_liabilities_description") %></p>
<%= lucide_icon "scale", class: "w-6 h-6 shrink-0 text-secondary" %>
<p class="text-primary text-sm font-medium mb-1 mt-4"><%= t(".no_liabilities") %></p>
<p class="text-secondary text-sm max-w-xs text-center"><%= t(".no_liabilities_description") %></p>
</div>
<% end %>
</div>

8
app/views/accounts/summary/_header.html.erb
View file

@ -1,12 +1,12 @@
<header class="flex justify-between items-center text-gray-900 font-medium">
<header class="flex justify-between items-center text-primary font-medium">
<h1 class="text-xl"><%= t(".accounts") %></h1>
<div class="flex items-center gap-2">
<%= contextual_menu do %>
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<%= link_to accounts_path(return_to: summary_accounts_path),
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
<%= lucide_icon "settings", class: "w-5 h-5 text-gray-500" %>
class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
<%= lucide_icon "settings", class: "w-5 h-5 text-secondary" %>
<span class="text-black"><%= t(".manage") %></span>
<% end %>
</div>

16
app/views/application/_pagination.html.erb
View file

@ -6,8 +6,8 @@
<% if pagy.prev %>
<%= link_to pagy_url_for(pagy, pagy.prev),
data: { turbo_frame: :_top },
class: "inline-flex items-center p-2 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-500") %>
class: "inline-flex items-center p-2 text-sm font-medium text-secondary hover:border-gray-300 hover:text-gray-700" do %>
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-secondary") %>
<% end %>
<% else %>
<div class="inline-flex items-center p-2 text-sm font-medium hover:border-gray-300">
@ -20,17 +20,17 @@
<% if series_item.is_a?(Integer) %>
<%= link_to pagy_url_for(pagy, series_item),
data: { turbo_frame: :_top },
class: "rounded-md px-2 py-1 inline-flex items-center text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
class: "rounded-md px-2 py-1 inline-flex items-center text-sm font-medium text-secondary hover:border-gray-300 hover:text-gray-700" do %>
<%= series_item %>
<% end %>
<% elsif series_item.is_a?(String) %>
<%= link_to pagy_url_for(pagy, series_item),
data: { turbo_frame: :_top },
class: "rounded-md px-2 py-1 bg-white border border-alpha-black-25 shadow-xs inline-flex items-center text-sm font-medium text-gray-900" do %>
class: "rounded-md px-2 py-1 bg-white border border-alpha-black-25 shadow-xs inline-flex items-center text-sm font-medium text-primary" do %>
<%= series_item %>
<% end %>
<% elsif series_item == :gap %>
<span class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-500">...</span>
<span class="inline-flex items-center px-2 py-1 text-sm font-medium text-secondary">...</span>
<% end %>
<% end %>
</div>
@ -38,8 +38,8 @@
<% if pagy.next %>
<%= link_to pagy_url_for(pagy, pagy.next),
data: { turbo_frame: :_top },
class: "inline-flex items-center p-2 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
class: "inline-flex items-center p-2 text-sm font-medium text-secondary hover:border-gray-300 hover:text-gray-700" do %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<% else %>
<div class="inline-flex items-center p-2 text-sm font-medium hover:border-gray-300">
@ -52,6 +52,6 @@
<%= select_tag :per_page,
options_for_select(["10", "20", "30", "50"], pagy.limit),
data: { controller: "selectable-link" },
class: "py-1.5 pr-8 text-sm text-gray-900 font-medium border border-gray-200 rounded-lg focus:border-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900" %>
class: "py-1.5 pr-8 text-sm text-primary font-medium border border-gray-200 rounded-lg focus:border-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900" %>
</div>
</nav>

16
app/views/budget_categories/_allocation_progress.erb
View file

@ -9,17 +9,17 @@
<% end %>
<% if budget.available_to_allocate.negative? %>
<p class="text-gray-900 text-sm">&gt; 100% set</p>
<p class="text-primary text-sm">&gt; 100% set</p>
<% else %>
<p class="text-gray-500 text-sm">
<p class="text-secondary text-sm">
<%= number_to_percentage(budget.allocated_percent, precision: 0) %> set
</p>
<% end %>
<p class="ml-auto text-sm space-x-1">
<span class="<%= budget.available_to_allocate.negative? ? "text-red-500" : "text-gray-900" %>"><%= format_money(budget.allocated_spending_money) %></span>
<span class="text-gray-500"> / </span>
<span class="text-gray-500"><%= format_money(budget.budgeted_spending_money) %></span>
<span class="<%= budget.available_to_allocate.negative? ? "text-red-500" : "text-primary" %>"><%= format_money(budget.allocated_spending_money) %></span>
<span class="text-secondary"> / </span>
<span class="text-secondary"><%= format_money(budget.budgeted_spending_money) %></span>
</p>
</div>
@ -33,12 +33,12 @@
<div class="text-sm">
<% if budget.available_to_allocate.negative? %>
<p class="text-gray-500">
<p class="text-secondary">
Budget exceeded by <span class="text-red-500"><%= format_money(budget.available_to_allocate_money.abs) %></span>
</p>
<% else %>
<span class="text-gray-900"><%= format_money(budget.available_to_allocate_money) %></span>
<span class="text-gray-500">left to allocate</span>
<span class="text-primary"><%= format_money(budget.available_to_allocate_money) %></span>
<span class="text-secondary">left to allocate</span>
<% end %>
</div>
</div>

12
app/views/budget_categories/_budget_category.html.erb
View file

@ -18,30 +18,30 @@
<% end %>
<div>
<p class="text-sm font-medium text-gray-900"><%= budget_category.category.name %></p>
<p class="text-sm font-medium text-primary"><%= budget_category.category.name %></p>
<% if budget_category.initialized? %>
<% if budget_category.available_to_spend.negative? %>
<p class="text-sm font-medium text-red-500"><%= format_money(budget_category.available_to_spend_money.abs) %> over</p>
<% elsif budget_category.available_to_spend.zero? %>
<p class="text-sm font-medium <%= budget_category.budgeted_spending.positive? ? "text-orange-500" : "text-gray-500" %>">
<p class="text-sm font-medium <%= budget_category.budgeted_spending.positive? ? "text-orange-500" : "text-secondary" %>">
<%= format_money(budget_category.available_to_spend_money) %> left
</p>
<% else %>
<p class="text-sm text-gray-500 font-medium"><%= format_money(budget_category.available_to_spend_money) %> left</p>
<p class="text-sm text-secondary font-medium"><%= format_money(budget_category.available_to_spend_money) %> left</p>
<% end %>
<% else %>
<p class="text-sm text-gray-500 font-medium">
<p class="text-sm text-secondary font-medium">
<%= format_money(budget_category.category.avg_monthly_total_money, precision: 0) %> avg
</p>
<% end %>
</div>
<div class="ml-auto text-right">
<p class="text-sm font-medium text-gray-900"><%= format_money(budget_category.actual_spending_money) %></p>
<p class="text-sm font-medium text-primary"><%= format_money(budget_category.actual_spending_money) %></p>
<% if budget_category.initialized? %>
<p class="text-sm text-gray-500">from <%= format_money(budget_category.budgeted_spending_money) %></p>
<p class="text-sm text-secondary">from <%= format_money(budget_category.budgeted_spending_money) %></p>
<% end %>
</div>
<% end %>

6
app/views/budget_categories/_budget_category_form.html.erb
View file

@ -6,16 +6,16 @@
<div class="w-1 h-3 rounded-xl mt-1" style="background-color: <%= budget_category.category.color %>"></div>
<div class="text-sm mr-3">
<p class="text-gray-900 font-medium mb-0.5"><%= budget_category.category.name %></p>
<p class="text-primary font-medium mb-0.5"><%= budget_category.category.name %></p>
<p class="text-gray-500"><%= format_money(budget_category.category.avg_monthly_total_money, precision: 0) %>/m average</p>
<p class="text-secondary"><%= format_money(budget_category.category.avg_monthly_total_money, precision: 0) %>/m average</p>
</div>
<div class="ml-auto">
<%= form_with model: [budget_category.budget, budget_category], data: { controller: "auto-submit-form preserve-focus" } do |f| %>
<div class="form-field w-[120px]">
<div class="flex items-center">
<span class="text-gray-500 text-sm mr-2"><%= currency.symbol %></span>
<span class="text-secondary text-sm mr-2"><%= currency.symbol %></span>
<%= f.number_field :budgeted_spending,
class: "form-field__input text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
placeholder: "0",

2
app/views/budget_categories/_confirm_button.html.erb
View file

@ -4,7 +4,7 @@
budget_path(budget),
class: "block btn btn--primary w-full text-center" %>
<% else %>
<span class="block btn btn--secondary w-full text-center text-gray-400 cursor-not-allowed">
<span class="block btn btn--secondary w-full text-center text-subdued cursor-not-allowed">
Confirm
</span>
<% end %>

4
app/views/budget_categories/_no_categories.html.erb
View file

@ -1,7 +1,7 @@
<div class="flex justify-center items-center">
<div class="text-center flex flex-col items-center max-w-[500px]">
<h2 class="text-lg text-gray-900 font-medium">Oops!</h2>
<p class="text-gray-500 text-sm max-w-sm mx-auto mb-4">
<h2 class="text-lg text-primary font-medium">Oops!</h2>
<p class="text-secondary text-sm max-w-sm mx-auto mb-4">
You have not created or assigned any expense categories to your transactions yet.
</p>

6
app/views/budget_categories/_uncategorized_budget_category_form.html.erb
View file

@ -6,14 +6,14 @@
<div class="w-1 h-3 rounded-xl mt-1" style="background-color: <%= budget_category.category.color %>"></div>
<div class="text-sm mr-3">
<p class="text-gray-900 font-medium mb-0.5"><%= budget_category.category.name %></p>
<p class="text-gray-500"><%= format_money(Money.new(budget_category.category.avg_monthly_total, budget_category.category.family.currency), precision: 0) %>/m average</p>
<p class="text-primary font-medium mb-0.5"><%= budget_category.category.name %></p>
<p class="text-secondary"><%= format_money(Money.new(budget_category.category.avg_monthly_total, budget_category.category.family.currency), precision: 0) %>/m average</p>
</div>
<div class="ml-auto">
<div class="form-field w-[120px]">
<div class="flex items-center">
<span class="text-gray-400 text-sm mr-2">$</span>
<span class="text-subdued text-sm mr-2">$</span>
<%= text_field_tag :uncategorized, budget_category.budgeted_spending_money, autocomplete: "off", class: "form-field__input text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", disabled: true %>
</div>
</div>

8
app/views/budget_categories/index.html.erb
View file

@ -8,8 +8,8 @@
<div>
<div class="space-y-6">
<div class="text-center space-y-2">
<h1 class="text-3xl text-gray-900 font-medium">Edit your category budgets</h1>
<p class="text-gray-500 text-sm max-w-md mx-auto">
<h1 class="text-3xl text-primary font-medium">Edit your category budgets</h1>
<p class="text-secondary text-sm max-w-md mx-auto">
Adjust category budgets to set spending limits. Unallocated funds will be automatically assigned as uncategorized.
</p>
</div>
@ -31,7 +31,7 @@
<div class="space-y-4">
<% group.budget_subcategories.each do |budget_subcategory| %>
<div class="w-full flex items-center gap-4">
<div class="ml-4 flex items-center justify-center text-gray-400">
<div class="ml-4 flex items-center justify-center text-subdued">
<%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
</div>
@ -45,7 +45,7 @@
<%= render "budget_categories/uncategorized_budget_category_form", budget: @budget %>
</div>
<%= render "budget_categories/confirm_button", budget: @budget %>
<%= render "budget_categories/confirm_button", budget: @budget %>
</div>
<% end %>
</div>

44
app/views/budget_categories/show.html.erb
View file

@ -2,14 +2,14 @@
<div class="space-y-4">
<header class="flex justify-between">
<div>
<p class="text-sm text-gray-500">Category</p>
<h3 class="text-2xl font-medium text-gray-900">
<p class="text-sm text-secondary">Category</p>
<h3 class="text-2xl font-medium text-primary">
<%= @budget_category.category.name %>
</h3>
<% if @budget_category.budget.initialized? %>
<p class="text-sm text-gray-500">
<span class="text-gray-900">
<p class="text-sm text-secondary">
<span class="text-primary">
<%= format_money(@budget_category.actual_spending_money) %>
</span>
<span>/</span>
@ -28,26 +28,26 @@
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4>Overview</h4>
<%= 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" %>
</summary>
<div class="pb-4">
<dl class="space-y-3 px-3 py-2">
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500">
<dt class="text-secondary">
<%= @budget_category.budget.start_date.strftime("%b %Y") %> spending
</dt>
<dd class="text-gray-900 font-medium">
<dd class="text-primary font-medium">
<%= format_money @budget_category.actual_spending_money %>
</dd>
</div>
<% if @budget_category.budget.initialized? %>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500">Status</dt>
<dt class="text-secondary">Status</dt>
<% if @budget_category.available_to_spend.negative? %>
<dd class="text-red-500 flex items-center gap-1 text-red-500 font-medium">
<%= lucide_icon "alert-circle", class: "shrink-0 w-4 h-4 text-red-500" %>
@ -61,7 +61,7 @@
<span>left</span>
</dd>
<% else %>
<dd class="text-gray-900 flex items-center gap-1 text-green-500 font-medium">
<dd class="text-primary flex items-center gap-1 text-green-500 font-medium">
<%= lucide_icon "check-circle-2", class: "shrink-0 w-4 h-4 text-green-500" %>
<%= format_money @budget_category.available_to_spend_money %>
<span>left</span>
@ -70,23 +70,23 @@
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500">Budgeted</dt>
<dd class="text-gray-900 font-medium">
<dt class="text-secondary">Budgeted</dt>
<dd class="text-primary font-medium">
<%= format_money @budget_category.budgeted_spending_money %>
</dd>
</div>
<% end %>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500">Monthly average spending</dt>
<dd class="text-gray-900 font-medium">
<dt class="text-secondary">Monthly average spending</dt>
<dd class="text-primary font-medium">
<%= format_money @budget_category.category.avg_monthly_total_money, precision: 0 %>
</dd>
</div>
<div class="flex items-center justify-between text-sm">
<dt class="text-gray-500">Monthly median spending</dt>
<dd class="text-gray-900 font-medium">
<dt class="text-secondary">Monthly median spending</dt>
<dd class="text-primary font-medium">
<%= format_money @budget_category.category.median_monthly_total_money, precision: 0 %>
</dd>
</div>
@ -96,10 +96,10 @@
<details class="group space-y-2" open>
<summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
<h4>Recent Transactions</h4>
<%= 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" %>
</summary>
<div class="space-y-2">
@ -117,12 +117,12 @@
<div class="flex justify-between w-full">
<div>
<p class="text-gray-500 text-xs uppercase">
<p class="text-secondary text-xs uppercase">
<%= entry.date.strftime("%b %d") %>
</p>
<p class="text-gray-900"><%= entry.name %></p>
<p class="text-primary"><%= entry.name %></p>
</div>
<p class="text-gray-900 font-medium">
<p class="text-primary font-medium">
<%= format_money entry.amount_money %>
</p>
</div>
@ -139,7 +139,7 @@
data: { turbo_frame: :_top },
class: "block text-center btn btn--outline w-full" %>
<% else %>
<p class="text-gray-500 text-sm mb-4">
<p class="text-secondary text-sm mb-4">
No transactions found for this budget period.
</p>
<% end %>

16
app/views/budgets/_actuals_summary.html.erb
View file

@ -2,11 +2,11 @@
<div>
<div class="p-4 border-b border-gray-100">
<h3 class="text-sm text-gray-500 mb-2">Income</h3>
<h3 class="text-sm text-secondary mb-2">Income</h3>
<% 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 %>
<span class="inline-block mb-2 text-xl font-medium text-gray-900">
<span class="inline-block mb-2 text-xl font-medium text-primary">
<%= format_money(income_totals.total_money) %>
</span>
@ -22,8 +22,8 @@
<% income_categories.each do |item| %>
<div class="flex items-center gap-1.5">
<div class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <%= item.category.color %>"></div>
<span class="text-gray-500"><%= item.category.name %></span>
<span class="text-gray-900"><%= number_to_percentage(item.percentage, precision: 0) %></span>
<span class="text-secondary"><%= item.category.name %></span>
<span class="text-primary"><%= number_to_percentage(item.percentage, precision: 0) %></span>
</div>
<% end %>
</div>
@ -32,12 +32,12 @@
</div>
<div class="p-4">
<h3 class="text-sm text-gray-500 mb-2">Expenses</h3>
<h3 class="text-sm text-secondary mb-2">Expenses</h3>
<% 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 %>
<span class="inline-block mb-2 text-xl font-medium text-gray-900"><%= format_money(expense_totals.total_money) %></span>
<span class="inline-block mb-2 text-xl font-medium text-primary"><%= format_money(expense_totals.total_money) %></span>
<% if expense_categories.any? %>
<div>
@ -51,8 +51,8 @@
<% expense_categories.each do |item| %>
<div class="flex items-center gap-1.5">
<div class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <%= item.category.color %>"></div>
<span class="text-gray-500"><%= item.category.name %></span>
<span class="text-gray-900"><%= number_to_percentage(item.percentage, precision: 0) %></span>
<span class="text-secondary"><%= item.category.name %></span>
<span class="text-primary"><%= number_to_percentage(item.percentage, precision: 0) %></span>
</div>
<% end %>
</div>

6
app/views/budgets/_budget_categories.html.erb
View file

@ -1,9 +1,9 @@
<%# locals: (budget:) %>
<div>
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
<p>Categories</p>
<span class="text-gray-400">&middot;</span>
<span class="text-subdued">&middot;</span>
<p><%= budget.budget_categories.count %></p>
<p class="ml-auto">Amount</p>
@ -24,7 +24,7 @@
<div>
<% group.budget_subcategories.each do |budget_subcategory| %>
<div class="w-full flex items-center -mt-4">
<div class="ml-8 flex items-center justify-center text-gray-400">
<div class="ml-8 flex items-center justify-center text-subdued">
<%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
</div>

18
app/views/budgets/_budget_donut.html.erb
View file

@ -8,18 +8,18 @@
<span>Spent</span>
</div>
<div class="text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-gray-900" %>">
<div class="text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
<%= format_money(budget.actual_spending_money) %>
</div>
<%= link_to edit_budget_path(budget), class: "btn btn--secondary flex items-center gap-1 mt-2" do %>
<span class="text-gray-900 font-medium">
<span class="text-primary font-medium">
of <%= format_money(budget.budgeted_spending_money) %>
</span>
<%= 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 %>
<div class="text-gray-400 text-3xl mb-2">
<div class="text-subdued text-3xl mb-2">
<span><%= format_money Money.new(0, budget.currency || budget.family.currency) %></span>
</div>
<%= link_to edit_budget_path(budget), class: "flex items-center gap-2 btn btn--primary" do %>
@ -34,26 +34,26 @@
<div class="flex flex-col gap-2 items-center">
<div class="flex items-center gap-3">
<div class="w-1 h-3 rounded-xl" style="background-color: <%= bc.category.color %>"></div>
<p class="text-sm text-gray-500"><%= bc.category.name %></p>
<p class="text-sm text-secondary"><%= bc.category.name %></p>
</div>
<p class="text-3xl font-medium <%= bc.available_to_spend.negative? ? "text-red-500" : "text-gray-900" %>">
<p class="text-3xl font-medium <%= bc.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
<%= format_money(bc.actual_spending_money) %>
</p>
<%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
<span>of <%= format_money(bc.budgeted_spending_money, precision: 0) %></span>
<%= 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 %>
</div>
</div>
<% end %>
<div id="segment_unused" class="hidden">
<p class="text-sm text-gray-500 text-center mb-2">Unused</p>
<p class="text-sm text-secondary text-center mb-2">Unused</p>
<p class="text-3xl font-medium text-gray-900">
<p class="text-3xl font-medium text-primary">
<%= format_money(budget.available_to_spend_money) %>
</p>
</div>

10
app/views/budgets/_budget_header.html.erb
View file

@ -7,7 +7,7 @@
<%= lucide_icon "chevron-left" %>
<% end %>
<% else %>
<%= lucide_icon "chevron-left", class: "text-gray-400" %>
<%= lucide_icon "chevron-left", class: "text-subdued" %>
<% end %>
<% if @next_budget %>
@ -15,14 +15,14 @@
<%= lucide_icon "chevron-right" %>
<% end %>
<% else %>
<%= lucide_icon "chevron-right", class: "text-gray-400" %>
<%= lucide_icon "chevron-right", class: "text-subdued" %>
<% end %>
</div>
<div data-controller="menu" data-menu-placement-value="bottom-start">
<%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-gray-50 rounded-md p-2" do %>
<span class="text-gray-900 font-medium"><%= @budget.name %></span>
<%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-gray-500" %>
<span class="text-primary font-medium"><%= @budget.name %></span>
<%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-secondary" %>
<% end %>
<div data-menu-target="content" class="hidden z-10">
@ -32,7 +32,7 @@
<div class="ml-auto">
<% if @budget.current? %>
<span class="border border-alpha-black-200 text-gray-900 text-sm font-medium px-3 py-2 rounded-lg">Today</span>
<span class="border border-secondary text-primary text-sm font-medium px-3 py-2 rounded-lg">Today</span>
<% else %>
<%= link_to "Today", budget_path(@latest_budget), class: "btn btn--outline" %>
<% end %>

4
app/views/budgets/_budget_nav.html.erb
View file

@ -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"

16
app/views/budgets/_budgeted_summary.html.erb
View file

@ -2,9 +2,9 @@
<div>
<div class="p-4 border-b border-gray-100">
<h3 class="text-sm text-gray-500 mb-2">Expected income</h3>
<h3 class="text-sm text-secondary mb-2">Expected income</h3>
<span class="inline-block mb-2 text-xl font-medium text-gray-900">
<span class="inline-block mb-2 text-xl font-medium text-primary">
<%= format_money(budget.expected_income_money) %>
</span>
@ -19,12 +19,12 @@
<% end %>
</div>
<div class="flex justify-between text-sm">
<p class="text-gray-500"><%= format_money(budget.actual_income_money) %> earned</p>
<p class="text-secondary"><%= format_money(budget.actual_income_money) %> earned</p>
<p class="font-medium">
<% if budget.remaining_expected_income.negative? %>
<span class="text-green-500"><%= format_money(budget.remaining_expected_income_money.abs) %> over</span>
<% else %>
<span class="text-gray-900"><%= format_money(budget.remaining_expected_income_money) %> left</span>
<span class="text-primary"><%= format_money(budget.remaining_expected_income_money) %> left</span>
<% end %>
</p>
</div>
@ -32,9 +32,9 @@
</div>
<div class="p-4">
<h3 class="text-sm text-gray-500 mb-2">Budgeted</h3>
<h3 class="text-sm text-secondary mb-2">Budgeted</h3>
<span class="inline-block mb-2 text-xl font-medium text-gray-900">
<span class="inline-block mb-2 text-xl font-medium text-primary">
<%= format_money(budget.budgeted_spending_money) %>
</span>
@ -49,12 +49,12 @@
<% end %>
</div>
<div class="flex justify-between text-sm">
<p class="text-gray-500"><%= format_money(budget.actual_spending_money) %> spent</p>
<p class="text-secondary"><%= format_money(budget.actual_spending_money) %> spent</p>
<p class="font-medium">
<% if budget.available_to_spend.negative? %>
<span class="text-red-500"><%= format_money(budget.available_to_spend_money.abs) %> over</span>
<% else %>
<span class="text-gray-900"><%= format_money(budget.available_to_spend_money) %> left</span>
<span class="text-primary"><%= format_money(budget.available_to_spend_money) %> left</span>
<% end %>
</p>
</div>

6
app/views/budgets/_over_allocation_warning.html.erb
View file

@ -2,12 +2,12 @@
<div class="flex flex-col gap-4 items-center justify-center h-full">
<%= lucide_icon "alert-triangle", class: "w-6 h-6 text-red-500" %>
<p class="text-gray-500 text-sm text-center">You have over-allocated your budget. Please fix your allocations.</p>
<p class="text-secondary text-sm text-center">You have over-allocated your budget. Please fix your allocations.</p>
<%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
<span class="text-gray-900 font-medium">
<span class="text-primary font-medium">
Fix allocations
</span>
<%= 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 %>
</div>

16
app/views/budgets/_picker.html.erb
View file

@ -5,25 +5,25 @@
<div class="flex items-center gap-2 justify-between">
<% 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 %>
<span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
<%= 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" %>
</span>
<% end %>
<span class="w-40 text-center px-3 py-2 border border-alpha-black-100 rounded-md" data-budget-picker-target="year">
<span class="w-40 text-center px-3 py-2 border border-tertiary rounded-md" data-budget-picker-target="year">
<%= year %>
</span>
<% 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 %>
<span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
<%= 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" %>
</span>
<% end %>
</div>
@ -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 %>
<span class="px-3 py-2 text-gray-400 rounded-md"><%= month_name %></span>
<span class="px-3 py-2 text-subdued rounded-md"><%= month_name %></span>
<% end %>
<% end %>
</div>

14
app/views/budgets/edit.html.erb
View file

@ -8,8 +8,8 @@
<div>
<div class="space-y-4">
<div class="text-center space-y-2">
<h1 class="text-3xl text-gray-900 font-medium">Setup your budget</h1>
<p class="text-gray-500 text-sm max-w-sm mx-auto">
<h1 class="text-3xl text-primary font-medium">Setup your budget</h1>
<p class="text-secondary text-sm max-w-sm mx-auto">
Enter your monthly earnings and planned spending below to setup your budget.
</p>
</div>
@ -20,11 +20,11 @@
<%= f.money_field :expected_income, label: "Expected income", required: true, disable_currency: true %>
<% if @budget.estimated_income && @budget.estimated_spending %>
<div class="border border-alpha-black-100 rounded-lg p-3 flex">
<%= lucide_icon "sparkles", class: "w-5 h-5 text-gray-500 shrink-0" %>
<div class="border border-tertiary rounded-lg p-3 flex">
<%= lucide_icon "sparkles", class: "w-5 h-5 text-secondary shrink-0" %>
<div class="ml-2 space-y-1 text-sm">
<h4 class="text-gray-900">Autosuggest income & spending budget</h4>
<p class="text-gray-500">
<h4 class="text-primary">Autosuggest income & spending budget</h4>
<p class="text-secondary">
This will be based on transaction history. AI can make mistakes, verify before continuing.
</p>
</div>
@ -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) }
} %>
<label for="auto_fill" class="maybe-switch"></label>
<label for="auto_fill" class="switch"></label>
</div>
</div>
<% end %>

8
app/views/budgets/show.html.erb
View file

@ -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"
) %>
</div>

4
app/views/categories/_category.html.erb
View file

@ -3,14 +3,14 @@
<div id="<%= dom_id(category) %>" class="flex justify-between items-center px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-white">
<div class="flex w-full items-center gap-2.5">
<% 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 } %>
</div>
<div class="justify-self-end">
<%= contextual_menu do %>
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>
<% if category.transactions.any? %>

4
app/views/categories/_category_list_group.html.erb
View file

@ -1,9 +1,9 @@
<%# locals: (title:, categories:) %>
<div class="rounded-xl bg-gray-25 space-y-1 p-1">
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
<p><%= title %></p>
<span class="text-gray-400">&middot;</span>
<span class="text-subdued">&middot;</span>
<p><%= categories.count %></p>
</div>

4
app/views/categories/_menu.html.erb
View file

@ -5,10 +5,10 @@
<%= render partial: "categories/badge", locals: { category: transaction.category } %>
</button>
<div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
<div class="w-80 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-80 text-sm font-semibold leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<%= turbo_frame_tag "category_dropdown", src: category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
<div class="p-6 flex items-center justify-center">
<p class="text-sm text-gray-500 animate-pulse"><%= t(".loading") %></p>
<p class="text-sm text-secondary animate-pulse"><%= t(".loading") %></p>
</div>
<% end %>
</div>

4
app/views/categories/index.html.erb
View file

@ -4,7 +4,7 @@
<section class="space-y-4">
<header class="flex items-center justify-between">
<h1 class="text-gray-900 text-xl font-medium"><%= t(".categories") %></h1>
<h1 class="text-primary text-xl font-medium"><%= t(".categories") %></h1>
<%= 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 %>
<div class="flex justify-center items-center py-20">
<div class="text-center flex flex-col items-center max-w-[500px]">
<p class="text-sm text-gray-500 mb-4"><%= t(".empty") %></p>
<p class="text-sm text-secondary mb-4"><%= t(".empty") %></p>
<div class="flex items-center gap-2">
<%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--primary" %>

10
app/views/category/dropdowns/_row.html.erb
View file

@ -13,20 +13,20 @@
class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
<span class="w-5 h-5">
<%= 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 %>
</span>
<% 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 %>
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<%= 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" %>
<span><%= t(".edit") %></span>
<% end %>

16
app/views/category/dropdowns/show.html.erb
View file

@ -2,12 +2,12 @@
<div class="flex flex-col relative" data-controller="list-filter">
<div class="grow p-1.5">
<div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
<input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
<input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div>
</div>
<div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
<div class="pb-2 pl-4 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
<div class="pb-2 pl-4 mr-2 text-secondary hidden" data-list-filter-target="emptyMessage">
<%= t(".no_categories") %>
</div>
<% if @categories.any? %>
@ -21,7 +21,7 @@
<% else %>
<div class="flex justify-center items-center py-12">
<div class="text-center flex flex-col items-center max-w-[500px]">
<p class="text-sm text-gray-500 font-normal mb-4"><%= t(".empty") %></p>
<p class="text-sm text-secondary font-normal mb-4"><%= t(".empty") %></p>
<%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--outline", data: { turbo_frame: :_top } %>
</div>
</div>
@ -34,7 +34,7 @@
method: :patch,
data: { turbo_frame: dom_id(@transaction.entry) },
params: { account_entry: { entryable_type: "Account::Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" do %>
class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-gray-100" do %>
<%= lucide_icon "minus", class: "w-5 h-5" %>
<%= t(".clear") %>
@ -43,7 +43,7 @@
<% unless @transaction.transfer? %>
<%= link_to new_account_transaction_transfer_match_path(@transaction.entry),
class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-gray-100",
data: { turbo_frame: "modal" } do %>
<%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
@ -51,7 +51,7 @@
<% end %>
<% end %>
<div class="flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2">
<div class="flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2">
<div class="flex items-center gap-2">
<%= form_with url: account_transaction_path(@transaction.entry),
method: :patch,
@ -59,7 +59,7 @@
<%= f.hidden_field "account_entry[excluded]", value: !@transaction.entry.excluded %>
<%= f.check_box "account_entry[excluded]",
checked: @transaction.entry.excluded,
class: "maybe-checkbox maybe-checkbox--light",
class: "checkbox checkbox--light",
data: { auto_submit_form_target: "auto", autosubmit_trigger_event: "change" } %>
<% end %>
</div>

16
app/views/import/cleans/show.html.erb
View file

@ -6,12 +6,12 @@
<div class="space-y-4 mx-auto max-w-5xl">
<div class="text-center space-y-2 max-w-[400px] mx-auto mb-4">
<h2 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h2>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<h2 class="text-3xl text-primary font-medium"><%= t(".title") %></h2>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<% if @import.cleaned? %>
<div class="bg-white border border-alpha-black-100 rounded-lg p-3 flex items-center justify-between">
<div class="bg-white border border-tertiary rounded-lg p-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<%= lucide_icon "check-circle", class: "w-4 h-4 text-green-500" %>
<p class="text-green-500">Your data has been cleaned</p>
@ -20,14 +20,14 @@
<%= link_to "Next step", import_confirm_path(@import), class: "btn btn--primary" %>
</div>
<% else %>
<div class="bg-white border border-alpha-black-100 rounded-lg p-3 flex items-center justify-between">
<div class="bg-white border border-tertiary rounded-lg p-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<%= lucide_icon "alert-triangle", class: "w-4 h-4 text-red-500" %>
<p class="text-red-500 text-sm"><%= t(".errors_notice") %></p>
</div>
<div class="flex justify-center">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-gray-900 font-medium">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
<%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg #{params[:view] != 'errors' ? 'bg-white' : ''}" %>
<%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg #{params[:view] == 'errors' ? 'bg-white' : ''}" %>
</div>
@ -37,13 +37,13 @@
<div class="pb-12">
<div class="bg-gray-25 rounded-xl p-1 mb-6">
<div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, 1fr)" class="grid items-center uppercase text-xs font-medium text-gray-500 py-3">
<div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, 1fr)" class="grid items-center uppercase text-xs font-medium text-secondary py-3">
<% @import.column_keys.each do |key| %>
<div class="px-5"><%= import_col_label(key) %></div>
<% end %>
</div>
<div class="bg-white border border-alpha-black-200 rounded-xl shadow-xs divide-y divide-alpha-black-200">
<div class="bg-white border border-secondary rounded-xl shadow-xs divide-y divide-alpha-black-200">
<% @rows.each do |row| %>
<%= render "import/rows/form", row: row %>
<% end %>
@ -52,7 +52,7 @@
</div>
<div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full p-12">
<div class="border border-alpha-black-100 rounded-lg p-3 max-w-2xl mx-auto bg-white shadow-xs">
<div class="border border-tertiary rounded-lg p-3 max-w-2xl mx-auto bg-white shadow-xs">
<%= render "application/pagination", pagy: @pagy %>
</div>
</div>

4
app/views/import/configurations/_mint_import.html.erb
View file

@ -1,8 +1,8 @@
<%# locals: (import:) %>
<div class="flex items-center justify-between border border-alpha-black-200 rounded-lg bg-green-500/5 p-5 gap-4">
<div class="flex items-center justify-between border border-secondary rounded-lg bg-green-500/5 p-5 gap-4">
<%= lucide_icon("check-circle", class: "w-5 h-5 shrink-0 text-green-500") %>
<p class="text-sm text-gray-900 italic">We have pre-configured your Mint import for you. Please proceed to the next step.</p>
<p class="text-sm text-primary italic">We have pre-configured your Mint import for you. Please proceed to the next step.</p>
</div>
<%= styled_form_with model: @import, url: import_configuration_path(@import), scope: :import, method: :patch, class: "space-y-2" do |form| %>

4
app/views/import/configurations/show.html.erb
View file

@ -7,8 +7,8 @@
<div>
<div class="space-y-4">
<div class="text-center space-y-2">
<h1 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h1>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div class="mx-auto max-w-lg">

6
app/views/import/confirms/_mappings.html.erb
View file

@ -5,13 +5,13 @@
<% if mapping_class == Import::AccountMapping %>
<% if import.requires_account? %>
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-gray-500 bg-red-100 border border-red-200 rounded-lg w-[650px]">
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-secondary bg-red-100 border border-red-200 rounded-lg w-[650px]">
<%= tag.p t(".no_accounts"), class: "text-sm" %>
<%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
</div>
<% elsif import.has_unassigned_account? %>
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-gray-500 bg-yellow-100 border border-yellow-200 rounded-lg w-[650px]">
<div class="flex items-center justify-between p-4 mb-4 gap-4 text-secondary bg-yellow-100 border border-yellow-200 rounded-lg w-[650px]">
<%= tag.p t(".unassigned_account"), class: "text-sm" %>
<%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
@ -21,7 +21,7 @@
<div class="space-y-4">
<div class="bg-gray-25 rounded-xl p-1 space-y-1 w-[650px]">
<div class="grid grid-cols-3 gap-2 text-xs font-medium text-gray-500 uppercase px-5 py-3">
<div class="grid grid-cols-3 gap-2 text-xs font-medium text-secondary uppercase px-5 py-3">
<p><%= t(".csv_mapping_label", mapping: mapping_label(mapping_class)) %></p>
<p><%= t(".maybe_mapping_label", mapping: mapping_label(mapping_class)) %></p>
<p class="justify-self-end"><%= t(".rows_label") %></p>

4
app/views/import/confirms/show.html.erb
View file

@ -19,10 +19,10 @@
</div>
<div class="text-center space-y-2">
<h1 class="text-3xl text-gray-900 font-medium">
<h1 class="text-3xl text-primary font-medium">
<%= t(".#{step_mapping_class.name.demodulize.underscore}_title", import_type: @import.type.underscore.humanize) %>
</h1>
<p class="text-gray-500 text-sm">
<p class="text-secondary text-sm">
<%= t(".#{step_mapping_class.name.demodulize.underscore}_description", import_type: @import.type.underscore.humanize) %>
</p>
</div>

8
app/views/import/uploads/show.html.erb
View file

@ -7,13 +7,13 @@
<div class="space-y-12">
<div class="space-y-4 mx-auto max-w-md">
<div class="text-center space-y-2">
<h1 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h1>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div data-controller="tabs" data-tabs-active-class="bg-white" data-tabs-default-tab-value="csv-paste-tab">
<div class="flex justify-center mb-4">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-gray-900 font-medium">
<div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
<button type="button" data-id="csv-paste-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
<button type="button" data-id="csv-upload-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
</div>
@ -50,7 +50,7 @@
</div>
<div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-7xl">
<div class="text-gray-500 p-2 mb-2">
<div class="text-secondary p-2 mb-2">
<div class="flex gap-2 mb-2">
<%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
<p class="text-sm"><%= t(".instructions_1") %></p>

2
app/views/imports/_empty.html.erb
View file

@ -1,6 +1,6 @@
<div class="flex justify-center items-center py-20">
<div class="text-center flex flex-col items-center max-w-[300px] gap-4">
<p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".message") %></p>
<p class="text-primary mb-1 font-medium text-sm"><%= t(".message") %></p>
<%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<span><%= t(".new") %></span>

4
app/views/imports/_failure.html.erb
View file

@ -7,8 +7,8 @@
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Import failed</h1>
<p class="text-sm text-gray-500">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
<h1 class="font-medium text-primary text-center text-3xl">Import failed</h1>
<p class="text-sm text-secondary">Please check that your file format, for any errors and that all required fields are filled, then come back and try again.</p>
</div>
<div>

10
app/views/imports/_import.html.erb
View file

@ -1,12 +1,12 @@
<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-4 border-b last:border-b-0 border-alpha-black-50">
<div class="flex items-center gap-2 mb-1">
<%= link_to import_path(import), class: "text-sm text-gray-900 hover:underline" do %>
<%= link_to import_path(import), class: "text-sm text-primary hover:underline" do %>
<%= t(".label", type: import.type.titleize, datetime: import.updated_at.strftime("%b %-d, %Y at %l:%M %p")) %>
<% end %>
<% if import.pending? %>
<span class="px-1 py text-xs rounded-full bg-gray-500/5 text-gray-500 border border-alpha-black-50">
<span class="px-1 py text-xs rounded-full bg-gray-500/5 text-secondary border border-alpha-black-50">
<%= t(".in_progress") %>
</span>
<% elsif import.importing? %>
@ -33,10 +33,10 @@
</div>
<%= contextual_menu do %>
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<%= link_to import_path(import),
class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "eye", class: "w-5 h-5 text-gray-500" %>
class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg" do %>
<%= lucide_icon "eye", class: "w-5 h-5 text-secondary" %>
<span><%= t(".view") %></span>
<% end %>

6
app/views/imports/_importing.html.erb
View file

@ -3,12 +3,12 @@
<div class="h-full flex flex-col justify-center items-center">
<div class="space-y-6 max-w-sm">
<div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
<%= lucide_icon "loader", class: "animate-pulse w-5 h-5 text-gray-500" %>
<%= lucide_icon "loader", class: "animate-pulse w-5 h-5 text-secondary" %>
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Import in progress</h1>
<p class="text-sm text-gray-500">Your import is in progress. Check the imports menu for status updates or click 'Check Status' to refresh the page for updates. Feel free to continue using the app.</p>
<h1 class="font-medium text-primary text-center text-3xl">Import in progress</h1>
<p class="text-sm text-secondary">Your import is in progress. Check the imports menu for status updates or click 'Check Status' to refresh the page for updates. Feel free to continue using the app.</p>
</div>
<div class="space-y-2">

4
app/views/imports/_nav.html.erb
View file

@ -14,9 +14,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"

6
app/views/imports/_ready.html.erb
View file

@ -1,13 +1,13 @@
<%# locals: (import:) %>
<div class="text-center space-y-2 mb-4 mx-auto max-w-md">
<h1 class="text-3xl text-gray-900 font-medium"><%= t(".title") %></h1>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div class="mx-auto max-w-2xl space-y-4">
<div class="bg-gray-25 rounded-xl p-1 space-y-1">
<div class="flex justify-between items-center text-xs font-medium text-gray-500 uppercase px-5 py-3">
<div class="flex justify-between items-center text-xs font-medium text-secondary uppercase px-5 py-3">
<p>item</p>
<p class="justify-self-end">count</p>
</div>

4
app/views/imports/_revert_failure.html.erb
View file

@ -7,8 +7,8 @@
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Reverting import failed</h1>
<p class="text-sm text-gray-500">Please try again or contact support.</p>
<h1 class="font-medium text-primary text-center text-3xl">Reverting import failed</h1>
<p class="text-sm text-secondary">Please try again or contact support.</p>
</div>
<div>

4
app/views/imports/_success.html.erb
View file

@ -7,8 +7,8 @@
</div>
<div class="text-center space-y-2">
<h1 class="font-medium text-gray-900 text-center text-3xl">Import successful</h1>
<p class="text-sm text-gray-500">Your imported data has been successfully added to the app and is now ready for use.</p>
<h1 class="font-medium text-primary text-center text-3xl">Import successful</h1>
<p class="text-sm text-secondary">Your imported data has been successfully added to the app and is now ready for use.</p>
</div>
<div>

4
app/views/imports/_table.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (headers: [], rows: [], caption: nil) %>
<div class="overflow-x-auto">
<div class="border border-alpha-black-200 rounded-md shadow-xs text-sm bg-white w-full">
<div class="border border-secondary rounded-md shadow-xs text-sm bg-white w-full">
<div class="grid border-b border-b-alpha-black-200" style="grid-template-columns: repeat(<%= headers.length %>, minmax(0, 1fr))">
<% headers.each_with_index do |header, index| %>
<div class="
@ -29,7 +29,7 @@
<% end %>
<% if caption %>
<div class="px-3 py-2.5 text-center text-xs text-gray-900 rounded-b-md italic bg-gray-25 overflow-x-auto">
<div class="px-3 py-2.5 text-center text-xs text-primary rounded-b-md italic bg-gray-25 overflow-x-auto">
<%= caption %>
</div>
<% end %>

4
app/views/imports/index.html.erb
View file

@ -4,7 +4,7 @@
<div class="space-y-4">
<div class="flex items-center justify-between">
<h1 class="text-xl font-medium text-gray-900"><%= t(".title") %></h1>
<h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>
<%= link_to new_import_path, class: "btn btn--primary flex items-center gap-2", data: { turbo_frame: :modal } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
@ -16,7 +16,7 @@
<%= render partial: "imports/empty" %>
<% else %>
<div class="rounded-xl bg-gray-25 p-1">
<h2 class="uppercase px-4 py-2 text-gray-500 text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
<h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
<div class="border border-alpha-gray-100 rounded-lg bg-white shadow-xs">
<%= render partial: "imports/import", collection: @imports.ordered %>

28
app/views/imports/new.html.erb
View file

@ -2,17 +2,17 @@
<div class="p-4 space-y-4 max-w-[420px]">
<div class="space-y-2">
<div class="flex justify-between items-center">
<h2 class="font-medium text-gray-900"><%= t(".title") %></h2>
<h2 class="font-medium text-primary"><%= t(".title") %></h2>
<button data-action="modal#close" tabindex="-1">
<%= lucide_icon("x", class: "w-5 h-5 text-gray-900") %>
<%= lucide_icon("x", class: "w-5 h-5 text-primary") %>
</button>
</div>
<p class="text-gray-500 text-sm"><%= t(".description") %></p>
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div class="rounded-xl bg-gray-25 p-1">
<h3 class="uppercase text-gray-500 text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
<h3 class="uppercase text-secondary text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
<ul class="bg-white border border-alpha-black-25 rounded-lg shadow-xs">
<li>
<% if @pending_import.present? && (params[:type].nil? || params[:type] == @pending_import.type) %>
@ -21,11 +21,11 @@
<div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".resume", type: @pending_import.type.titleize) %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -41,11 +41,11 @@
<div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".import_transactions") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -61,11 +61,11 @@
<div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".import_portfolio") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -81,11 +81,11 @@
<div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center">
<%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
</div>
<span class="text-sm text-gray-900 group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-gray-700">
<%= t(".import_accounts") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">
@ -99,11 +99,11 @@
<%= button_to imports_path(import: { type: "MintImport" }), class: "flex items-center justify-between p-4 group w-full", data: { turbo: false } do %>
<div class="flex items-center gap-2">
<%= image_tag("mint-logo.jpeg", alt: "Mint logo", class: "w-8 h-8 rounded-md") %>
<span class="text-sm text-gray-900">
<span class="text-sm text-primary">
<%= t(".import_mint") %>
</span>
</div>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-secondary") %>
<% end %>
<div class="pl-14 pr-3">

2
app/views/investments/_value_tooltip.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (balance:, holdings:, cash:) %>
<div data-controller="tooltip" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
<%= lucide_icon("info", class: "w-4 h-4 shrink-0 text-gray-500") %>
<%= lucide_icon("info", class: "w-4 h-4 shrink-0 text-secondary") %>
<div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
<div class="text-white">
<%= t(".total_value_tooltip") %>

2
app/views/invite_codes/_invite_code.html.erb
View file

@ -4,7 +4,7 @@
<div>
<span data-clipboard-target="source" class="text-sm font-medium"><%= invite_code.token %></span>
</div>
<button data-action="clipboard#copy" class="shrink-0 z-10 inline-flex items-center px-1 text-sm text-gray-500 font-sm text-center" type="button">
<button data-action="clipboard#copy" class="shrink-0 z-10 inline-flex items-center px-1 text-sm text-secondary font-sm text-center" type="button">
<span data-clipboard-target="iconDefault">
<%= lucide_icon "copy", class: "w-5 h-5" %>
</span>

4
app/views/invite_codes/index.html.erb
View file

@ -4,9 +4,9 @@
<%= render @invite_codes %>
<% else %>
<div class="flex flex-col items-center w-full h-64 bg-white text-center justify-center">
<%= lucide_icon "binary", class: "w-6 h-6 text-sm text-gray-500" %>
<%= lucide_icon "binary", class: "w-6 h-6 text-sm text-secondary" %>
<p class="text-base pt-4"><%= t(".no_invite_codes") %></p>
<p class="text-sm text-gray-500 pt-2 w-2/3"><%= t(".invite_code_description") %></p>
<p class="text-sm text-secondary pt-2 w-2/3"><%= t(".invite_code_description") %></p>
</div>
<% end %>
<% end %>

3
app/views/layouts/_footer.html.erb
View file

@ -1,6 +1,5 @@
<footer class="p-6">
<div class="space-y-2 text-center text-xs text-gray-500">
<div class="space-y-2 text-center text-xs text-secondary">
<p>&copy; <%= Date.current.year %>, Maybe Finance, Inc.</p>
<p><%= link_to t(".privacy_policy"), "https://maybefinance.com/privacy", class: "underline hover:text-gray-600" %> &bull; <%= link_to t(".terms_of_service"), "https://maybefinance.com/tos", class: "underline hover:text-gray-600" %></p>
</div>

44
app/views/layouts/_sidebar.html.erb
View file

@ -15,23 +15,23 @@
</div>
<div class="overflow-hidden text-ellipsis">
<span class="text-gray-900 font-medium text-sm"><%= Current.user.display_name %></span>
<span class="text-primary font-medium text-sm"><%= Current.user.display_name %></span>
<% if Current.user.display_name != Current.user.email %>
<span class="text-gray-500 text-sm"><%= Current.user.email %></span>
<span class="text-secondary text-sm"><%= Current.user.email %></span>
<% end %>
</div>
</div>
<div class="border-t border-b border-alpha-black-100 p-1">
<div class="border-t border-b border-tertiary p-1">
<%= link_to settings_profile_path(return_to: request.fullpath), class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("settings", class: "w-5 h-5 text-gray-500 shrink-0") %>
<span class="text-gray-900 text-sm">Settings</span>
<%= lucide_icon("settings", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Settings</span>
<% end %>
<div class="flex justify-between items-center gap-2">
<div class="flex items-center gap-2 rounded-lg px-3 py-2">
<%= lucide_icon("app-window", class: "w-5 h-5 text-gray-500 shrink-0") %>
<%= lucide_icon("app-window", class: "w-5 h-5 text-secondary shrink-0") %>
<div>
<span class="text-gray-900 text-sm">Demo mode</span>
<span class="text-gray-500 text-xs block">Coming soon...</span>
<span class="text-primary text-sm">Demo mode</span>
<span class="text-secondary text-xs block">Coming soon...</span>
</div>
</div>
<%# TODO: This will be a form toggle when implemented %>
@ -40,24 +40,24 @@
</div>
</div>
</div>
<div class="border-t border-b border-alpha-black-100 p-1">
<div class="border-t border-b border-tertiary p-1">
<%= link_to changelog_path, class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("box", class: "w-5 h-5 text-gray-500 shrink-0") %>
<span class="text-gray-900 text-sm">Changelog</span>
<%= lucide_icon("box", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Changelog</span>
<% end %>
<%= link_to feedback_path, class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("megaphone", class: "w-5 h-5 text-gray-500 shrink-0") %>
<span class="text-gray-900 text-sm">Feedback</span>
<%= lucide_icon("megaphone", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Feedback</span>
<% end %>
<% if self_hosted? %>
<%= link_to "https://link.maybe.co/discord", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-gray-500 shrink-0") %>
<span class="text-gray-900 text-sm">Contact</span>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Contact</span>
<% end %>
<% else %>
<%= link_to "mailto:hello@maybefinance.com", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2", onclick: "Intercom('showNewMessage'); return false;" do %>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-gray-500 shrink-0") %>
<span class="text-gray-900 text-sm">Contact</span>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Contact</span>
<% end %>
<% end %>
</div>
@ -88,8 +88,8 @@
</nav>
<div class="flex flex-col mt-6">
<div class="flex items-center justify-between px-3 py-2 mb-2">
<div class="flex items-center gap-2 text-xs uppercase text-gray-500">
<%= link_to accounts_path, class: "text-xs uppercase text-gray-500 font-bold tracking-wide" do %>
<div class="flex items-center gap-2 text-xs uppercase text-secondary">
<%= link_to accounts_path, class: "text-xs uppercase text-secondary font-bold tracking-wide" do %>
<%= t(".portfolio") %>
<% end %>
<span class="font-bold tracking-wide">&bull;</span>
@ -98,8 +98,8 @@
<%= period_select form: form, selected: "last_30_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-hidden focus:ring-0" %>
<% end %>
</div>
<%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-gray-900 flex items-center rounded p-1", title: t(".new_account"), data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-gray-500") %>
<%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-primary flex items-center rounded p-1", title: t(".new_account"), data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
<% end %>
</div>
@ -109,7 +109,7 @@
<%= render "accounts/account_list", group: group %>
<% end %>
<% else %>
<%= link_to new_account_path, class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= link_to new_account_path, class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-secondary text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<%= tag.p t(".new_account") %>
<% end %>

2
app/views/layouts/application.html.erb
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="h-full <%= @os %>" lang="en">
<html class="font-sans text-primary h-full <%= @os %>" lang="en">
<head>
<title><%= content_for(:title) || "Maybe" %></title>

6
app/views/layouts/auth.html.erb
View file

@ -7,17 +7,17 @@
</div>
<div class="space-y-2">
<h2 class="text-3xl font-medium text-gray-900 text-center">
<h2 class="text-3xl font-medium text-primary text-center">
<%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
</h2>
<% if controller_name == "sessions" %>
<p class="text-sm text-center">
<%= tag.span t(".no_account"), class: "text-gray-500" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-gray-900 hover:underline transition" %>
<%= tag.span t(".no_account"), class: "text-secondary" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>
</p>
<% elsif controller_name == "registrations" %>
<p class="text-sm text-center text-gray-600">
<%= t(".existing_account") %> <%= link_to t(".sign_in"), new_session_path, class: "font-medium text-gray-900 hover:underline transition" %>
<%= t(".existing_account") %> <%= link_to t(".sign_in"), new_session_path, class: "font-medium text-primary hover:underline transition" %>
</p>
<% end %>
</div>

4
app/views/layouts/imports.html.erb
View file

@ -2,7 +2,7 @@
<div class="flex flex-col h-dvh">
<header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || imports_path do %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-gray-500" %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
<% end %>
<nav>
@ -10,7 +10,7 @@
</nav>
<%= link_to imports_path do %>
<%= lucide_icon "x", class: "text-gray-500 w-5 h-5" %>
<%= lucide_icon "x", class: "text-secondary w-5 h-5" %>
<% end %>
</header>

4
app/views/layouts/wizard.html.erb
View file

@ -2,7 +2,7 @@
<div class="flex flex-col h-dvh">
<header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || root_path do %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-gray-500" %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
<% end %>
<nav>
@ -10,7 +10,7 @@
</nav>
<%= link_to content_for(:cancel_path) || root_path do %>
<%= lucide_icon "x", class: "text-gray-500 w-5 h-5" %>
<%= lucide_icon "x", class: "text-secondary w-5 h-5" %>
<% end %>
</header>

4
app/views/merchants/_merchant.html.erb
View file

@ -10,13 +10,13 @@
<%= render partial: "shared/color_avatar", locals: { name: merchant.name, color: merchant.color } %>
<% end %>
<p class="text-gray-900 text-sm truncate">
<p class="text-primary text-sm truncate">
<%= merchant.name %>
</p>
</div>
<div class="justify-self-end">
<%= contextual_menu do %>
<div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<%= contextual_menu_modal_action_item t(".edit"), edit_merchant_path(merchant) %>
<%= contextual_menu_destructive_item t(".delete"),

8
app/views/merchants/index.html.erb
View file

@ -4,7 +4,7 @@
<section class="space-y-4">
<header class="flex items-center justify-between">
<h1 class="text-gray-900 text-xl font-medium"><%= t(".title") %></h1>
<h1 class="text-primary text-xl font-medium"><%= t(".title") %></h1>
<%= link_to new_merchant_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" %>
@ -15,9 +15,9 @@
<div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
<% if @merchants.any? %>
<div class="rounded-xl bg-gray-25 space-y-1 p-1">
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
<div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
<p><%= t(".title") %></p>
<span class="text-gray-400">&middot;</span>
<span class="text-subdued">&middot;</span>
<p><%= @merchants.count %></p>
</div>
@ -30,7 +30,7 @@
<% else %>
<div class="flex justify-center items-center py-20">
<div class="text-center flex flex-col items-center max-w-[300px]">
<p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".empty") %></p>
<p class="text-primary mb-1 font-medium text-sm"><%= t(".empty") %></p>
<%= link_to new_merchant_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<span><%= t(".new") %></span>

5
app/views/mfa/backup_codes.html.erb
View file

@ -8,7 +8,7 @@
<% end %>
<div class="space-y-4">
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
<%= settings_section title: t(".backup_codes_title"), subtitle: t(".backup_codes_description") do %>
<div class="space-y-6">
<div class="grid grid-cols-2 gap-4">
@ -26,4 +26,5 @@
<% end %>
<%= settings_nav_footer %>
</div>
</div>

12
app/views/mfa/new.html.erb
View file

@ -8,7 +8,7 @@
<% end %>
<div class="space-y-4">
<h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
<h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
<%= settings_section title: t(".scan_title"), subtitle: t(".scan_description") do %>
<div class="space-y-6">
<div>
@ -16,8 +16,8 @@
</div>
<div class="mt-6">
<h3 class="text-sm font-medium text-gray-900"><%= t(".secret_title") %></h3>
<div class="mt-2 text-sm text-gray-500">
<h3 class="text-sm font-medium text-primary"><%= t(".secret_title") %></h3>
<div class="mt-2 text-sm text-secondary">
<p><%= t(".secret_description") %></p>
</div>
<div class="mt-2 flex items-center gap-2" data-controller="clipboard">
@ -27,7 +27,7 @@
autocomplete="off"
value="<%= Current.user.otp_secret %>"
class="text-sm bg-gray-50 px-2 py-1 rounded border border-gray-200 w-96 font-mono">
<button data-action="clipboard#copy" class="text-gray-500 hover:text-gray-700">
<button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
<span data-clipboard-target="iconDefault">
<%= lucide_icon "copy", class: "w-5 h-5" %>
</span>
@ -39,8 +39,8 @@
</div>
<div>
<h3 class="text-lg font-medium leading-6 text-gray-900"><%= t(".verify_title") %></h3>
<div class="mt-2 text-sm text-gray-500">
<h3 class="text-lg font-medium leading-6 text-primary"><%= t(".verify_title") %></h3>
<div class="mt-2 text-sm text-secondary">
<p><%= t(".verify_description") %></p>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show more