Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-08 23:15:24 +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>