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

fix: improve dark mode readability across the app

Browse source
This commit is contained in:
Guilherme Mena 2025-04-18 15:21:04 -03:00
parent 47aeaf8cea
commit abae66fe58
42 changed files with 171 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

118
app/assets/tailwind/maybe-design-system.css
View file

@ -498,14 +498,15 @@
details>summary::-webkit-details-marker {
@apply hidden;
}
details>summary {
@apply list-none;
}
input[type='radio'] {
@apply border-gray-300 text-indigo-600 focus:ring-indigo-600; /* Default light mode */
@apply border-gray-300 text-indigo-600 focus:ring-indigo-600;
/* Default light mode */
@variant theme-dark {
/* Dark mode radio button base and checked styles */
@apply border-gray-600 bg-gray-700 checked:bg-blue-500 focus:ring-blue-500 focus:ring-offset-gray-800;
@ -531,32 +532,49 @@
@apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
}
}
.btn--secondary {
@apply button-bg-secondary text-primary;
@apply hover:button-bg-secondary-hover;
@variant theme-dark {
@apply button-bg-secondary text-white;
@apply hover:button-bg-secondary-hover;
@apply text-white;
background-color: var(--color-gray-700);
&:hover {
background-color: var(--color-gray-800);
}
}
}
.btn--outline {
@apply border border-alpha-black-200 text-primary disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-400;
@apply hover:button-bg-outline-hover;
&:hover {
background-color: var(--color-gray-100);
}
@variant theme-dark {
@apply border-alpha-white-300 text-white disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-600;
@apply hover:button-bg-outline-hover;
&:hover {
background-color: var(--color-gray-800);
}
}
}
.btn--ghost {
@apply border border-transparent hover:button-bg-ghost-hover;
@apply border border-transparent text-primary;
&:hover {
background-color: var(--color-gray-100)
}
@variant theme-dark {
@apply hover:fg-inverse hover:button-bg-ghost-hover;
@apply fg-primary;
&:hover {
background-color: var(--color-gray-900);
}
}
}
@ -581,7 +599,7 @@
@apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-container border-secondary shadow-xs w-full;
@apply focus-within:border-secondary focus-within:shadow-none focus-within:ring-4 focus-within:ring-alpha-black-200;
@apply transition-all duration-300;
@variant theme-dark {
@apply focus-within:ring-alpha-white-300;
}
@ -589,22 +607,22 @@
/* Add styles for multiple select within form fields */
select[multiple] {
@apply py-2 pr-2 space-y-0.5 overflow-y-auto;
option {
@apply py-2 rounded-md;
}
option:checked {
@apply after:content-['\2713'] bg-container-inset after:text-gray-500 after:ml-2;
}
option:active,
option:focus {
@apply bg-container-inset;
}
}
}
.form-field__label {
@apply block text-xs text-secondary peer-disabled:text-subdued;
}
@ -616,16 +634,25 @@
@apply disabled:text-subdued;
@apply text-ellipsis overflow-hidden whitespace-nowrap;
@apply transition-opacity duration-300;
&select {
@apply pr-8;
}
@variant theme-dark {
&::-webkit-calendar-picker-indicator {
filter: invert(1);
cursor: pointer;
}
}
}
.form-field__radio {
@apply text-primary;
}
.form-field__submit {
@apply cursor-pointer rounded-lg bg-surface p-3 text-center text-white hover:bg-surface-hover;
}
@ -642,21 +669,37 @@
&[type='checkbox'] {
@apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500;
}
&[type='checkbox']:disabled {
@apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400;
}
}
@variant theme-dark {
&[type='checkbox'] {
@apply ring-gray-900 checked:text-white;
background-color: var(--color-gray-600);
}
&[type='checkbox']:disabled {
@apply cursor-not-allowed opacity-80 ring-gray-600;
}
&[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-color: var(--color-gray-600);
}
}
}
.checkbox--dark {
&[type='checkbox'] {
@apply ring-gray-900 checked:text-white;
}
&[type='checkbox']:disabled {
@apply cursor-not-allowed opacity-80 ring-gray-600;
}
&[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@ -669,35 +712,52 @@
@apply after:transition-transform after:duration-300 after:ease-in-out;
@apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
@apply transition-colors duration-300;
@variant theme-dark {
background-color: var(--color-gray-700);
}
}
/* Tooltips */
.tooltip {
@apply hidden absolute;
}
.qrcode svg path {
fill: var(--color-black);
@variant theme-dark {
fill: var(--color-white);
}
}
}
@layer utilities {
/* Specific override for strong tags in prose under dark mode */
.prose:where([data-theme=dark], [data-theme=dark] *) strong {
color: theme(colors.white) !important;
color: theme(colors.white) !important;
}
}
/* Button Backgrounds */
@utility button-bg-primary {
@apply bg-gray-900; /* Maps to fg-primary light */
@apply bg-gray-900;
/* Maps to fg-primary light */
@variant theme-dark {
@apply bg-white; /* Maps to fg-primary dark */
@apply bg-white;
/* Maps to fg-primary dark */
}
}
@utility button-bg-primary-hover {
@apply bg-gray-800; /* Maps to fg-primary-variant light */
@apply bg-gray-800;
/* Maps to fg-primary-variant light */
@variant theme-dark {
@apply bg-gray-50; /* Maps to fg-primary-variant dark */
@apply bg-gray-50;
/* Maps to fg-primary-variant dark */
}
}

