Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-19 05:09:38 +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 { details>summary::-webkit-details-marker {
@apply hidden; @apply hidden;
} }
details>summary { details>summary {
@apply list-none; @apply list-none;
} }
input[type='radio'] { 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 { @variant theme-dark {
/* Dark mode radio button base and checked styles */ /* 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; @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; @apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
} }
} }
.btn--secondary { .btn--secondary {
@apply button-bg-secondary text-primary; @apply button-bg-secondary text-primary;
@apply hover:button-bg-secondary-hover; @apply hover:button-bg-secondary-hover;
@variant theme-dark { @variant theme-dark {
@apply button-bg-secondary text-white; @apply text-white;
@apply hover:button-bg-secondary-hover; background-color: var(--color-gray-700);
&:hover {
background-color: var(--color-gray-800);
}
} }
} }
.btn--outline { .btn--outline {
@apply border border-alpha-black-200 text-primary disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-400; @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 { @variant theme-dark {
@apply border-alpha-white-300 text-white disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-600; @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 { .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 { @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 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 focus-within:border-secondary focus-within:shadow-none focus-within:ring-4 focus-within:ring-alpha-black-200;
@apply transition-all duration-300; @apply transition-all duration-300;
@variant theme-dark { @variant theme-dark {
@apply focus-within:ring-alpha-white-300; @apply focus-within:ring-alpha-white-300;
} }
@ -589,22 +607,22 @@
/* Add styles for multiple select within form fields */ /* Add styles for multiple select within form fields */
select[multiple] { select[multiple] {
@apply py-2 pr-2 space-y-0.5 overflow-y-auto; @apply py-2 pr-2 space-y-0.5 overflow-y-auto;
option { option {
@apply py-2 rounded-md; @apply py-2 rounded-md;
} }
option:checked { option:checked {
@apply after:content-['\2713'] bg-container-inset after:text-gray-500 after:ml-2; @apply after:content-['\2713'] bg-container-inset after:text-gray-500 after:ml-2;
} }
option:active, option:active,
option:focus { option:focus {
@apply bg-container-inset; @apply bg-container-inset;
} }
} }
} }
.form-field__label { .form-field__label {
@apply block text-xs text-secondary peer-disabled:text-subdued; @apply block text-xs text-secondary peer-disabled:text-subdued;
} }
@ -616,16 +634,26 @@
@apply disabled:text-subdued; @apply disabled:text-subdued;
@apply text-ellipsis overflow-hidden whitespace-nowrap; @apply text-ellipsis overflow-hidden whitespace-nowrap;
@apply transition-opacity duration-300; @apply transition-opacity duration-300;
@apply placeholder:text-subdued;
&select { &select {
@apply pr-8; @apply pr-8;
} }
@variant theme-dark {
&::-webkit-calendar-picker-indicator {
filter: invert(1);
cursor: pointer;
}
}
} }
.form-field__radio { .form-field__radio {
@apply text-primary; @apply text-primary;
} }
.form-field__submit { .form-field__submit {
@apply cursor-pointer rounded-lg bg-surface p-3 text-center text-white hover:bg-surface-hover; @apply cursor-pointer rounded-lg bg-surface p-3 text-center text-white hover:bg-surface-hover;
} }
@ -642,21 +670,37 @@
&[type='checkbox'] { &[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; @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 { &[type='checkbox']:disabled {
@apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400; @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 { .checkbox--dark {
&[type='checkbox'] { &[type='checkbox'] {
@apply ring-gray-900 checked:text-white; @apply ring-gray-900 checked:text-white;
} }
&[type='checkbox']:disabled { &[type='checkbox']:disabled {
@apply cursor-not-allowed opacity-80 ring-gray-600; @apply cursor-not-allowed opacity-80 ring-gray-600;
} }
&[type='checkbox']:checked { &[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"); 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 after:transition-transform after:duration-300 after:ease-in-out;
@apply peer-checked:bg-green-600 peer-checked:after:translate-x-4; @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
@apply transition-colors duration-300; @apply transition-colors duration-300;
@variant theme-dark {
background-color: var(--color-gray-700);
}
} }
/* Tooltips */ /* Tooltips */
.tooltip { .tooltip {
@apply hidden absolute; @apply hidden absolute;
} }
.qrcode svg path {
fill: var(--color-black);
@variant theme-dark {
fill: var(--color-white);
}
}
} }
@layer utilities { @layer utilities {
/* Specific override for strong tags in prose under dark mode */ /* Specific override for strong tags in prose under dark mode */
.prose:where([data-theme=dark], [data-theme=dark] *) strong { .prose:where([data-theme=dark], [data-theme=dark] *) strong {
color: theme(colors.white) !important; color: theme(colors.white) !important;
} }
} }
/* Button Backgrounds */ /* Button Backgrounds */
@utility button-bg-primary { @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 { @variant theme-dark {
@apply bg-white; /* Maps to fg-primary dark */ @apply bg-white;
/* Maps to fg-primary dark */
} }
} }
@utility button-bg-primary-hover { @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 { @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 { @variant theme-dark {
@apply bg-white; @apply bg-white;
} }
} }

2
app/helpers/forms_helper.rb
View file

@ -30,7 +30,7 @@ end
private private
def radio_tab_contents(label:, icon:, class: nil) 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 lucide_icon(icon, class: "w-5 h-5")
concat tag.span(label, class: "group-has-checked:font-semibold") concat tag.span(label, class: "group-has-checked:font-semibold")
end end

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

@ -1,7 +1,7 @@
<%# locals: (accountable:) %> <%# locals: (accountable:) %>
<%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]), <%= 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"> <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") %> <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
</span> </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 %> 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"> <div class="flex items-center justify-center w-5 h-5">
<%= lucide_icon("plus")%> <%= lucide_icon("plus") %>
</div> </div>
<p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p> <p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
<% end %> <% end %>

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

