From cfdd3c476fb0c7b36ef7f805bc72c8ec3362033e Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Thu, 14 May 2026 19:50:29 +0200
Subject: [PATCH] fix(goals): header CTA + projection-chart required-line color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

V6 — three "Record pledge" affordances on goals#show (header, empty
state, catch-up callout) all rendered as `t(@goal.pledge_action_
label_key)` + `icon: "arrow-up-right"`. That dropped the user into a
button labelled "I just transferred…" or "I just saved…" with a
trailing ellipsis — past-tense as a CTA reads as a status
declaration, the ellipsis suggests an unresolved action, and
`arrow-up-right` is the icon Sure reserves elsewhere for
external-link affordances.

Switch the on-page CTA to a single new locale key,
`goals.show.record_pledge_cta: "Record pledge"`, with `icon: "plus"`
matching the other "new resource" buttons across the app (new goal,
new account, new rule). The modal title keeps using
`pledge_action_label_key`, so the past-tense "I just transferred…"
framing still anchors the dialog's confirm step.

V8 — the projection chart's "required" dashed line was hardcoded to
`var(--color-green-600)`. When the goal status is `:on_track` the
projection line is also green-dashed, and the two stroked the same
hue and dash pattern — they overlapped visually. Re-stroke the
required line in `textSecondary` (the chart's neutral foreground)
so it reads as a reference path independent of status.
---
 .../controllers/goal_projection_chart_controller.js  | 10 ++++++----
 app/views/goals/show.html.erb                        | 12 ++++++------
 config/locales/views/goals/en.yml                    |  1 +
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/javascript/controllers/goal_projection_chart_controller.js b/app/javascript/controllers/goal_projection_chart_controller.js
index bcd86e922..6686f5dd6 100644
--- a/app/javascript/controllers/goal_projection_chart_controller.js
+++ b/app/javascript/controllers/goal_projection_chart_controller.js
@@ -251,17 +251,19 @@ export default class extends Controller {
       .attr("d", line);
 
     if (requiredSeries.length) {
-      // Light dashed line: the path needed to hit the target. Sits behind
-      // the projection so the user sees both the goal and the ask.
+      // Light dashed reference line: the path needed to hit the target.
+      // Neutral stroke (text-secondary) instead of green — both the
+      // projection and the required line are otherwise green when the
+      // goal is on track, and the two would visually merge.
       svg
         .append("path")
         .datum(requiredSeries)
         .attr("fill", "none")
-        .attr("stroke", "var(--color-green-600)")
+        .attr("stroke", textSecondary)
         .attr("stroke-width", 1.2)
         .attr("stroke-linecap", "round")
         .attr("stroke-dasharray", "2 4")
-        .attr("opacity", 0.45)
+        .attr("opacity", 0.5)
         .attr("d", line);
     }
 
diff --git a/app/views/goals/show.html.erb b/app/views/goals/show.html.erb
index ab1b8cedf..1d0d0c6c2 100644
--- a/app/views/goals/show.html.erb
+++ b/app/views/goals/show.html.erb
@@ -42,10 +42,10 @@
       ) %>
       <% unless @goal.completed? || @goal.status == :reached %>
         <%= render DS::Link.new(
-          text: t(@goal.pledge_action_label_key),
+          text: t(".record_pledge_cta"),
           variant: "primary",
           href: new_goal_pledge_path(@goal),
-          icon: "arrow-up-right",
+          icon: "plus",
           frame: :modal
         ) %>
       <% end %>
@@ -146,11 +146,11 @@
       </p>
       <div class="mt-2 flex items-center gap-3 flex-wrap">
         <%= render DS::Link.new(
-          text: t(@goal.pledge_action_label_key),
+          text: t(".record_pledge_cta"),
           variant: "primary",
           size: "sm",
           href: new_goal_pledge_path(@goal, amount: @goal.monthly_target_amount.to_f),
-          icon: "arrow-up-right",
+          icon: "plus",
           frame: :modal
         ) %>
         <%= link_to t("goals.show.catch_up.adjust_target_cta"),
@@ -216,11 +216,11 @@
         <p class="text-sm text-secondary mt-1 max-w-md"><%= t(".empty.body") %></p>
         <div class="mt-4">
           <%= render DS::Link.new(
-            text: t(@goal.pledge_action_label_key),
+            text: t(".record_pledge_cta"),
             variant: "primary",
             size: "sm",
             href: new_goal_pledge_path(@goal),
-            icon: "arrow-up-right",
+            icon: "plus",
             frame: :modal
           ) %>
         </div>
diff --git a/config/locales/views/goals/en.yml b/config/locales/views/goals/en.yml
index 99b86223d..584a6bdc6 100644
--- a/config/locales/views/goals/en.yml
+++ b/config/locales/views/goals/en.yml
@@ -95,6 +95,7 @@ en:
       archive: Archive
       unarchive: Restore
       delete: Delete permanently
+      record_pledge_cta: Record pledge
       pledge_just_transferred: I just transferred…
       pledge_just_saved: I just saved…
       funding_accounts_heading: Funding accounts