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

Improve dark mode styles across multiple pages (#2125)
Some checks failed
Publish Docker image / ci (push) Has been cancelled
Details
Publish Docker image / Build docker image (push) Has been cancelled
Details

Browse source 
* fix: improve dark mode readability across the app

* fix: improve dark mode support for asset percentage text

* fix: apply suggested patch for theme-related improvements

* chore: apply PR feedback – remove dark:, align with design tokens, update form builder

* chore: revert background token and restore original style for visual consistency

* chore: remove unnecessary class attributes from form fields using builder

* refactor: move number_field and date_field into metaprogramming block

* refactor: replace bg-divider-adaptive divs with <hr> and border-secondary

* fix: apply requested changes and linting fixes
This commit is contained in:
Guilherme Mena 2025-04-23 10:42:30 -03:00 • committed by GitHub
parent 47aeaf8cea
commit 210b89cd17
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
63 changed files with 209 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

121
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,26 @@
@apply disabled:text-subdued;
@apply text-ellipsis overflow-hidden whitespace-nowrap;
@apply transition-opacity duration-300;
@apply placeholder:text-subdued;
&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 +670,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 +713,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 */
}
}
@ -788,4 +849,4 @@
@variant theme-dark {
@apply bg-white;
}
}
}

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 hover:bg-surface-hover focus:bg-surface-hover 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/index.html.erb
View file

@ -15,7 +15,7 @@
class: "btn btn--primary flex items-center justify-center gap-1 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg" do %>
<div class="flex items-center justify-center w-5 h-5">
<%= lucide_icon("plus")%>
<%= lucide_icon("plus") %>
</div>
<p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
<% end %>

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 hover:bg-surface-hover focus:bg-surface-hover 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,

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

@ -1,7 +1,7 @@
<%# locals: (budget:) %>
<div>
<div class="p-4 border-b border-gray-100">
<div class="p-4 border-b border-secondary">
<h3 class="text-sm text-secondary mb-2">Income</h3>
<span class="inline-block mb-2 text-xl font-medium text-primary">

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

@ -16,7 +16,7 @@
step[:is_complete] ? "text-green-600" : "text-secondary"
end %>
<% step_class = if is_current
"bg-primary text-white"
"bg-primary text-primary"
else
step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-container-inset"
end %>
@ -31,7 +31,7 @@
</div>
<% end %>
<div class="h-px bg-alpha-black-200 w-12 group-last:hidden"></div>
<hr class="border border-secondary w-12 group-last:hidden">
</li>
<% end %>
</ul>

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

@ -1,7 +1,7 @@
<%# locals: (budget:) %>
<div>
<div class="p-4 border-b border-gray-100">
<div class="p-4 border-b border-secondary">
<h3 class="text-sm text-secondary mb-2">Expected income</h3>
<span class="inline-block mb-2 text-xl font-medium text-primary">

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

@ -30,7 +30,7 @@
<div class="flex gap-2 items-center hidden flex-col" data-category-target="paletteSection">
<div class="flex gap-2 items-center w-full">
<div class="w-6 h-6 p-4 rounded-full cursor-pointer" style="background-color: <%= category.color %>" data-category-target="colorPreview"></div>
<%= f.text_field :color , data: { category_target: "colorInput"}, class: "form-field__input blah", inline: true %>
<%= f.text_field :color , data: { category_target: "colorInput"}, inline: true %>
<%= lucide_icon "palette", class: "w-8 h-8 cursor-pointer hover:bg-gray-100 p-1", data: { action: "click->category#toggleSections" } %>
</div>
<div data-category-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive ">

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>

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

@ -1,6 +1,5 @@
<%# locals: (import:, mapping_class:, step_idx:) %>
<% mappings = mapping_class.for_import(import) %>
<% is_last_step = step_idx == import.mapping_steps.count - 1 %>

8
app/views/import/rows/_form.html.erb
View file

@ -26,20 +26,20 @@
"focus:outline-none focus:z-10 relative",
],
disabled: row.import.complete? %>
<% if !cell_is_valid?(row, key) %>
<span class="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 md:hidden"
<span class="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 md:hidden"
data-action="click->mobile-cell-interaction#toggleErrorMessage"
data-mobile-cell-interaction-target="errorIcon">
<%= lucide_icon "alert-circle", class: "w-4 h-4" %>
</span>
<div class="absolute left-4 right-4 bottom-full mb-2 p-2 bg-red-50 border border-red-200 rounded-lg shadow-lg text-xs text-red-600 hidden md:hidden z-20"
data-mobile-cell-interaction-target="errorTooltip">
<%= row.errors[key].join(", ") %>
</div>
<% end %>
<div class="absolute inset-0 bg-primary/5 pointer-events-none opacity-0 transition-opacity duration-150 ease-in-out z-0" data-mobile-cell-interaction-target="highlight"></div>
</div>
<% end %>

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

