From 46bd5e043451a61c8c06df1551605e77912155bf Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 21:09:13 +0200
Subject: [PATCH] ux(goals): color picker uses Sure's inline-disclosure
 pattern; drop em-dash in catch-up body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Found the actual Sure pattern in app/views/accounts/_form.html.erb:27-47
("Additional details" section in the account-creation flow):
  <details class="group">
    <summary class="cursor-pointer text-sm text-secondary hover:text-primary flex items-center gap-1 py-2">
      <%= icon "chevron-right", class: "group-open:rotate-90 transition-transform" %>
      ...
    </summary>
    <div class="space-y-2 mt-2 pl-4 border-l border-primary">...</div>
  </details>

It's an inline expand (no absolute popup), chevron rotates 90° on
open, body indented with a vertical primary-color rule. My previous
partial was an absolute-positioned popover lifted from
categories/_form.html.erb — not what Sure uses for collapsible form
sections.

Rewrite _color_picker.html.erb to match: chevron + color-preview disc
+ "Color" label in the summary; swatches in an inline indented body.

Catch-up body also drops the em-dash. Was:
  "You're saving $X/mo today — $Y/mo short of the pace to finish by $date."
Now two sentences:
  "Your current pace is $X/mo. You need an extra $Y/mo to finish by $date."

Two short clauses, no compound separator, each conveys a single number.
Frames the gap as "extra" rather than "short", which behavioral-econ
research suggests reads as more attainable.
---
 app/views/goals/_color_picker.html.erb | 13 +++++++------
 config/locales/views/goals/en.yml      |  4 ++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/views/goals/_color_picker.html.erb b/app/views/goals/_color_picker.html.erb
index 1d8fdb684..35d3d9481 100644
--- a/app/views/goals/_color_picker.html.erb
+++ b/app/views/goals/_color_picker.html.erb
@@ -1,11 +1,12 @@
 <%# locals: (form:, colors:) %>
-<details class="relative">
-  <summary class="flex items-center gap-2 cursor-pointer text-sm text-secondary list-none">
-    <span class="block w-5 h-5 rounded-full" style="background-color: <%= form.object.color %>"></span>
-    <span><%= t("goals.form_stepper.step1.fields.color") %></span>
-    <%= icon("chevron-down", size: "sm") %>
+<details class="group">
+  <summary class="cursor-pointer text-sm text-secondary hover:text-primary flex items-center gap-1 py-2 list-none">
+    <%= icon "chevron-right", size: "sm", class: "group-open:rotate-90 transition-transform" %>
+    <span class="block w-4 h-4 rounded-full" style="background-color: <%= form.object.color %>"></span>
+    <%= t("goals.form_stepper.step1.fields.color") %>
   </summary>
-  <div class="absolute z-10 mt-2 p-3 bg-container border border-alpha-black-25 rounded-xl shadow-border-xs flex flex-wrap gap-2 w-fit">
+
+  <div class="flex flex-wrap gap-2 mt-2 pl-4 border-l border-primary py-2">
     <% colors.each do |c| %>
       <label class="relative">
         <%= form.radio_button :color, c, class: "sr-only peer" %>
diff --git a/config/locales/views/goals/en.yml b/config/locales/views/goals/en.yml
index dae35c843..db513601e 100644
--- a/config/locales/views/goals/en.yml
+++ b/config/locales/views/goals/en.yml
@@ -124,8 +124,8 @@ en:
         aria_label: "Projection chart for %{name}"
       catch_up:
         title: "Save %{amount}/mo to stay on track"
-        body_with_date: "You're saving %{avg}/mo today — %{delta}/mo short of the pace to finish by %{date}."
-        body: "You're saving %{avg}/mo today — %{delta}/mo short of the required pace."
+        body_with_date: "Your current pace is %{avg}/mo. You need an extra %{delta}/mo to finish by %{date}."
+        body: "Your current pace is %{avg}/mo. You need an extra %{delta}/mo to hit the required rate."
         cta: "Add %{amount}"
       confirm_complete_title: Mark this goal complete?
       confirm_complete_body: It leaves the Ongoing list. You can still archive or restore it later.