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

feature(dark mode): misc design fixes (#2215)

Browse source 
* Fix category dark mode styles

* Fix sidebar account tab states

* Fix dashboard balance sheet group styles

* Fix budget dark mode styles

* Fix chart gradient split

* Fix prose styles in dark mode

* Add back chat nav id for tests
This commit is contained in:
Zach Gollwitzer 2025-05-07 09:26:06 -04:00 • committed by GitHub
parent c26a7dd2dd
commit fb7107d614
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 254 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

68
app/views/accounts/_account_sidebar_tabs.html.erb
View file

@ -21,16 +21,17 @@
</details>
<% end %>
<%= render TabsComponent.new(active_tab: active_account_group_tab, url_param_key: "account_group_tab", testid: "account-sidebar-tabs") do |tabs| %>
<% tabs.with_nav do |nav| %>
<% nav.with_btn(id: "assets", label: "Assets") %>
<% nav.with_btn(id: "debts", label: "Debts") %>
<% nav.with_btn(id: "all", label: "All") %>
<% end %>
<div data-controller="sidebar-tabs">
<%= render TabsComponent.new(active_tab: active_account_group_tab, url_param_key: "account_group_tab", testid: "account-sidebar-tabs") do |tabs| %>
<% tabs.with_nav do |nav| %>
<% nav.with_btn(id: "assets", label: "Assets") %>
<% nav.with_btn(id: "debts", label: "Debts") %>
<% nav.with_btn(id: "all", label: "All") %>
<% end %>
<% tabs.with_panel(tab_id: "assets") do %>
<div class="space-y-2">
<%= render LinkComponent.new(
<% tabs.with_panel(tab_id: "assets") do %>
<div class="space-y-2">
<%= render LinkComponent.new(
text: "New asset",
variant: "ghost",
href: new_account_path(step: "method_select", classification: "asset"),
@ -40,17 +41,17 @@
class: "justify-start"
) %>
<div>
<% family.balance_sheet.account_groups("asset").each do |group| %>
<%= render "accounts/accountable_group", account_group: group %>
<% end %>
<div>
<% family.balance_sheet.account_groups("asset").each do |group| %>
<%= render "accounts/accountable_group", account_group: group %>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
<% tabs.with_panel(tab_id: "debts") do %>
<div class="space-y-2">
<%= render LinkComponent.new(
<% tabs.with_panel(tab_id: "debts") do %>
<div class="space-y-2">
<%= render LinkComponent.new(
text: "New debt",
variant: "ghost",
href: new_account_path(step: "method_select", classification: "liability"),
@ -60,17 +61,17 @@
class: "justify-start"
) %>
<div>
<% family.balance_sheet.account_groups("liability").each do |group| %>
<%= render "accounts/accountable_group", account_group: group %>
<% end %>
<div>
<% family.balance_sheet.account_groups("liability").each do |group| %>
<%= render "accounts/accountable_group", account_group: group %>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
<% tabs.with_panel(tab_id: "all") do %>
<div class="space-y-2">
<%= render LinkComponent.new(
<% tabs.with_panel(tab_id: "all") do %>
<div class="space-y-2">
<%= render LinkComponent.new(
text: "New account",
variant: "ghost",
full_width: true,
@ -80,12 +81,13 @@
class: "justify-start"
) %>
<div>
<% family.balance_sheet.account_groups.each do |group| %>
<%= render "accounts/accountable_group", account_group: group %>
<% end %>
<div>
<% family.balance_sheet.account_groups.each do |group| %>
<%= render "accounts/accountable_group", account_group: group %>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>

30
app/views/accounts/_accountable_group.html.erb
View file

@ -1,6 +1,6 @@
<%# locals: (account_group:) %>
<%= render DisclosureComponent.new(title: account_group.name, align: :left) do |disclosure| %>
<%= render DisclosureComponent.new(title: account_group.name, align: :left, open: account_group.accounts.any? { |account| page_active?(account_path(account)) }) do |disclosure| %>
<% disclosure.with_summary_content do %>
<div class="ml-auto text-right grow">
<%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>
@ -15,7 +15,13 @@
<div class="space-y-1">
<% account_group.accounts.each do |account| %>
<%= link_to account_path(account), class: "block flex items-center gap-2 px-3 py-2 hover:bg-surface-hover", title: account.name do %>
<%= link_to account_path(account),
class: class_names(
"block flex items-center gap-2 px-3 py-2 rounded-lg",
page_active?(account_path(account)) ? "bg-container" : "hover:bg-surface-hover"
),
data: { sidebar_tabs_target: "account", action: "click->sidebar-tabs#select" },
title: account.name do %>
<%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
<div class="min-w-0 grow">
@ -36,13 +42,15 @@
<% end %>
</div>
<%= render LinkComponent.new(
href: new_polymorphic_path(account_group.key, step: "method_select"),
text: "New #{account_group.name.downcase.singularize}",
icon: "plus",
full_width: true,
variant: "ghost",
frame: :modal,
class: "justify-start"
) %>
<div class="my-2">
<%= render LinkComponent.new(
href: new_polymorphic_path(account_group.key, step: "method_select"),
text: "New #{account_group.name.downcase.singularize}",
icon: "plus",
full_width: true,
variant: "ghost",
frame: :modal,
class: "justify-start"
) %>
</div>
<% end %>

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

@ -15,7 +15,7 @@
<div class="rounded-md h-1.5 bg-green-500" style="width: <%= budget.surplus_percent %>%"></div>
<% else %>
<div class="rounded-md h-1.5 bg-green-500" style="width: <%= budget.actual_income_percent %>%"></div>
<div class="rounded-md h-1.5 bg-gray-100" style="width: <%= 100 - budget.actual_income_percent %>%"></div>
<div class="rounded-md h-1.5 bg-surface-inset" style="width: <%= 100 - budget.actual_income_percent %>%"></div>
<% end %>
</div>
<div class="flex justify-between text-sm">
@ -41,18 +41,18 @@
<div>
<div class="flex h-1.5 mb-3 gap-1">
<% if budget.available_to_spend.negative? %>
<div class="rounded-md h-1.5 bg-gray-900" style="width: <%= 100 - budget.overage_percent %>%"></div>
<div class="rounded-md h-1.5 bg-red-500" style="width: <%= budget.overage_percent %>%"></div>
<div class="rounded-md h-1.5 bg-inverse" style="width: <%= 100 - budget.overage_percent %>%"></div>
<div class="rounded-md h-1.5 bg-destructive" style="width: <%= budget.overage_percent %>%"></div>
<% else %>
<div class="rounded-md h-1.5 bg-gray-900" style="width: <%= budget.percent_of_budget_spent %>%"></div>
<div class="rounded-md h-1.5 bg-gray-100" style="width: <%= 100 - budget.percent_of_budget_spent %>%"></div>
<div class="rounded-md h-1.5 bg-inverse" style="width: <%= budget.percent_of_budget_spent %>%"></div>
<div class="rounded-md h-1.5 bg-surface-inset" style="width: <%= 100 - budget.percent_of_budget_spent %>%"></div>
<% end %>
</div>
<div class="flex justify-between text-sm">
<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>
<span class="text-destructive"><%= format_money(budget.available_to_spend_money.abs) %> over</span>
<% else %>
<span class="text-primary"><%= format_money(budget.available_to_spend_money) %> left</span>
<% end %>

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

@ -16,31 +16,26 @@
</div>
<div>
<% if @budget.initialized? && @budget.available_to_allocate.positive? %>
<div class="flex gap-2 mb-2 rounded-lg bg-alpha-black-25 p-1">
<% base_classes = "rounded-md px-2 py-1 flex-1 text-center" %>
<% selected_tab = params[:tab].presence || "budgeted" %>
<%= render TabsComponent.new(active_tab: params[:tab].presence || "budgeted") do |tabs| %>
<% tabs.with_nav do |nav| %>
<% nav.with_btn(id: "budgeted", label: "Budgeted") %>
<% nav.with_btn(id: "actuals", label: "Actual") %>
<% end %>
<%= link_to "Budgeted",
budget_path(@budget, tab: "budgeted"),
class: class_names(
base_classes,
"bg-container shadow-xs text-primary": selected_tab == "budgeted",
"text-secondary": selected_tab != "budgeted"
) %>
<% tabs.with_panel(tab_id: "budgeted") do %>
<div class="bg-container rounded-xl shadow-border-xs">
<%= render "budgets/budgeted_summary", budget: @budget %>
</div>
<% end %>
<%= link_to "Actual",
budget_path(@budget, tab: "actuals"),
class: class_names(
base_classes,
"bg-container shadow-xs text-primary": selected_tab == "actuals",
"text-secondary": selected_tab != "actuals"
) %>
</div>
<div class="bg-container rounded-xl shadow-border-xs">
<%= render selected_tab == "budgeted" ? "budgets/budgeted_summary" : "budgets/actuals_summary", budget: @budget %>
</div>
<% tabs.with_panel(tab_id: "actuals") do %>
<div class="bg-container rounded-xl shadow-border-xs">
<%= render "budgets/actuals_summary", budget: @budget %>
</div>
<% end %>
<% end %>
<% else %>
<div class="bg-container rounded-xl shadow-border-xs">
<%= render "budgets/actuals_summary", budget: @budget %>

6
app/views/categories/_badge.html.erb
View file

@ -2,10 +2,10 @@
<% category ||= Category.uncategorized %>
<div>
<span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate"
<span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate focus-visible:outline-none focus-visible:ring-0"
style="
background-color: color-mix(in srgb, <%= category.color %> 5%, white);
border-color: color-mix(in srgb, <%= category.color %> 30%, white);
background-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
border-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
color: <%= category.color %>;">
<% if category.lucide_icon.present? %>
<%= icon category.lucide_icon, size: "sm", color: "current" %>

8
app/views/categories/_form.html.erb
View file

@ -7,7 +7,7 @@
<%= render partial: "color_avatar", locals: { category: category } %>
<details data-category-target="details">
<summary class="cursor-pointer absolute -bottom-2 -right-2 flex justify-center items-center bg-gray-50 border-2 w-7 h-7 border-white rounded-full text-gray-500">
<summary class="cursor-pointer absolute -bottom-2 -right-2 flex justify-center items-center bg-surface-inset hover:bg-surface-inset-hover border-2 w-7 h-7 border-subdued rounded-full text-secondary">
<%= icon("pen", size: "sm") %>
</summary>
@ -19,7 +19,7 @@
<% Category::COLORS.each do |color| %>
<label class="relative">
<%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->category#handleColorChange" } %>
<div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
<div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-500" style="background-color: <%= color %>"></div>
</label>
<% end %>
<label class="relative">
@ -41,12 +41,12 @@
</div>
<div class="flex flex-wrap gap-2 justify-center flex-col w-87">
<h4 class="text-gray-500 text-sm">Icon</h4>
<h4 class="text-secondary text-sm">Icon</h4>
<div class="flex flex-wrap gap-0.5">
<% Category.icon_codes.each do |icon| %>
<label class="relative">
<%= f.radio_button :lucide_icon, icon, class: "sr-only peer", data: { action: "change->category#handleIconChange change->category#handleIconColorChange", category_target:"icon" } %>
<div class="w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-gray-100 peer-checked:bg-gray-100 border-1 border-transparent">
<div class="text-secondary w-7 h-7 flex m-0.5 items-center justify-center rounded-full cursor-pointer hover:bg-container-inset-hover peer-checked:bg-container-inset border-1 border-transparent">
<%= icon(icon, size: "sm", color: "current") %>
</div>
</label>

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

@ -2,8 +2,8 @@
<% is_selected = category.id === @selected_category&.id %>
<%= content_tag :div,
class: ["filterable-item flex justify-between items-center border-none rounded-lg px-2 py-1 group w-full hover:bg-gray-25 focus-within:bg-gray-25",
{ "bg-gray-25": is_selected }],
class: ["filterable-item flex justify-between items-center border-none rounded-lg px-2 py-1 group w-full hover:bg-container-inset-hover",
{ "bg-container-inset": is_selected }],
data: { filter_name: category.name } do %>
<%= button_to transaction_category_path(
@transaction.entry,

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

@ -2,7 +2,13 @@
<div class="flex flex-col relative" data-controller="list-filter">
<div class="grow p-1.5">
<div class="relative flex items-center bg-container border border-secondary rounded-lg">
<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">
<input
placeholder="<%= t(".search_placeholder") %>"
autocomplete="nope"
type="search"
class="bg-container placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg focus:outline-hidden focus:ring-0"
data-list-filter-target="input"
data-action="list-filter#filter" />
<%= icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
</div>
</div>
@ -33,14 +39,16 @@
</div>
<% end %>
</div>
<hr>
<hr class="border-tertiary">
<div class="relative p-1.5 w-full">
<% if @transaction.category %>
<%= button_to transaction_path(@transaction.entry),
method: :patch,
data: { turbo_frame: dom_id(@transaction.entry) },
params: { entry: { entryable_type: "Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
class: "flex text-sm font-medium items-center gap-2 text-secondary 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-container-inset-hover" do %>
<%= icon("minus") %>
<%= t(".clear") %>
@ -49,7 +57,7 @@
<% unless @transaction.transfer? %>
<%= link_to new_transaction_transfer_match_path(@transaction.entry),
class: "flex text-sm font-medium items-center gap-2 text-secondary 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-container-inset-hover",
data: { turbo_frame: "modal" } do %>
<%= icon("refresh-cw") %>

4
app/views/chats/_ai_greeting.html.erb
View file

@ -30,8 +30,8 @@
<% questions.each do |question| %>
<button data-action="chat#submitSampleQuestion"
data-chat-question-param="<%= question[:text] %>"
class="w-full flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
<%= icon(question[:icon], color: "gray") %> <%= question[:text] %>
class="w-fit flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
<%= icon(question[:icon]) %> <%= question[:text] %>
</button>
<% end %>
</div>

9
app/views/chats/_chat_nav.html.erb
View file

@ -4,9 +4,12 @@
<% path = chat.new_record? ? chats_path : chats_path(previous_chat_id: chat.id) %>
<div class="flex items-center gap-2 grow">
<%= link_to path, id: "chat-nav-back", class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
<%= icon("menu", color: "gray" ) %>
<% end %>
<%= render LinkComponent.new(
id: "chat-nav-back",
variant: "icon",
icon: "menu",
href: path,
) %>
<div class="grow">
<%= render "chats/chat_title", chat: chat, ctx: "chat" %>

9
app/views/chats/index.html.erb
View file

@ -4,9 +4,12 @@
<% if @chats.any? %>
<nav class="mb-6">
<% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
<%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
<%= icon("arrow-left", color: "gray" ) %>
<% end %>
<%= render LinkComponent.new(
variant: "icon",
icon: "arrow-left",
href: back_path,
) %>
</nav>
<% end %>

2
app/views/chats/new.html.erb
View file

@ -1,5 +1,5 @@
<%= turbo_frame_tag chat_frame do %>
<div class="flex flex-col h-full md:p-4">
<div class="flex flex-col h-full md:px-4 md:pb-4">
<%= render "chats/chat_nav", chat: @chat %>
<div class="mt-auto py-8">

2
app/views/chats/show.html.erb
View file

@ -30,7 +30,7 @@
</div>
<%# DESKTOP - Chat form %>
<div class="p-4 lg:mt-auto fixed lg:static left-0 bottom-16 w-full bg-surface">
<div class="p-4 pt-0 lg:mt-auto fixed lg:static left-0 bottom-16 w-full bg-surface">
<%= render "messages/chat_form", chat: @chat %>
</div>
</div>

2
app/views/layouts/shared/_nav_item.html.erb
View file

@ -6,7 +6,7 @@
<%= tag.div class: class_names(
"w-8 h-8 flex items-center justify-center mx-auto rounded-lg",
active ? "bg-container shadow-xs text-primary" : "group-hover:bg-container-hover text-secondary"
active ? "bg-container shadow-xs text-primary" : "group-hover:bg-surface-hover text-secondary"
) do %>
<%= icon(icon, color: active ? "current" : "default", custom: icon_custom) %>
<% end %>

8
app/views/pages/dashboard/_balance_sheet.html.erb
View file

@ -49,15 +49,15 @@
<div class="shadow-border-xs rounded-lg bg-container min-w-fit">
<% classification_group.account_groups.each do |account_group| %>
<details class="group rounded-lg open:bg-surface font-medium text-sm">
<summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
<summary class="focus-visible:outline-none focus-visible:ring-0 cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
<div class="w-40 shrink-0 flex items-center gap-4">
<%= icon("chevron-right", class: "group-open:rotate-90") %>
<p><%= account_group.name %></p>
</div>
<div class="ml-auto flex items-center text-right gap-6">
<div class="w-24 shrink-0 flex items-center justify-end gap-2">
<div class="flex items-center justify-between text-right gap-6">
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
<%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
</div>
@ -77,7 +77,7 @@
</div>
<div class="ml-auto flex items-center text-right gap-6">
<div class="w-24 shrink-0 flex items-center justify-end gap-2">
<div class="w-28 shrink-0 flex items-center justify-end gap-2">
<%= render "pages/dashboard/group_weight", weight: account.weight, color: account_group.color %>
</div>

4
app/views/pages/dashboard/_group_weight.html.erb
View file

@ -1,9 +1,9 @@
<%# locals: (weight:, color:) %>
<div class="flex items-center gap-2">
<div class="w-full flex items-center justify-between gap-2">
<div class="flex gap-[3px]">
<% 10.times do |i| %>
<div class="w-[2px] h-[10px] rounded-lg <%= i < (weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= color %>;"></div>
<div class="w-0.5 h-2.5 rounded-lg <%= i < (weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= color %>;"></div>
<% end %>
</div>
<p class="text-sm"><%= number_to_percentage(weight, precision: 2) %></p>

2
app/views/transactions/_summary.html.erb
View file

@ -1,5 +1,5 @@
<%# locals: (totals:) %>
<div class="grid grid-cols-1 md:grid-cols-3 bg-container rounded-xl shadow-border-xs md:divide-x divide-y md:divide-y-0 divide-alpha-black-100">
<div class="grid grid-cols-1 md:grid-cols-3 bg-container rounded-xl shadow-border-xs md:divide-x divide-y md:divide-y-0 divide-alpha-black-100 theme-dark:divide-alpha-white-200">
<div class="p-4 space-y-2">
<p class="text-sm text-secondary">Total transactions</p>
<p class="text-primary font-medium text-xl" id="total-transactions"><%= totals.transactions_count.round(0) %></p>

8
app/views/transactions/_transfer_match.html.erb
View file

@ -3,10 +3,10 @@
<div id="<%= dom_id(transaction, "transfer_match") %>" class="flex items-center gap-1">
<% if transaction.transfer.confirmed? %>
<span title="<%= transaction.transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
<%= icon "link-2", size: "sm", class: "text-indigo-600" %>
<%= icon "link-2", size: "sm", class: "text-secondary" %>
</span>
<% elsif transaction.transfer.pending? %>
<span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
<span class="inline-flex items-center rounded-full bg-surface-inset px-2 py-0.5 text-xs font-medium text-secondary">
Auto-matched
</span>
@ -14,7 +14,7 @@
method: :patch,
class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
title: "Confirm match" do %>
<%= icon "check", size: "sm", class: "text-indigo-400 hover:text-indigo-600" %>
<%= icon "check", size: "sm", class: "text-secondary hover:text-primary" %>
<% end %>
<%= button_to transfer_path(transaction.transfer, transfer: { status: "rejected" }),
@ -22,7 +22,7 @@
data: { turbo: false },
class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
title: "Reject match" do %>
<%= icon "x", size: "sm", class: "text-subdued hover:text-gray-600" %>
<%= icon "x", size: "sm", class: "text-subdued hover:text-primary" %>
<% end %>
<% end %>
</div>