@ -11,9 +11,9 @@
<p class="text-secondary text-sm"><%= t(".description") %></p>
</div>
<div
data-controller="tabs"
data-tabs-active-class="bg-surface shadow-sm text-primary"
<div
data-controller="tabs"
data-tabs-active-class="bg-surface shadow-sm text-primary"
data-tabs-inactive-class="text-secondary"
data-tabs-default-tab-value="csv-upload-tab">
<div class="flex justify-center mb-4 w-full">
@ -47,12 +47,12 @@
<span class="font-medium text-primary">Browse</span> to add your CSV file here
</p>
</div>
<div class="flex flex-col items-center hidden" data-file-upload-target="fileName">
<%= lucide_icon("file-text", class: "w-6 h-6 mb-4 text-primary") %>
<p class="mb-2 text-md font-medium text-primary"></p>
</div>
<%= form.file_field :csv_file, class: "hidden", "data-auto-submit-form-target": "auto", "data-file-upload-target": "input" %>
</div>
</div>
@ -72,5 +72,4 @@
</span>
</div>
</div>

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

@ -43,7 +43,7 @@
</div>
<% end %>
<div class="h-px bg-alpha-black-200 w-12 group-last:hidden"></div>
<hr class="border border-secondary w-12 group-last:hidden">
</li>
<% end %>
</ul>

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

@ -16,9 +16,9 @@
<% headers.each_with_index do |header, index| %>
<th class="
bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
<%= index == 0 ? 'rounded-tl-md' : '' %>
<%= index == headers.length - 1 ? 'rounded-tr-md' : '' %>
<%= index < headers.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
<%= index == 0 ? "rounded-tl-md" : "" %>
<%= index == headers.length - 1 ? "rounded-tr-md" : "" %>
<%= index < headers.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
">
<%= header %>
</th>
@ -31,9 +31,9 @@
<% row.each_with_index do |(header, value), col_index| %>
<td class="
px-3 py-2.5 whitespace-nowrap text-left
<%= col_index < row.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
<%= !caption && row_index == rows.length - 1 && col_index == 0 ? 'rounded-bl-md' : '' %>
<%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? 'rounded-br-md' : '' %>
<%= col_index < row.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
<%= !caption && row_index == rows.length - 1 && col_index == 0 ? "rounded-bl-md" : "" %>
<%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? "rounded-br-md" : "" %>
">
<%= value %>
</td>

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>

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