@ -24,7 +24,7 @@
<% unless params[:return_to].present? %> <% unless params[:return_to].present? %>
<%= button_to imports_path(import: { type: "AccountImport" }), <%= button_to imports_path(import: { type: "AccountImport" }),
data: { turbo_frame: :_top }, 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"> <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") %> <%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
</span> </span>

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

@ -15,7 +15,7 @@
</button> </button>
</div> </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="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> <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 %> <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
<div class="text-sm"> <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)]"> <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") %> <%= lucide_icon("keyboard", class: "text-secondary w-5 h-5") %>
</span> </span>

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

@ -37,7 +37,7 @@
data: { controller: "auto-submit-form" } do |form| %> data: { controller: "auto-submit-form" } do |form| %>
<div class="flex gap-2 mb-4"> <div class="flex gap-2 mb-4">
<div class="grow"> <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") %> <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
<%= hidden_field_tag :account_id, @account.id %> <%= hidden_field_tag :account_id, @account.id %>
<%= form.search_field :search, <%= form.search_field :search,

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

@ -1,7 +1,7 @@
<%# locals: (budget:) %> <%# locals: (budget:) %>
<div> <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> <h3 class="text-sm text-secondary mb-2">Income</h3>
<span class="inline-block mb-2 text-xl font-medium text-primary"> <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" step[:is_complete] ? "text-green-600" : "text-secondary"
end %> end %>
<% step_class = if is_current <% step_class = if is_current
"bg-primary text-white" "bg-primary text-primary"
else else
step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-container-inset" step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-container-inset"
end %> end %>
@ -31,7 +31,7 @@
</div> </div>
<% end %> <% 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> </li>
<% end %> <% end %>
</ul> </ul>

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