2
app/helpers/forms_helper.rb
View file

@ -30,7 +30,7 @@ end
private
def radio_tab_contents(label:, icon:, class: nil)
tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued group-has-checked:bg-container group-has-checked:text-gray-800 group-has-checked:shadow-sm") do
tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued group-has-checked:bg-surface group-has-checked:text-primary group-has-checked:shadow-sm") do
concat lucide_icon(icon, class: "w-5 h-5")
concat tag.span(label, class: "group-has-checked:font-semibold")
end

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

@ -1,7 +1,7 @@
<%# locals: (accountable:) %>
<%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 dark:hover:bg-overlay dark:focus:bg-overlay fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
<span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
<%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
</span>

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

@ -24,7 +24,7 @@
<% unless params[:return_to].present? %>
<%= button_to imports_path(import: { type: "AccountImport" }),
data: { turbo_frame: :_top },
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 dark:hover:bg-overlay dark:focus:bg-overlay fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
<span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
<%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
</span>

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

@ -15,7 +15,7 @@
</button>
</div>
<div class="p-2 text-primary">
<div class="p-2 text-subdued">
<button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
<button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>

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

@ -2,7 +2,7 @@
<%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
<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 %>
<%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface 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-secondary w-5 h-5") %>
</span>

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

@ -37,7 +37,7 @@
data: { controller: "auto-submit-form" } do |form| %>
<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">
<div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
<%= hidden_field_tag :account_id, @account.id %>
<%= form.search_field :search,

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

@ -61,10 +61,10 @@
<% end %>
<div class="space-y-2">
<%= f.select :classification, [["Income", "income"], ["Expense", "expense"]], { label: "Classification" }, required: true %>
<%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" } %>
<%= f.select :classification, [["Income", "income"], ["Expense", "expense"]], { label: "Classification" }, class: "form-field__input text-ellipsis text-subdued", required: true %>
<%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" }, class: "form-field__input text-ellipsis text-subdued" %>
<% unless category.parent? %>
<%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" }, disabled: category.parent?, data: { action: "change->category#handleParentChange" } %>
<%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" }, disabled: category.parent?, data: { action: "change->category#handleParentChange" }, class: "form-field__input text-ellipsis text-subdued" %>
<% end %>
</div>
</section>

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

@ -1,7 +1,7 @@
<%= turbo_frame_tag "category_dropdown" do %>
<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-gray-200 rounded-lg">
<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">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div>

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

@ -1,5 +1,5 @@
<div class="flex flex-col items-center justify-start h-full p-6 text-center">
<div class="border border-gray-200 rounded-lg p-4 bg-container">
<div class="border border-secondary rounded-lg p-4 bg-container">
<div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
<%= icon("sparkles") %>
</div>

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

