mirror of
https://github.com/we-promise/sure.git
synced 2026-06-01 00:39:01 +00:00
fix(savings_goals/show): dedupe ring labels, DS::Button banners, status-pill contrast
- progress_ring_component: drop the in-ring "$saved / of $target" lines. The same money pair already renders directly below the ring in show.html.erb (now the single source). Inside the ring keeps only "Saved" + percent. - show.html.erb: replace 3 hand-rolled button_to CTAs (Paused banner "Resume goal", Archived banner "Restore goal", celebration card "Archive goal") with DS::Button so focus/hover/disabled match the rest of the app. variant: primary/outline, size: sm, method: :patch. - status_pill_component: swap text-success / text-warning / text-secondary to text-green-700 / text-yellow-700 / text-gray-700 so all 5 light-mode pill variants pass WCAG 4.5:1. Local override pending the upstream DS token fix tracked at we-promise/sure#1736.
This commit is contained in:
@@ -13,8 +13,6 @@
|
||||
<div data-donut-chart-target="defaultContent" class="flex flex-col items-center text-center">
|
||||
<span class="text-secondary text-xs mb-1"><%= t("savings_goals.show.ring.saved") %></span>
|
||||
<span class="text-3xl font-medium tabular-nums privacy-sensitive <%= percent_text_class %>"><%= percent %>%</span>
|
||||
<span class="text-xs text-subdued tabular-nums mt-1"><%= amount_label %></span>
|
||||
<span class="text-xs text-subdued tabular-nums">of <%= target_label %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
class Savings::StatusPillComponent < ApplicationComponent
|
||||
# Text colors here intentionally use palette steps (green-700 / yellow-700 /
|
||||
# gray-700) rather than `text-success` / `text-warning` / `text-secondary`
|
||||
# tokens because the functional tokens drop below WCAG 1.4.3 4.5:1 on tinted
|
||||
# surfaces in light mode (~2.88:1 / 3.0:1 / 4.16:1). Local override only;
|
||||
# revert once we-promise/sure#1736 lands token-level fixes.
|
||||
VARIANTS = {
|
||||
on_track: { classes: "bg-green-500/10 text-success", icon: "circle-check" },
|
||||
behind: { classes: "bg-yellow-500/10 text-warning", icon: "triangle-alert" },
|
||||
reached: { classes: "bg-green-500/10 text-success", icon: "star" },
|
||||
no_target_date: { classes: "bg-surface-inset text-secondary", icon: "infinity" },
|
||||
paused: { classes: "bg-surface-inset text-secondary", icon: "pause" }
|
||||
on_track: { classes: "bg-green-500/10 text-green-700", icon: "circle-check" },
|
||||
behind: { classes: "bg-yellow-500/10 text-yellow-700", icon: "triangle-alert" },
|
||||
reached: { classes: "bg-green-500/10 text-green-700", icon: "star" },
|
||||
no_target_date: { classes: "bg-surface-inset text-gray-700", icon: "infinity" },
|
||||
paused: { classes: "bg-surface-inset text-gray-700", icon: "pause" }
|
||||
}.freeze
|
||||
|
||||
def initialize(goal:)
|
||||
|
||||
@@ -83,10 +83,13 @@
|
||||
<%= render DS::Alert.new(variant: "info", title: t("savings_goals.show.paused_banner.title")) do %>
|
||||
<p class="text-secondary"><%= t("savings_goals.show.paused_banner.body") %></p>
|
||||
<div class="mt-2">
|
||||
<%= button_to t("savings_goals.show.paused_banner.resume_cta"),
|
||||
resume_savings_goal_path(@savings_goal),
|
||||
method: :patch,
|
||||
class: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover" %>
|
||||
<%= render DS::Button.new(
|
||||
text: t("savings_goals.show.paused_banner.resume_cta"),
|
||||
href: resume_savings_goal_path(@savings_goal),
|
||||
variant: "primary",
|
||||
size: "sm",
|
||||
method: :patch
|
||||
) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% elsif @savings_goal.archived? %>
|
||||
@@ -95,10 +98,13 @@
|
||||
<p class="text-secondary"><%= t("savings_goals.show.archived_banner.body") %></p>
|
||||
<% if @savings_goal.may_unarchive? %>
|
||||
<div class="mt-2">
|
||||
<%= button_to t("savings_goals.show.archived_banner.restore_cta"),
|
||||
unarchive_savings_goal_path(@savings_goal),
|
||||
method: :patch,
|
||||
class: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover" %>
|
||||
<%= render DS::Button.new(
|
||||
text: t("savings_goals.show.archived_banner.restore_cta"),
|
||||
href: unarchive_savings_goal_path(@savings_goal),
|
||||
variant: "primary",
|
||||
size: "sm",
|
||||
method: :patch
|
||||
) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
@@ -149,10 +155,13 @@
|
||||
<p class="text-sm text-secondary mt-1 max-w-md"><%= t(".celebration.body", amount: @savings_goal.target_amount_money.format) %></p>
|
||||
<% if @savings_goal.may_archive? %>
|
||||
<div class="mt-4">
|
||||
<%= button_to t(".celebration.archive_cta"),
|
||||
archive_savings_goal_path(@savings_goal),
|
||||
method: :patch,
|
||||
class: "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-primary border border-secondary bg-transparent hover:bg-surface-hover" %>
|
||||
<%= render DS::Button.new(
|
||||
text: t(".celebration.archive_cta"),
|
||||
href: archive_savings_goal_path(@savings_goal),
|
||||
variant: "outline",
|
||||
size: "sm",
|
||||
method: :patch
|
||||
) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user