@ -1,7 +1,7 @@
<%# locals: (budget:) %> <%# locals: (budget:) %>
<div> <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> <h3 class="text-sm text-secondary mb-2">Expected income</h3>
<span class="inline-block mb-2 text-xl font-medium text-primary"> <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 hidden flex-col" data-category-target="paletteSection">
<div class="flex gap-2 items-center w-full"> <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> <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" } %> <%= lucide_icon "palette", class: "w-8 h-8 cursor-pointer hover:bg-gray-100 p-1", data: { action: "click->category#toggleSections" } %>
</div> </div>
<div data-category-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive "> <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 %> <%= turbo_frame_tag "category_dropdown" do %>
<div class="flex flex-col relative" data-controller="list-filter"> <div class="flex flex-col relative" data-controller="list-filter">
<div class="grow p-1.5"> <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"> <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") %> <%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div> </div>

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="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"> <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
<%= icon("sparkles") %> <%= icon("sparkles") %>
</div> </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>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> <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> </p>
<div class="space-y-3"> <div class="space-y-3">

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

@ -15,7 +15,7 @@
<%= render @chats %> <%= render @chats %>
</div> </div>
<% else %> <% 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"> <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") %> <%= icon("message-square", size: "lg") %>
</div> </div>

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

@ -15,7 +15,7 @@
</label> </label>
<% end %> <% end %>
</div> </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" } %> <%= f.text_field :name, placeholder: t(".name_placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
</div> </div>
</section> </section>

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

@ -1,6 +1,5 @@
<%# locals: (import:, mapping_class:, step_idx:) %> <%# locals: (import:, mapping_class:, step_idx:) %>
<% mappings = mapping_class.for_import(import) %> <% mappings = mapping_class.for_import(import) %>
<% is_last_step = step_idx == import.mapping_steps.count - 1 %> <% 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", "focus:outline-none focus:z-10 relative",
], ],
disabled: row.import.complete? %> disabled: row.import.complete? %>
<% if !cell_is_valid?(row, key) %> <% 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-action="click->mobile-cell-interaction#toggleErrorMessage"
data-mobile-cell-interaction-target="errorIcon"> data-mobile-cell-interaction-target="errorIcon">
<%= lucide_icon "alert-circle", class: "w-4 h-4" %> <%= lucide_icon "alert-circle", class: "w-4 h-4" %>
</span> </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" <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"> data-mobile-cell-interaction-target="errorTooltip">
<%= row.errors[key].join(", ") %> <%= row.errors[key].join(", ") %>
</div> </div>
<% end %> <% 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 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> </div>
<% end %> <% end %>

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

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

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

@ -43,7 +43,7 @@
</div> </div>
<% end %> <% 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> </li>
<% end %> <% end %>
</ul> </ul>

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

@ -16,9 +16,9 @@
<% headers.each_with_index do |header, index| %> <% headers.each_with_index do |header, index| %>
<th class=" <th class="
bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
<%= index == 0 ? 'rounded-tl-md' : '' %> <%= index == 0 ? "rounded-tl-md" : "" %>
<%= index == headers.length - 1 ? 'rounded-tr-md' : '' %> <%= index == headers.length - 1 ? "rounded-tr-md" : "" %>
<%= index < headers.length - 1 ? 'border-r border-r-alpha-black-200' : '' %> <%= index < headers.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
"> ">
<%= header %> <%= header %>
</th> </th>
@ -31,9 +31,9 @@
<% row.each_with_index do |(header, value), col_index| %> <% row.each_with_index do |(header, value), col_index| %>
<td class=" <td class="
px-3 py-2.5 whitespace-nowrap text-left px-3 py-2.5 whitespace-nowrap text-left
<%= col_index < row.length - 1 ? 'border-r border-r-alpha-black-200' : '' %> <%= 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 == 0 ? "rounded-bl-md" : "" %>
<%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? 'rounded-br-md' : '' %> <%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? "rounded-br-md" : "" %>
"> ">
<%= value %> <%= value %>
</td> </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"> <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") %> <%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
</div> </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) %> <%= t(".resume", type: @pending_import.type.titleize) %>
</span> </span>
</div> </div>
@ -41,7 +41,7 @@
<div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center"> <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") %> <%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
</div> </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") %> <%= t(".import_transactions") %>
</span> </span>
</div> </div>
@ -61,7 +61,7 @@
<div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center"> <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") %> <%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
</div> </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") %> <%= t(".import_portfolio") %>
</span> </span>
</div> </div>
@ -81,7 +81,7 @@
<div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center"> <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") %> <%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
</div> </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") %> <%= t(".import_accounts") %>
</span> </span>
</div> </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") %> <% 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="space-y-3 md:hidden w-full my-4">
<div class="bg-surface-inset rounded-lg p-1 flex"> <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 %> 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") %> <%= t("layouts.auth.sign_in") %>
<% end %> <% 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 %> 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") %> <%= t("layouts.auth.sign_up") %>
<% end %> <% end %>

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