@ -5,7 +5,7 @@
<p>Hey <%= Current.user&.first_name || "there" %>! I'm an AI built by Maybe to help with your finances. I have access to the web and your account data.</p>
<p>
You can use <span class="bg-container border border-gray-200 px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
You can use <span class="bg-container border border-secondary px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
</p>
<div class="space-y-3">

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

@ -15,7 +15,7 @@
<%= render @chats %>
</div>
<% else %>
<div class="text-center py-12 bg-container rounded-lg border border-gray-200">
<div class="text-center py-12 bg-container rounded-lg border border-primary">
<div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
<%= icon("message-square", size: "lg") %>
</div>

2
app/views/family_merchants/_form.html.erb
View file

@ -15,7 +15,7 @@
</label>
<% end %>
</div>
<div class="relative flex items-center border border-gray-200 rounded-lg">
<div class="relative flex items-center border border-secondary rounded-lg text-subdued">
<%= f.text_field :name, placeholder: t(".name_placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
</div>
</section>

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

@ -21,7 +21,7 @@
<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-primary group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-secondary">
<%= t(".resume", type: @pending_import.type.titleize) %>
</span>
</div>
@ -41,7 +41,7 @@
<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-primary group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-secondary">
<%= t(".import_transactions") %>
</span>
</div>
@ -61,7 +61,7 @@
<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-primary group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-secondary">
<%= t(".import_portfolio") %>
</span>
</div>
@ -81,7 +81,7 @@
<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-primary group-hover:text-gray-700">
<span class="text-sm text-primary group-hover:text-secondary">
<%= t(".import_accounts") %>
</span>
</div>

3
app/views/invitations/new.html.erb
View file

@ -11,7 +11,8 @@
[t(".role_admin"), "admin"]
]),
{},
{ label: t(".role_label") } %>
class: "form-field__input text-primary"
%>
<div class="w-full">
<%= form.submit t(".submit"), class: "bg-gray-900 text-white rounded-lg px-4 py-2 w-full" %>

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

@ -11,7 +11,7 @@
<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>
<div class="qrcode">
<%= generate_mfa_qr_code(Current.user.provisioning_uri) %>
</div>
@ -26,7 +26,7 @@
readonly
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">
class="text-sm bg-container px-2 py-1 rounded border border-secondary w-96 font-mono">
<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" %>

4
app/views/onboardings/preferences.html.erb
View file

@ -1,7 +1,7 @@
<div class="bg-gray-25 h-screen flex flex-col justify-between">
<div class="bg-surface h-screen flex flex-col justify-between">
<%= render "onboardings/header" %>
<div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center md:py-0 py-6 px-4 md:px-0" data-controller="onboarding">
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0" data-controller="onboarding">
<div>
<div class="space-y-1 mb-6">
<h1 class="text-2xl font-medium"><%= t(".title") %></h1>

4
app/views/onboardings/profile.html.erb
View file

@ -1,7 +1,7 @@
<div class="bg-gray-25 min-h-screen flex flex-col justify-between">
<div class="bg-surface min-h-screen flex flex-col justify-between">
<%= render "onboardings/header" %>
<div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
<div>
<div class="space-y-1 mb-6">
<h1 class="text-2xl font-medium md:text-2xl"><%= t(".title") %></h1>

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

@ -1,4 +1,4 @@
<div class="bg-gray-25">
<div class="bg-surface">
<div class="h-screen flex flex-col items-center py-6">
<div class="grow flex justify-center items-center flex-col max-w-sm w-full text-center">
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>

8
app/views/pages/feedback.html.erb
View file

@ -4,23 +4,23 @@
<h2 class="text-lg font-medium text-primary mb-1">Leave feedback</h2>
<p class="text-sm text-secondary mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
<div class="flex flex-col md:flex-row gap-4">
<%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
<%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
<%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-primary text-center">Write a feature request</span>
<% end %>
<% if self_hosted? %>
<%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
<%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
<%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-primary text-center">File a bug report</span>
<% end %>
<% else %>
<%= link_to "mailto:hello@maybefinance.com", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50", onclick: "Intercom('showNewMessage'); return false;" do %>
<%= link_to "mailto:hello@maybefinance.com", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover", onclick: "Intercom('showNewMessage'); return false;" do %>
<%= lucide_icon "bug", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-primary text-center">File a bug report</span>
<% end %>
<% end %>
<%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
<%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
<%= image_tag "discord-icon.svg", class: "w-8 h-8 mb-2" %>
<span class="text-sm font-medium text-primary text-center">Discuss Maybe with others</span>
<% end %>

