mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
880ca69657
Behavioural + RUI audit follow-ups.
The yellow overload finding flagged three concurrent yellow surfaces
on the show page: the "Behind" status pill, the catch-up alert, and
the open-pledge banner(s). Demoting the alert to outline ownership
of the primary CTA addressed one layer, but the pill kept fighting
the alert for hue attention. "Behind" is a state, not a call to
action; the alert owns the action signal.
Switch the pill's classes from `bg-yellow-500/10 text-yellow-700`
to `bg-surface-inset text-yellow-700` (with the same dark-mode
override). Background goes neutral (matches paused/archived chips);
the text keeps the warning hue and the triangle-alert icon stays.
Signal preserved, weight reduced. The yellow alert below now reads
as the primary nudge instead of one of three matching tones.
Also: copy/em-dash sweep across goal surfaces. User-facing strings
that contained em-dashes ("Reaches 70% — $X of $Y", "into your
linked account — Sure will catch it", "You're at 80% — $X of $Y")
read as a stylistic tic; replace with comma/period/period
respectively. Form-stepper review placeholders "—" become "…"
(ellipsis reads as "not yet set" without the typographic weight).
Code comments + log messages also scrubbed for consistency; awkward
sed artifacts (//. its...) restored to readable English.
No locale-key shape changes; pure string-content edits + one
component-style tweak.
158 lines
8.5 KiB
Plaintext
158 lines
8.5 KiB
Plaintext
<%# locals: (goal:, linkable_accounts:) %>
|
|
|
|
<div data-controller="goal-stepper"
|
|
data-goal-stepper-currency-value="<%= Current.family.primary_currency_code %>"
|
|
data-goal-stepper-summary-with-date-value="<%= t("goals.form_stepper.step2.review.summary_with_date") %>"
|
|
data-goal-stepper-summary-no-date-value="<%= t("goals.form_stepper.step2.review.summary_no_date") %>"
|
|
data-goal-stepper-account-count-one-value="<%= t("goals.form_stepper.step2.review.account_count.one") %>"
|
|
data-goal-stepper-account-count-other-value="<%= t("goals.form_stepper.step2.review.account_count.other") %>"
|
|
data-goal-stepper-suggested-with-date-value="<%= t("goals.form_stepper.step2.review.suggested_with_date") %>"
|
|
data-goal-stepper-suggested-no-date-value="<%= t("goals.form_stepper.step2.review.suggested_no_date") %>">
|
|
<% if goal.errors[:base].any? %>
|
|
<%= render "shared/form_errors", model: goal %>
|
|
<% end %>
|
|
|
|
<%# Connected stepper %>
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="flex items-center gap-2" data-goal-stepper-target="step1Indicator">
|
|
<span data-goal-stepper-target="step1Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-inverse text-inverse text-xs font-medium">1</span>
|
|
<span class="text-sm font-medium text-primary"><%= t("goals.form_stepper.step1.label") %></span>
|
|
</div>
|
|
<div class="flex-1 border-t-2 border-subdued" data-goal-stepper-target="stepperLine"></div>
|
|
<div class="flex items-center gap-2" data-goal-stepper-target="step2Indicator">
|
|
<span data-goal-stepper-target="step2Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center border border-secondary text-secondary text-xs font-medium">2</span>
|
|
<span class="text-sm font-medium text-secondary"><%= t("goals.form_stepper.step2.label") %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<%= styled_form_with model: goal, url: goals_path, class: "space-y-4", data: { action: "keydown.enter->goal-stepper#blockEnter" } do |f| %>
|
|
<section data-goal-stepper-target="step1Panel" class="space-y-5">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-primary mb-1"><%= t("goals.form_stepper.step1.heading") %></h3>
|
|
<p class="text-sm text-secondary"><%= t("goals.form_stepper.step1.subheading") %></p>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
|
|
</div>
|
|
|
|
<div>
|
|
<%= f.text_field :name,
|
|
placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
|
|
autofocus: true,
|
|
label: t("goals.form_stepper.step1.fields.name"),
|
|
data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
|
|
<p class="hidden mt-1.5 text-xs text-destructive" data-goal-stepper-target="nameError"><%= t("goals.form_stepper.errors.name_required") %></p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<%= f.money_field :target_amount,
|
|
label: t("goals.form_stepper.step1.fields.target_amount"),
|
|
hide_currency: true,
|
|
amount_data: { goal_stepper_target: "amountInput", action: "input->goal-stepper#amountChanged" } %>
|
|
<p class="hidden mt-1.5 text-xs text-destructive" data-goal-stepper-target="amountError"><%= t("goals.form_stepper.errors.amount_required") %></p>
|
|
</div>
|
|
<%= f.date_field :target_date,
|
|
label: t("goals.form_stepper.step1.fields.target_date") %>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="mb-2">
|
|
<span class="block text-sm font-medium text-primary"><%= t("goals.form_stepper.step1.fields.funding_accounts") %></span>
|
|
<p class="text-xs text-secondary mt-0.5"><%= t("goals.form_stepper.step1.fields.funding_accounts_hint") %></p>
|
|
</div>
|
|
<div class="bg-container-inset rounded-lg p-1">
|
|
<% grouped = linkable_accounts.group_by { |a| a.subtype.to_s.presence || "other" } %>
|
|
<% grouped.each_with_index do |(subtype, accts), group_idx| %>
|
|
<div class="px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t("goals.form_stepper.step1.subtypes.#{subtype}", default: subtype.titleize) %></div>
|
|
<div class="bg-container rounded-md <%= "mb-1" if group_idx < grouped.size - 1 %>">
|
|
<% accts.each_with_index do |account, idx| %>
|
|
<label class="flex items-center gap-3 px-3 py-2.5 cursor-pointer hover:bg-surface-hover <%= "border-t border-subdued" if idx > 0 %>">
|
|
<%= check_box_tag "goal[account_ids][]",
|
|
account.id,
|
|
false,
|
|
id: "goal_account_ids_#{account.id}",
|
|
class: "checkbox checkbox--light shrink-0",
|
|
data: {
|
|
goal_stepper_target: "linkedAccountCheckbox",
|
|
action: "change->goal-stepper#linkedAccountChanged",
|
|
account_name: account.name,
|
|
account_subtype: account.subtype || subtype,
|
|
account_balance: account.balance
|
|
} %>
|
|
<%= render Goals::AvatarComponent.new(name: account.name, color: Goals::AvatarComponent.color_for(account.name), size: "md") %>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-primary truncate"><%= account.name %></p>
|
|
<p class="text-xs text-secondary"><%= (account.subtype || subtype).titleize %></p>
|
|
</div>
|
|
<span class="text-sm text-primary tabular-nums"><%= Money.new(account.balance, account.currency).format %></span>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<p class="hidden mt-1.5 text-xs text-destructive" data-goal-stepper-target="accountsError"><%= t("goals.form_stepper.errors.accounts_required") %></p>
|
|
</div>
|
|
|
|
<%= render DS::Disclosure.new(title: t("goals.form_stepper.step1.fields.notes_summary"), align: "right") do %>
|
|
<%= f.text_area :notes,
|
|
label: t("goals.form_stepper.step1.fields.notes"),
|
|
rows: 3,
|
|
placeholder: t("goals.form_stepper.step1.fields.notes_placeholder") %>
|
|
<% end %>
|
|
|
|
</section>
|
|
|
|
<section data-goal-stepper-target="step2Panel" class="space-y-5 hidden">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-primary mb-1"><%= t("goals.form_stepper.step2.heading") %></h3>
|
|
<p class="text-sm text-secondary"><%= t("goals.form_stepper.step2.subheading") %></p>
|
|
</div>
|
|
|
|
<div class="border border-subdued rounded-lg p-5 space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-base font-medium text-primary truncate" data-goal-stepper-target="reviewName">…</p>
|
|
<p class="text-sm text-secondary tabular-nums" data-goal-stepper-target="reviewSummary">…</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-primary tabular-nums border-t border-subdued pt-3" data-goal-stepper-target="reviewSuggested">…</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="flex items-center pt-2">
|
|
<div class="hidden" data-goal-stepper-target="footerLeftButton">
|
|
<%= render DS::Button.new(
|
|
variant: "ghost",
|
|
text: t("goals.form_stepper.back"),
|
|
icon: "arrow-left",
|
|
icon_position: :left,
|
|
data: {
|
|
action: "click->goal-stepper#footerLeft"
|
|
}
|
|
) %>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<%= render DS::Button.new(
|
|
text: t("goals.form_stepper.continue"),
|
|
variant: "primary",
|
|
icon: "arrow-right",
|
|
icon_position: :right,
|
|
data: {
|
|
goal_stepper_target: "footerRightButton",
|
|
action: "click->goal-stepper#footerRight"
|
|
}
|
|
) %>
|
|
</div>
|
|
<button type="submit"
|
|
class="sr-only"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
data-goal-stepper-target="submitButton"><%= t("goals.form_stepper.submit") %></button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|