@ -1,5 +1,5 @@
<%= render "layouts/shared/htmldoc" do %> <%= 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"> <header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || imports_path do %> <%= link_to content_for(:previous_path) || imports_path do %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %> <%= 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 %> <%= javascript_importmap_tags %>
<%= turbo_refreshes_with method: :morph, scroll: :preserve %> <%= 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="mobile-web-app-capable" content="yes">
<meta name="apple-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 %> <%= 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"> <header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || root_path do %> <%= link_to content_for(:previous_path) || root_path do %>
<%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %> <%= 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 %> <% end %>
<p class="text-xs text-secondary">AI responses are informational only and are not financial advice.</p> <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> <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 %> <%= settings_section title: t(".scan_title"), subtitle: t(".scan_description") do %>
<div class="space-y-6"> <div class="space-y-6">
<div> <div class="qrcode">
<%= generate_mfa_qr_code(Current.user.provisioning_uri) %> <%= generate_mfa_qr_code(Current.user.provisioning_uri) %>
</div> </div>
@ -26,7 +26,7 @@
readonly readonly
autocomplete="off" autocomplete="off"
value="<%= Current.user.otp_secret %>" 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"> <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
<span data-clipboard-target="iconDefault"> <span data-clipboard-target="iconDefault">
<%= lucide_icon "copy", class: "w-5 h-5" %> <%= 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" %> <%= 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>
<div class="space-y-1 mb-6"> <div class="space-y-1 mb-6">
<h1 class="text-2xl font-medium"><%= t(".title") %></h1> <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" %> <%= 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>
<div class="space-y-1 mb-6"> <div class="space-y-1 mb-6">
<h1 class="text-2xl font-medium md:text-2xl"><%= t(".title") %></h1> <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="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"> <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" %> <%= 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> <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> <p class="text-gray-500">Here's what's happening with your finances</p>
</div> </div>
<%= link_to new_account_path(step: "method_select", classification: "asset"), <%= 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", class: "btn btn--primary flex items-center justify-center gap-2 rounded-full w-9 h-9 md:hidden",
data: { turbo_frame: "modal" } do %> 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="flex items-center gap-2 text-sm">
<div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div> <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-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> </div>
<% end %> <% end %>
</div> </div>
@ -55,7 +55,7 @@
<div class="flex sm:hidden items-center gap-2"> <div class="flex sm:hidden items-center gap-2">
<div class="flex gap-[3px]"> <div class="flex gap-[3px]">
<% 10.times do |i| %> <% 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 %> <% end %>
</div> </div>
<p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p> <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 sm:hidden items-center gap-2">
<div class="flex gap-[3px]"> <div class="flex gap-[3px]">
<% 10.times do |i| %> <% 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 %> <% end %>
</div> </div>
<p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p> <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> <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> <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"> <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" %> <%= 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> <span class="text-sm font-medium text-primary text-center">Write a feature request</span>
<% end %> <% end %>
<% if self_hosted? %> <% 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" %> <%= 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> <span class="text-sm font-medium text-primary text-center">File a bug report</span>
<% end %> <% end %>
<% else %> <% 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" %> <%= 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> <span class="text-sm font-medium text-primary text-center">File a bug report</span>
<% end %> <% end %>
<% 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" %> <%= 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> <span class="text-sm font-medium text-primary text-center">Discuss Maybe with others</span>
<% end %> <% end %>

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