4
app/views/rule/actions/_action.html.erb
View file

@ -9,13 +9,13 @@
<div class="grow flex gap-2 items-center h-full">
<div class="grow">
<%= form.select :action_type, rule.action_executors.map { |executor| [ executor.label, executor.key ] }, {}, data: { action: "rule--actions#handleActionTypeChange" } %>
<%= form.select :action_type, rule.action_executors.map { |executor| [ executor.label, executor.key ] }, {}, data: { action: "rule--actions#handleActionTypeChange" }, class: "form-field__input text-primary" %>
</div>
<%= tag.div class: class_names("min-w-1/2 flex items-center gap-2", "hidden" => !needs_value),
data: { rule__actions_target: "actionValue" } do %>
<span class="font-medium uppercase text-xs">to</span>
<%= form.select :value, action.options || [], {}, disabled: !needs_value %>
<%= form.select :value, action.options || [], {}, class: "form-field__input text-primary", disabled: !needs_value %>
<% end %>
</div>

10
app/views/rule/conditions/_condition.html.erb
View file

@ -14,19 +14,19 @@
<%= form.hidden_field :_destroy, value: false, data: { rule__conditions_target: "destroyField" } %>
<div class="w-2/5 shrink-0">
<%= form.select :condition_type, rule.condition_filters.map { |filter| [ filter.label, filter.key ] }, {}, data: { action: "rule--conditions#handleConditionTypeChange" } %>
<%= form.select :condition_type, rule.condition_filters.map { |filter| [ filter.label, filter.key ] }, {}, data: { action: "rule--conditions#handleConditionTypeChange" }, class: "form-field__input text-primary" %>
</div>
<%= form.select :operator, condition.operators, { container_class: "w-fit min-w-36" }, data: { rule__conditions_target: "operatorSelect" } %>
<%= form.select :operator, condition.operators, { container_class: "w-fit min-w-36" }, data: { rule__conditions_target: "operatorSelect" }, class: "form-field__input text-primary" %>
<div data-rule--conditions-target="filterValue" class="grow">
<% if condition.filter.type == "select" %>
<%= form.select :value, condition.options, {} %>
<%= form.select :value, condition.options, {}, class: "form-field__input text-primary" %>
<% else %>
<% if condition.filter.type == "number" %>
<%= form.number_field :value, placeholder: "10", step: 0.01 %>
<%= form.number_field :value, placeholder: "10", step: 0.01, class: "form-field__input text-primary" %>
<% else %>
<%= form.text_field :value, placeholder: "Enter a value" %>
<%= form.text_field :value, placeholder: "Enter a value", class: "form-field__input text-primary" %>
<% end %>
<% end %>
</div>

4
app/views/rule/conditions/_condition_group.html.erb
View file

@ -3,7 +3,7 @@
<% condition = form.object %>
<% rule = condition.rule %>
<li data-controller="rule--conditions element-removal" class="border border-alpha-black-100 rounded-md p-4 space-y-3">
<li data-controller="rule--conditions element-removal" class="border border-secondary rounded-md p-4 space-y-3">
<%= form.hidden_field :condition_type, value: "compound" %>
@ -15,7 +15,7 @@
</div>
<% end %>
<p class="text-sm text-secondary">match</p>
<%= form.select :operator, [["all", "and"], ["any", "or"]], { container_class: "w-fit" }, data: { rules_target: "operatorField" } %>
<%= form.select :operator, [["all", "and"], ["any", "or"]], { container_class: "w-fit" }, data: { rules_target: "operatorField" }, class: "form-field__input text-primary" %>
<p class="text-sm text-secondary">of the following conditions</p>
</div>

12
app/views/rules/_form.html.erb
View file

