QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-06-01 08:49:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

ux(goals): color picker uses Sure's inline-disclosure pattern; drop em-dash in catch-up body

Browse Source 
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.
This commit is contained in:
Guillem Arias
2026-05-11 21:09:13 +02:00
parent 270ea2630d
commit 46bd5e0434
2 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/views/goals/_color_picker.html.erb
View File

@@ -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" %>

4
config/locales/views/goals/en.yml
View File

@@ -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.