@ -32,28 +32,28 @@
placeholder: "you@example.com", placeholder: "you@example.com",
label: true, label: true,
disabled: @invitation.present? %> disabled: @invitation.present? %>
<% if invite_code_required? && !@invitation %> <% if invite_code_required? && !@invitation %>
<%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %> <%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %>
<% end %> <% end %>
<%= form.hidden_field :invitation, value: @invitation&.token %> <%= form.hidden_field :invitation, value: @invitation&.token %>
<div data-controller="password-validator"> <div data-controller="password-validator">
<div data-controller="password-visibility" class="relative"> <div data-controller="password-visibility" class="relative">
<%= form.password_field :password, <%= form.password_field :password,
autocomplete: "new-password", autocomplete: "new-password",
required: "required", required: "required",
placeholder: t(".password_placeholder"), placeholder: t(".password_placeholder"),
label: true, label: true,
maxlength: 72, maxlength: 72,
data: { data: {
password_validator_target: "input", password_validator_target: "input",
password_visibility_target: "input", password_visibility_target: "input",
action: "input->password-validator#validate" action: "input->password-validator#validate"
} %> } %>
<button type="button" <button type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none" 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"> data-action="click->password-visibility#toggle">
<div data-password-visibility-target="showIcon"> <div data-password-visibility-target="showIcon">
<%= lucide_icon "eye", class: "w-5 h-5 text-gray" %> <%= lucide_icon "eye", class: "w-5 h-5 text-gray" %>
@ -63,14 +63,14 @@
</div> </div>
</button> </button>
</div> </div>
<div class="flex gap-4 my-4"> <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="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="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="number"></div>
<div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div> <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
</div> </div>
<div class="space-y-1 my-4"> <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"> <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" %> <%= lucide_icon "check", class: "w-4 h-4" %>
@ -90,8 +90,6 @@
</div> </div>
</div> </div>
</div> </div>
<%= form.submit t(".submit") %> <%= form.submit t(".submit") %>
<% end %> <% 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" } %> <%= form.select :action_type, rule.action_executors.map { |executor| [ executor.label, executor.key ] }, {}, data: { action: "rule--actions#handleActionTypeChange" } %>
</div> </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 %> data: { rule__actions_target: "actionValue" } do %>
<span class="font-medium uppercase text-xs">to</span> <span class="font-medium uppercase text-xs">to</span>
<%= form.select :value, action.options || [], {}, disabled: !needs_value %> <%= 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 %> <% condition = form.object %>
<% rule = condition.rule %> <% 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" %> <%= 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" } %> <%= 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 %>
<% end %> <% end %>

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

@ -10,7 +10,7 @@
<% end %> <% end %>
<section class="space-y-4"> <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 %> <%# Condition template, used by Stimulus controller to add new conditions dynamically %>
<template data-rules-target="conditionGroupTemplate"> <template data-rules-target="conditionGroupTemplate">
@ -50,7 +50,7 @@
</section> </section>
<section class="space-y-4"> <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 %> <%# Action template, used by Stimulus controller to add new actions dynamically %>
<template data-rules-target="actionTemplate"> <template data-rules-target="actionTemplate">
@ -75,18 +75,18 @@
</section> </section>
<section class="space-y-4"> <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="space-y-2">
<div class="flex items-center gap-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.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>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<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.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> </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" } %>

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

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

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

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

