mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +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.
43 lines
1.6 KiB
Ruby
43 lines
1.6 KiB
Ruby
class Goals::StatusPillComponent < ApplicationComponent
|
|
# Text colors here intentionally use palette steps (green/yellow/gray-700)
|
|
# instead of the `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). Each variant carries
|
|
# a theme-dark: override so the dark-700 text doesn't disappear against
|
|
# the dark-mode tinted surface. Local override only; revert once
|
|
# we-promise/sure#1736 lands token-level fixes.
|
|
VARIANTS = {
|
|
on_track: { classes: "bg-green-500/10 text-green-700 theme-dark:text-green-300", icon: "circle-check" },
|
|
behind: { classes: "bg-surface-inset text-yellow-700 theme-dark:text-yellow-300", icon: "triangle-alert" },
|
|
reached: { classes: "bg-green-500/10 text-green-700 theme-dark:text-green-300", icon: "star" },
|
|
completed: { classes: "bg-green-500/10 text-green-700 theme-dark:text-green-300", icon: "circle-check-big" },
|
|
no_target_date: { classes: "bg-surface-inset text-gray-700 theme-dark:text-gray-200", icon: "infinity" },
|
|
paused: { classes: "bg-surface-inset text-gray-700 theme-dark:text-gray-200", icon: "pause" },
|
|
archived: { classes: "bg-surface-inset text-gray-700 theme-dark:text-gray-200", icon: "archive" }
|
|
}.freeze
|
|
|
|
def initialize(goal:)
|
|
@goal = goal
|
|
end
|
|
|
|
def status_key
|
|
@goal.display_status
|
|
end
|
|
|
|
def variant
|
|
VARIANTS.fetch(status_key, VARIANTS[:no_target_date])
|
|
end
|
|
|
|
def label
|
|
I18n.t("goals.status.#{status_key}")
|
|
end
|
|
|
|
def classes
|
|
variant[:classes]
|
|
end
|
|
|
|
def icon_name
|
|
variant[:icon]
|
|
end
|
|
end
|