@ -10,7 +10,7 @@
<% end %>
<section class="space-y-4">
<h3 class="text-sm font-medium">If <%= rule.resource_type %></h3>
<h3 class="text-sm font-medium text-primary">If <%= rule.resource_type %></h3>
<%# Condition template, used by Stimulus controller to add new conditions dynamically %>
<template data-rules-target="conditionGroupTemplate">
@ -50,7 +50,7 @@
</section>
<section class="space-y-4">
<h3 class="text-sm font-medium">Then</h3>
<h3 class="text-sm font-medium text-primary">Then</h3>
<%# Action template, used by Stimulus controller to add new actions dynamically %>
<template data-rules-target="actionTemplate">
@ -75,21 +75,21 @@
</section>
<section class="space-y-4">
<h3 class="text-sm font-medium">Apply this</h3>
<h3 class="text-sm font-medium text-primary">Apply this</h3>
<div class="space-y-2">
<div class="flex items-center gap-2">
<%= f.radio_button :effective_date_enabled, false, checked: rule.effective_date.nil?, data: { action: "rules#clearEffectiveDate" } %>
<%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm" %>
<%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2">
<%= f.radio_button :effective_date_enabled, true, checked: rule.effective_date.present? %>
<%= f.label :effective_date_enabled_true, "Starting from", class: "text-sm" %>
<%= f.label :effective_date_enabled_true, "Starting from", class: "text-sm text-primary" %>
</div>
<%= f.date_field :effective_date, container_class: "w-fit", data: { rules_target: "effectiveDateInput" } %>
<%= f.date_field :effective_date, container_class: "w-fit", data: { rules_target: "effectiveDateInput" }, class: "form-field__input text-primary" %>
</div>
</div>
</section>

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

@ -30,7 +30,7 @@
</div>
<% end %>
<div class="bg-white shadow-border-xs rounded-xl p-4">
<div class="bg-container shadow-border-xs rounded-xl p-4">
<% if @rules.any? %>
<div class="rounded-xl bg-gray-25 space-y-1">

2
app/views/settings/_settings_nav.html.erb
View file

@ -4,7 +4,7 @@
<%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
<span class="hidden md:block">Back</span>
<% end %>
<%= link_to previous_path, class: "hidden md:block uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
<%= link_to previous_path, class: "hidden md:block uppercase bg-surface-inset-hover rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
esc
<% end %>
</div>

2
app/views/settings/_settings_nav_item.html.erb
View file

@ -2,7 +2,7 @@
<%= link_to path, class: class_names(
"flex items-center gap-2 btn btn--ghost whitespace-nowrap",
page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-surface-hover border-transparent"
), aria: { current: ("page" if page_active?(path)) } do %>
<%= lucide_icon(icon, class: "w-5 h-5") if icon %>
<%= name %>

6
app/views/settings/_user_avatar_field.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (form:, user:) %>
<div class="flex md:flex-row flex-col md:items-center items-center gap-4" data-controller="profile-image-preview">
<div class="relative flex justify-center items-center bg-gray-50 size-26 md:size-24 rounded-full border-alpha-black-300 border border-dashed">
<div class="relative flex justify-center items-center bg-container size-26 md:size-24 rounded-full border-primary border border-dashed overflow-hidden">
<%# The image preview once user has uploaded a new file %>
<div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
@ -10,8 +10,8 @@
<%# The placeholder image for empty avatar field %>
<div data-profile-image-preview-target="placeholderImage"
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
<div class="h-full w-full flex justify-center items-center">
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
<div class="h-full w-full flex justify-center items-center bg-container">
<%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
</div>
</div>

14
app/views/settings/profiles/show.html.erb
View file

