1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 15:35:22 +02:00

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

This commit is contained in:
Guilherme Mena 2025-04-19 18:11:21 -03:00
parent 0f43de34f8
commit b86dc2328c
9 changed files with 44 additions and 32 deletions

View file

@ -849,19 +849,3 @@
@apply bg-white;
}
}
@utility bg-divider-adaptive {
@apply bg-black;
@variant theme-dark {
@apply bg-white;
}
}
@utility bg-primary-adaptive {
@apply bg-white;
@variant theme-dark {
@apply bg-black ;
}
}

View file

@ -6,7 +6,11 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
text_field_helpers.each do |selector|
class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
def #{selector}(method, options = {})
merged_options = { class: "form-field__input" }.merge(options)
base_classes = "form-field__input text-ellipsis text-subdued"
merged_options = options.merge(
class: [base_classes, options[:class]].compact.join(" ")
)
label = build_label(method, options)
field = super(method, merged_options)
@ -22,7 +26,7 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
end
def select(method, choices, options = {}, html_options = {})
merged_html_options = { class: "form-field__input" }.merge(html_options)
merged_html_options = { class: "form-field__input text-ellipsis text-subdued" }.merge(html_options)
label = build_label(method, options.merge(required: merged_html_options[:required]))
field = super(method, choices, options, merged_html_options)
@ -31,7 +35,7 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
end
def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
merged_html_options = { class: "form-field__input" }.merge(html_options)
merged_html_options = { class: "form-field__input text-ellipsis text-subdued" }.merge(html_options)
label = build_label(method, options.merge(required: merged_html_options[:required]))
field = super(method, collection, value_method, text_method, options, merged_html_options)
@ -59,6 +63,30 @@ class StyledFormBuilder < ActionView::Helpers::FormBuilder
super(value, merged_options)
end
def number_field(method, options = {})
base_classes = "form-field__input text-ellipsis text-subdued"
merged_options = options.merge(
class: [ base_classes, options[:class] ].compact.join(" ")
)
label = build_label(method, options)
field = super(method, merged_options)
build_styled_field(label, field, merged_options)
end
def date_field(method, options = {})
base_classes = "form-field__input text-ellipsis text-subdued"
merged_options = options.merge(
class: [ base_classes, options[:class] ].compact.join(" ")
)
label = build_label(method, options)
field = super(method, merged_options)
build_styled_field(label, field, merged_options)
end
private
def build_styled_field(label, field, options, remove_padding_right: false)

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 dark:hover:bg-overlay dark:focus:bg-overlay fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
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>

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 dark:hover:bg-overlay dark:focus:bg-overlay fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
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>

View file

@ -31,7 +31,7 @@
</div>
<% end %>
<div class="h-px bg-divider-adaptive w-12 group-last:hidden"></div>
<div class="h-px bg-inverse w-12 group-last:hidden"></div>
</li>
<% end %>
</ul>

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

View file

@ -43,7 +43,7 @@
</div>
<% end %>
<div class="h-px bg-divider-adaptive w-12 group-last:hidden"></div>
<div class="h-px bg-inverse w-12 group-last:hidden"></div>
</li>
<% end %>
</ul>

View file

@ -1,5 +1,5 @@
<%= render "layouts/shared/htmldoc" do %>
<div class="bg-primary-adaptive flex flex-col h-dvh pt-safe">
<div class="bg-container-inset 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" %>

View file

@ -26,10 +26,10 @@
</section>
<section class="space-y-2">
<%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true, class: "form-field__input text-ellipsis text-subdued" %>
<%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true, class: "form-field__input text-ellipsis text-subdued" %>
<%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001, class: "form-field__input text-ellipsis text-subdued" %>
<%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, class: "form-field__input text-ellipsis text-subdued", max: Date.current %>
<%= f.collection_select :from_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".from") }, required: true %>
<%= f.collection_select :to_account_id, Current.family.accounts.manual.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".to") }, required: true %>
<%= f.number_field :amount, label: t(".amount"), required: true, min: 0, placeholder: "100", step: 0.00000001 %>
<%= f.date_field :date, value: transfer.inflow_transaction&.entry&.date || Date.current, label: t(".date"), required: true, max: Date.current %>
</section>
<section>