mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
- StatusPill: use functional `text-success` / `text-warning` tokens with matching icon colors and `px-2 py-1`, mirroring `app/views/budget_categories/_budget_category.html.erb:29-43`. - ProgressRing: rework center text to match `_budget_donut.html.erb` (small "Saved" label, `text-3xl font-medium` headline, "of $X" underline). Stroke color now derives from goal.status (yellow when behind, blue on track, green reached, gray for no-date). - GoalCard bar: track height + transition match budget category bar (`h-1.5`, `transition-all duration-500`, `inline-size`). - Index/show layouts: render page header inline (`<h1>` + actions). The default application layout doesn't yield `:page_actions`, so the CTA + kebab menu wouldn't appear when emitted via `content_for`. - Stepper review summary: target the actual form inputs by `name` rather than relying on the `data-target` Stimulus attribute, since `money_field` puts the attribute on the wrapper. Step 1 validation scoped to the step 1 panel. - Demo generator: filter Depository accounts via `where(accountable_type: "Depository")` — Rails delegated_type generates the `depository?` predicate, not a `.depository` scope.
28 lines
1.8 KiB
Plaintext
28 lines
1.8 KiB
Plaintext
<div class="relative inline-flex items-center justify-center" style="width: <%= Savings::ProgressRingComponent::SIZE %>px; height: <%= Savings::ProgressRingComponent::SIZE %>px;">
|
|
<svg width="<%= Savings::ProgressRingComponent::SIZE %>"
|
|
height="<%= Savings::ProgressRingComponent::SIZE %>"
|
|
viewBox="0 0 <%= Savings::ProgressRingComponent::SIZE %> <%= Savings::ProgressRingComponent::SIZE %>">
|
|
<circle cx="<%= Savings::ProgressRingComponent::SIZE / 2.0 %>"
|
|
cy="<%= Savings::ProgressRingComponent::SIZE / 2.0 %>"
|
|
r="<%= Savings::ProgressRingComponent::RADIUS %>"
|
|
fill="none"
|
|
stroke="var(--color-gray-200)"
|
|
stroke-width="<%= Savings::ProgressRingComponent::STROKE %>" />
|
|
<circle cx="<%= Savings::ProgressRingComponent::SIZE / 2.0 %>"
|
|
cy="<%= Savings::ProgressRingComponent::SIZE / 2.0 %>"
|
|
r="<%= Savings::ProgressRingComponent::RADIUS %>"
|
|
fill="none"
|
|
stroke="<%= stroke_color %>"
|
|
stroke-width="<%= Savings::ProgressRingComponent::STROKE %>"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="<%= Savings::ProgressRingComponent::CIRCUMFERENCE %>"
|
|
stroke-dashoffset="<%= offset %>"
|
|
transform="rotate(-90 <%= Savings::ProgressRingComponent::SIZE / 2.0 %> <%= Savings::ProgressRingComponent::SIZE / 2.0 %>)" />
|
|
</svg>
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center text-center">
|
|
<span class="text-secondary text-sm mb-1"><%= t("savings_goals.show.ring.saved") %></span>
|
|
<span class="text-3xl font-medium text-primary tabular-nums privacy-sensitive"><%= current_label %></span>
|
|
<span class="text-secondary text-sm mt-1 tabular-nums">of <%= target_label %></span>
|
|
</div>
|
|
</div>
|