mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
9b70f0385c
- Sparkline (`savings-sparkline` controller): dropped the `Math.max(0, yMin)` clamp on the y-axis domain so negative balances (or any series that dips into negative territory) render fully instead of being cropped off the canvas. - Hero card: padding `p-6` → `p-7`, column ratio `[minmax(0,1fr)_minmax(0,1.6fr)]` so the chart breathes, min height bumped to 220px, sparkline container `h-full min-h-[200px]` so it fills the card vertically. Stats row now sits at the bottom of the text column via `mt-auto pt-6`; labels promoted to `text-xs`, values to `text-lg`. - Section vertical rhythm: outer `space-y-6` → `space-y-8`. - Goal card: padding `p-[18px]` → `p-6`. Internal gap from header row to amount line `mt-3.5` → `mt-5`. Account-row gap `mt-3` → `mt-4`. - Account card: padding `p-5` → `p-6`. - Status pill "Behind" dot: `bg-yellow-500` → `bg-yellow-600` for a warmer/ambery tone matching the Claude Design reference. - Goal card donut "behind" stroke: `var(--color-yellow-500)` → `var(--color-yellow-600)` to match the pill.
60 lines
3.1 KiB
Plaintext
60 lines
3.1 KiB
Plaintext
<%= link_to savings_goal_path(goal),
|
|
class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6",
|
|
data: {
|
|
savings_goals_filter_target: "card",
|
|
goal_name: goal.name,
|
|
goal_status: goal.status
|
|
} do %>
|
|
<div class="flex items-start gap-3">
|
|
<%= render Savings::GoalAvatarComponent.new(goal: goal, size: "lg") %>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<p class="text-sm font-medium text-primary truncate"><%= goal.name %></p>
|
|
<%= render Savings::StatusPillComponent.new(goal: goal) %>
|
|
</div>
|
|
<p class="text-[11px] text-subdued truncate"><%= secondary_line %></p>
|
|
</div>
|
|
|
|
<div class="shrink-0 relative" style="width: <%= Savings::GoalCardComponent::RING_SIZE %>px; height: <%= Savings::GoalCardComponent::RING_SIZE %>px;">
|
|
<svg width="<%= Savings::GoalCardComponent::RING_SIZE %>" height="<%= Savings::GoalCardComponent::RING_SIZE %>" viewBox="0 0 <%= Savings::GoalCardComponent::RING_SIZE %> <%= Savings::GoalCardComponent::RING_SIZE %>">
|
|
<circle cx="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
|
|
cy="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
|
|
r="<%= ring_radius %>"
|
|
fill="none"
|
|
stroke="var(--color-gray-200)"
|
|
stroke-width="<%= Savings::GoalCardComponent::RING_STROKE %>" />
|
|
<circle cx="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
|
|
cy="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
|
|
r="<%= ring_radius %>"
|
|
fill="none"
|
|
stroke="<%= ring_color %>"
|
|
stroke-width="<%= Savings::GoalCardComponent::RING_STROKE %>"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="<%= ring_circumference %>"
|
|
stroke-dashoffset="<%= ring_offset %>"
|
|
transform="rotate(-90 <%= Savings::GoalCardComponent::RING_SIZE / 2.0 %> <%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>)" />
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center text-[11px] font-medium text-primary tabular-nums">
|
|
<%= progress_percent %>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<div class="flex items-baseline gap-1.5">
|
|
<span class="text-lg font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format %></span>
|
|
<span class="text-xs text-subdued tabular-nums">/ <%= goal.target_amount_money.format %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<%= render Savings::AccountStackComponent.new(accounts: linked_accounts) %>
|
|
<span class="text-[11px] text-subdued"><%= linked_accounts_count_label %></span>
|
|
</div>
|
|
<span class="text-[11px] text-subdued tabular-nums">
|
|
<% if goal.completed? %>—<% else %><%= goal.remaining_amount_money.format %> <%= t("savings_goals.goal_card.left") %><% end %>
|
|
</span>
|
|
</div>
|
|
<% end %>
|