@ -43,7 +43,7 @@
<%= render "settings/user_avatar", user: user %>
</div>
<p class="text-primary font-medium text-sm"><%= user.display_name %></p>
<div class="rounded-md bg-gray-100 px-1.5 py-0.5">
<div class="rounded-md bg-surface px-1.5 py-0.5">
<p class="uppercase text-secondary font-medium text-xs"><%= user.role %></p>
</div>
<% if Current.user.admin? && user != Current.user %>
@ -55,7 +55,7 @@
title: t(".confirm_remove_member.title"),
body: t(".confirm_remove_member.body", name: user.display_name),
accept: t(".remove_member"),
acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
}} do %>
<%= lucide_icon "x", class: "w-5 h-5" %>
<% end %>
@ -72,7 +72,7 @@
</div>
<div class="flex">
<p class="text-primary font-medium text-sm"><%= invitation.email %></p>
<div class="rounded-md bg-gray-100 px-1.5 py-0.5">
<div class="rounded-md bg-surface px-1.5 py-0.5">
<p class="uppercase text-secondary font-medium text-xs"><%= t(".pending") %></p>
</div>
</div>
@ -86,7 +86,7 @@
readonly
autocomplete="off"
value="<%= accept_invitation_url(invitation.token) %>"
class="text-sm bg-gray-50 px-2 py-1 rounded border border-gray-200 w-72">
class="text-sm bg-gray-50 px-2 py-1 rounded border border-secondary w-72">
<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" %>
@ -105,7 +105,7 @@
title: t(".confirm_remove_invitation.title"),
body: t(".confirm_remove_invitation.body", email: invitation.email),
accept: t(".remove_invitation"),
acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
}} do %>
<%= lucide_icon "x", class: "w-5 h-5" %>
<% end %>
@ -141,7 +141,7 @@
title: t(".confirm_reset.title"),
body: t(".confirm_reset.body"),
accept: t(".reset_account"),
acceptClass: "w-full bg-orange-500 text-white rounded-xl text-center p-[10px] border mb-2"
acceptClass: "w-full btn btn--destructive text-primary rounded-xl text-center p-[10px] mb-2"
}}
%>
</div>
@ -158,7 +158,7 @@
title: t(".confirm_delete.title"),
body: t(".confirm_delete.body"),
accept: t(".delete_account"),
acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
}}
%>
</div>

4
app/views/shared/_confirm_modal.html.erb
View file

@ -1,8 +1,8 @@
<dialog id="turbo-confirm" class="max-w-[420px] w-full rounded-xl m-auto">
<form method="dialog" class="p-4">
<form method="dialog" class="p-4 bg-container">
<div class="flex flex-col mb-4">
<div class="flex justify-between mb-2 gap-4">
<h3 id="turbo-confirm-title" class="font-medium text-md"><%= t(".title") %></h3>
<h3 id="turbo-confirm-title" class="font-medium text-primary text-md"><%= t(".title") %></h3>
<button value="cancel">
<%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
</button>

2
app/views/shared/_disclosure.html.erb
View file

@ -2,7 +2,7 @@
<details class="group space-y-2" <%= "open" if open %>>
<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">
uppercase text-secondary bg-surface focus-visible:outline-hidden">
<h3><%= title %></h3>
<%= lucide_icon "chevron-down",
class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>

2
app/views/shared/_modal_form.html.erb
View file

@ -4,7 +4,7 @@
<article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
<div class="space-y-2">
<header class="flex justify-between items-center">
<h2 class="font-medium"><%= title %></h2>
<h2 class="font-medium text-primary"><%= title %></h2>
<%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
</header>

2
app/views/shared/_money_field.html.erb
View file

@ -17,7 +17,7 @@
<div class="flex items-center gap-1">
<div class="flex items-center grow gap-1">
<span class="text-secondary text-sm" data-money-field-target="symbol">
<span class="text-subdued text-sm" data-money-field-target="symbol">
<%= currency.symbol %>
</span>

2
app/views/tags/_form.html.erb
View file

@ -12,7 +12,7 @@
</label>
<% end %>
</div>
<div class="relative flex items-center border border-gray-200 rounded-lg">
<div class="relative flex items-center border border-secondary rounded-lg text-subdued">
<%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
</div>
</section>

4
app/views/transactions/_form.html.erb
View file

@ -1,11 +1,11 @@
<%= styled_form_with model: @entry, url: transactions_path, class: "space-y-4" do |f| %>
<%= styled_form_with model: @entry, url: transactions_path, class: "space-y-4 text-subdued" do |f| %>
<% if entry.errors.any? %>
<%= render "shared/form_errors", model: entry %>
<% end %>
<section>
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 md:gap-x-2">
<fieldset class="bg-container rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 md: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?, class: "text-xs md:text-sm" %>
<%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow", class: "text-xs md:text-sm" %>
<%= 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 text-sm md:text-normal group-has-checked:bg-container group-has-checked:text-gray-800 group-has-checked:shadow-sm group-has-checked:text-sm" do %>