@ -13,11 +13,11 @@
<% if (controller_name == "sessions" && action_name == "new") || (controller_name == "registrations" && action_name == "new") %>
<div class="space-y-3 md:hidden w-full my-4">
<div class="bg-surface-inset rounded-lg p-1 flex">
<%= link_to new_session_path,
<%= link_to new_session_path,
class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %>
<%= t("layouts.auth.sign_in") %>
<% end %>
<%= link_to new_registration_path,
<%= link_to new_registration_path,
class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{!current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %>
<%= t("layouts.auth.sign_up") %>
<% end %>

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

@ -1,5 +1,5 @@
<%= render "layouts/shared/htmldoc" do %>
<div class="flex flex-col h-dvh bg-white pt-safe">
<div class="flex flex-col h-dvh bg-container pt-safe">
<header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || imports_path do %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>

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

@ -12,7 +12,7 @@
<%= javascript_importmap_tags %>
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

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

@ -1,5 +1,5 @@
<%= render "layouts/shared/htmldoc" do %>
<div class="flex flex-col h-dvh pt-safe">
<div class="bg-container flex flex-col h-dvh pt-safe">
<header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || root_path do %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>

2
app/views/messages/_chat_form.html.erb
View file

@ -32,4 +32,4 @@
<% end %>
<p class="text-xs text-secondary">AI responses are informational only and are not financial advice.</p>
</div>
</div>

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

2
app/views/pages/dashboard.html.erb
View file

@ -4,7 +4,7 @@
<h1 class="text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
<p class="text-gray-500">Here's what's happening with your finances</p>
</div>
<%= link_to new_account_path(step: "method_select", classification: "asset"),
class: "btn btn--primary flex items-center justify-center gap-2 rounded-full w-9 h-9 md:hidden",
data: { turbo_frame: "modal" } do %>

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

@ -17,7 +17,7 @@
<div class="flex items-center gap-2 text-sm">
<div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div>
<p class="text-secondary"><%= account_group.name %></p>
<p class="text-black font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
<p class="text-primary font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
</div>
<% end %>
</div>
@ -55,7 +55,7 @@
<div class="flex sm:hidden items-center gap-2">
<div class="flex gap-[3px]">
<% 10.times do |i| %>
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
<% end %>
</div>
<p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>
@ -85,7 +85,7 @@
<div class="flex sm:hidden items-center gap-2">
<div class="flex gap-[3px]">
<% 10.times do |i| %>
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
<div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
<% end %>
</div>
<p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p>

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 %>

26
app/views/registrations/new.html.erb
View file

@ -32,28 +32,28 @@
placeholder: "you@example.com",
label: true,
disabled: @invitation.present? %>
<% if invite_code_required? && !@invitation %>
<%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %>
<% end %>
<%= form.hidden_field :invitation, value: @invitation&.token %>
<div data-controller="password-validator">
<div data-controller="password-visibility" class="relative">
<%= form.password_field :password,
autocomplete: "new-password",
required: "required",
<%= form.password_field :password,
autocomplete: "new-password",
required: "required",
placeholder: t(".password_placeholder"),
label: true,
label: true,
maxlength: 72,
data: {
data: {
password_validator_target: "input",
password_visibility_target: "input",
action: "input->password-validator#validate"
} %>
<button type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
<button type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
data-action="click->password-visibility#toggle">
<div data-password-visibility-target="showIcon">
<%= lucide_icon "eye", class: "w-5 h-5 text-gray" %>
@ -63,14 +63,14 @@
</div>
</button>
</div>
<div class="flex gap-4 my-4">
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
</div>
<div class="space-y-1 my-4">
<div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="length">
<%= lucide_icon "check", class: "w-4 h-4" %>
@ -90,8 +90,6 @@
</div>
</div>
</div>
<%= form.submit t(".submit") %>
<% end %>

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

@ -12,7 +12,7 @@
<%= form.select :action_type, rule.action_executors.map { |executor| [ executor.label, executor.key ] }, {}, data: { action: "rule--actions#handleActionTypeChange" } %>
</div>
<%= tag.div class: class_names("min-w-1/2 flex items-center gap-2", "hidden" => !needs_value),
<%= 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 %>

2
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" %>

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

@ -17,4 +17,4 @@
<%= tag.a "Create rule", href: new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]), class: "btn btn--primary", data: { turbo_frame: "modal" } %>
<% end %>
<% end %>
<% end %>
<% end %>

10
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,18 +75,18 @@
</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" } %>

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

@ -22,7 +22,7 @@
<span class="px-2 py-1 border border-alpha-black-200 rounded-full">
<% if rule.actions.first.value && rule.actions.first.options %>
<%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
<% else%>
<% else %>
<%= rule.actions.first.executor.label %>
<% end %>
</span>

4
app/views/rules/confirm.html.erb
View file

@ -9,7 +9,7 @@
</div>
<div class="text-secondary text-sm">
<p>
You are about to apply this rule to
You are about to apply this rule to
<span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
that meet the specified rule criteria. Please confirm if you wish to proceed with this change.
</p>
@ -17,4 +17,4 @@
</div>
<%= button_to "Confirm changes", apply_rule_path(@rule), class: "btn btn--primary w-full justify-center", data: { turbo_frame: "_top"} %>
</div>
<% end %>
<% end %>

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

4
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>
@ -89,7 +89,7 @@
<% end %>
</section>
</nav>
<nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav" data-preserve-scroll data-controller="preserve-scroll">
<nav class="space-y-4 overflow-y-auto md:hidden" id="mobile-settings-nav" data-preserve-scroll data-controller="preserve-scroll">
<ul class="flex space-y-1">

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 %>

9
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>
@ -48,9 +48,8 @@
</span>
<% end %>
<p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p>
<%= form.file_field :profile_image,
accept: "image/png, image/jpeg",
class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",

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/_icon_image.html.erb
View file

@ -3,4 +3,4 @@
<% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
<% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key )%>
<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>

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 %>

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

@ -20,4 +20,4 @@
<span class="text-sm text-secondary">
<%= I18n.l(entry.date, format: :long) %>
</span>
<% end %>
<% end %>

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

@ -4,7 +4,7 @@
<%= turbo_frame_tag dom_id(entry) do %>
<%= turbo_frame_tag dom_id(transaction) do %>
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 md:p-4
<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 md:p-4
<%= @focused_record == entry || @focused_record == transaction ?
"border border-gray-900 rounded-lg" : "" %>">

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

4
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 %>