@ -30,7 +30,7 @@
</div> </div>
<% end %> <% 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? %> <% if @rules.any? %>
<div class="rounded-xl bg-gray-25 space-y-1"> <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" %> <%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
<span class="hidden md:block">Back</span> <span class="hidden md:block">Back</span>
<% end %> <% 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 esc
<% end %> <% end %>
</div> </div>
@ -89,7 +89,7 @@
<% end %> <% end %>
</section> </section>
</nav> </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"> <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( <%= link_to path, class: class_names(
"flex items-center gap-2 btn btn--ghost whitespace-nowrap", "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 %> ), aria: { current: ("page" if page_active?(path)) } do %>
<%= lucide_icon(icon, class: "w-5 h-5") if icon %> <%= lucide_icon(icon, class: "w-5 h-5") if icon %>
<%= name %> <%= name %>

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

@ -1,7 +1,7 @@
<%# locals: (form:, user:) %> <%# 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="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 %> <%# 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"> <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 %> <%# The placeholder image for empty avatar field %>
<div data-profile-image-preview-target="placeholderImage" <div data-profile-image-preview-target="placeholderImage"
class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>"> 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"> <div class="h-full w-full flex justify-center items-center bg-container">
<%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %> <%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
</div> </div>
</div> </div>
@ -48,9 +48,8 @@
</span> </span>
<% end %> <% end %>
<p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p> <p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p>
<%= form.file_field :profile_image, <%= form.file_field :profile_image,
accept: "image/png, image/jpeg", accept: "image/png, image/jpeg",
class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium", 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 %> <%= render "settings/user_avatar", user: user %>
</div> </div>
<p class="text-primary font-medium text-sm"><%= user.display_name %></p> <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> <p class="uppercase text-secondary font-medium text-xs"><%= user.role %></p>
</div> </div>
<% if Current.user.admin? && user != Current.user %> <% if Current.user.admin? && user != Current.user %>
@ -55,7 +55,7 @@
title: t(".confirm_remove_member.title"), title: t(".confirm_remove_member.title"),
body: t(".confirm_remove_member.body", name: user.display_name), body: t(".confirm_remove_member.body", name: user.display_name),
accept: t(".remove_member"), 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 %> }} do %>
<%= lucide_icon "x", class: "w-5 h-5" %> <%= lucide_icon "x", class: "w-5 h-5" %>
<% end %> <% end %>
@ -72,7 +72,7 @@
</div> </div>
<div class="flex"> <div class="flex">
<p class="text-primary font-medium text-sm"><%= invitation.email %></p> <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> <p class="uppercase text-secondary font-medium text-xs"><%= t(".pending") %></p>
</div> </div>
</div> </div>
@ -86,7 +86,7 @@
readonly readonly
autocomplete="off" autocomplete="off"
value="<%= accept_invitation_url(invitation.token) %>" 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"> <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
<span data-clipboard-target="iconDefault"> <span data-clipboard-target="iconDefault">
<%= lucide_icon "copy", class: "w-5 h-5" %> <%= lucide_icon "copy", class: "w-5 h-5" %>
@ -105,7 +105,7 @@
title: t(".confirm_remove_invitation.title"), title: t(".confirm_remove_invitation.title"),
body: t(".confirm_remove_invitation.body", email: invitation.email), body: t(".confirm_remove_invitation.body", email: invitation.email),
accept: t(".remove_invitation"), 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 %> }} do %>
<%= lucide_icon "x", class: "w-5 h-5" %> <%= lucide_icon "x", class: "w-5 h-5" %>
<% end %> <% end %>
@ -141,7 +141,7 @@
title: t(".confirm_reset.title"), title: t(".confirm_reset.title"),
body: t(".confirm_reset.body"), body: t(".confirm_reset.body"),
accept: t(".reset_account"), 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> </div>
@ -158,7 +158,7 @@
title: t(".confirm_delete.title"), title: t(".confirm_delete.title"),
body: t(".confirm_delete.body"), body: t(".confirm_delete.body"),
accept: t(".delete_account"), 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> </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"> <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 flex-col mb-4">
<div class="flex justify-between mb-2 gap-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"> <button value="cancel">
<%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %> <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
</button> </button>

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