7
app/views/transactions/searches/_menu.html.erb
View file

@ -4,10 +4,10 @@
id="transaction-filters-menu"
data-menu-target="content"
data-controller="tabs"
data-tabs-active-class="bg-gray-25 text-primary"
data-tabs-active-class="bg-surface text-primary"
data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
class="hidden absolute flex flex-col md:flex-row z-10 h-auto md:h-80 w-full md:w-[540px] top-12 right-0 shadow-border-xs bg-container rounded-lg overflow-hidden">
<div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-alpha-black-100 overflow-x-auto md:overflow-x-visible">
<div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-secondary overflow-x-auto md:overflow-x-visible">
<% transaction_search_filters.each do |filter| %>
<button
class="flex text-secondary hover:bg-container-inset items-center gap-2 px-3 rounded-md py-2 min-w-max md:w-full"
@ -20,9 +20,8 @@
</button>
<% end %>
</div>
<div class="flex flex-col grow">
<div class="grow p-3 border-b border-b-alpha-black-100 overflow-y-auto max-h-[50vh] md:max-h-none">
<div class="grow p-3 border-b border-secondary overflow-y-auto max-h-[50vh] md:max-h-none">
<% transaction_search_filters.each do |filter| %>
<div id="<%= filter[:key] %>" data-tabs-target="tab">
<%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>

2
app/views/transactions/searches/filters/_account_filter.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
<input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-secondary rounded-md py-2 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<div class="my-2" id="list" data-list-filter-target="list">

2
app/views/transactions/searches/filters/_category_filter.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
<input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<div class="my-2" id="list" data-list-filter-target="list">

4
app/views/transactions/searches/filters/_date_filter.html.erb
View file

@ -3,9 +3,9 @@
<%= form.date_field :start_date,
placeholder: "Start date",
value: @q[:start_date],
class: "block w-full border border-gray-200 rounded-md py-2 pl-3 pr-3 focus:border-gray-500 focus:ring-gray-500 sm:text-sm" %>
class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 focus:ring-gray-500 sm:text-sm" %>
<%= form.date_field :end_date,
placeholder: "End date",
value: @q[:end_date],
class: "block w-full border border-gray-200 rounded-md py-2 pl-3 pr-3 focus:border-gray-500 focus:ring-gray-500 sm:text-sm mt-2" %>
class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 focus:ring-gray-500 sm:text-sm mt-2" %>
</div>

2
app/views/transactions/searches/filters/_merchant_filter.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
<input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<div class="my-2" id="list" data-list-filter-target="list">

2
app/views/transactions/searches/filters/_tag_filter.html.erb
View file

@ -1,7 +1,7 @@
<%# locals: (form:) %>
<div data-controller="list-filter">
<div class="relative">
<input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
<input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
<%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
</div>
<div class="my-2" id="list" data-list-filter-target="list">

12
app/views/transfers/_form.html.erb
View file

@ -7,7 +7,7 @@
<% end %>
<section>
<fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 asdd">
<fieldset class="bg-container rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1">
<%= link_to new_transaction_path(nature: "expense"), data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued" do %>
<%= lucide_icon "minus-circle", class: "w-4 h-4" %>
<%= tag.span t(".expense") %>
@ -18,7 +18,7 @@
<%= tag.span t(".income") %>
<% end %>
<%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued bg-container text-gray-800 shadow-sm" do %>
<%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center bg-container text-primary shadow-sm" do %>
<%= lucide_icon "arrow-right-left", class: "w-4 h-4" %>
<%= tag.span t(".transfer") %>
<% end %>
@ -26,10 +26,10 @@
</section>
<section class="space-y-2">
<%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true %>
<%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true %>
<%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001 %>
<%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, max: Date.current %>
<%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true, class: "form-field__input text-ellipsis text-subdued" %>
<%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true, class: "form-field__input text-ellipsis text-subdued" %>
<%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001, class: "form-field__input text-ellipsis text-subdued" %>
<%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, class: "form-field__input text-ellipsis text-subdued", max: Date.current %>
</section>
<section>