@ -2,7 +2,7 @@
<details class="group space-y-2" <%= "open" if open %>> <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 <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> <h3><%= title %></h3>
<%= lucide_icon "chevron-down", <%= lucide_icon "chevron-down",
class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %> 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 %> <% 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 %> <% 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]"> <article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
<div class="space-y-2"> <div class="space-y-2">
<header class="flex justify-between items-center"> <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" }) %> <%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
</header> </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 gap-1">
<div class="flex items-center grow 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 %> <%= currency.symbol %>
</span> </span>

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

@ -12,7 +12,7 @@
</label> </label>
<% end %> <% end %>
</div> </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" } %> <%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
</div> </div>
</section> </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? %> <% if entry.errors.any? %>
<%= render "shared/form_errors", model: entry %> <%= render "shared/form_errors", model: entry %>
<% end %> <% end %>
<section> <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: :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" %> <%= 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 %> <%= 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"> <span class="text-sm text-secondary">
<%= I18n.l(entry.date, format: :long) %> <%= I18n.l(entry.date, format: :long) %>
</span> </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(entry) do %>
<%= turbo_frame_tag dom_id(transaction) 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 ? <%= @focused_record == entry || @focused_record == transaction ?
"border border-gray-900 rounded-lg" : "" %>"> "border border-gray-900 rounded-lg" : "" %>">

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

@ -4,10 +4,10 @@
id="transaction-filters-menu" id="transaction-filters-menu"
data-menu-target="content" data-menu-target="content"
data-controller="tabs" 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] %>" 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"> 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| %> <% transaction_search_filters.each do |filter| %>
<button <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" 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> </button>
<% end %> <% end %>
</div> </div>
<div class="flex flex-col grow"> <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| %> <% transaction_search_filters.each do |filter| %>
<div id="<%= filter[:key] %>" data-tabs-target="tab"> <div id="<%= filter[:key] %>" data-tabs-target="tab">
<%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %> <%= 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:) %> <%# locals: (form:) %>
<div data-controller="list-filter"> <div data-controller="list-filter">
<div class="relative"> <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") %> <%= 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>
<div class="my-2" id="list" data-list-filter-target="list"> <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:) %> <%# locals: (form:) %>
<div data-controller="list-filter"> <div data-controller="list-filter">
<div class="relative"> <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") %> <%= 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>
<div class="my-2" id="list" data-list-filter-target="list"> <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, <%= form.date_field :start_date,
placeholder: "Start date", placeholder: "Start date",
value: @q[: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, <%= form.date_field :end_date,
placeholder: "End date", placeholder: "End date",
value: @q[: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> </div>

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

@ -1,7 +1,7 @@
<%# locals: (form:) %> <%# locals: (form:) %>
<div data-controller="list-filter"> <div data-controller="list-filter">
<div class="relative"> <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") %> <%= 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>
<div class="my-2" id="list" data-list-filter-target="list"> <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:) %> <%# locals: (form:) %>
<div data-controller="list-filter"> <div data-controller="list-filter">
<div class="relative"> <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") %> <%= 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>
<div class="my-2" id="list" data-list-filter-target="list"> <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 %> <% end %>
<section> <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 %> <%= 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" %> <%= lucide_icon "minus-circle", class: "w-4 h-4" %>
<%= tag.span t(".expense") %> <%= tag.span t(".expense") %>
@ -18,7 +18,7 @@
<%= tag.span t(".income") %> <%= tag.span t(".income") %>
<% end %> <% 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" %> <%= lucide_icon "arrow-right-left", class: "w-4 h-4" %>
<%= tag.span t(".transfer") %> <%= tag.span t(".transfer") %>
<% end %> <% end %>