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

fix(savings_goals/new): stepper line uses border-secondary token

Browse Source 
bg-secondary is not a registered Sure utility, so the previous h-0.5
bg-secondary div rendered with no background — the line was just a
transparent slot, barely visible in either theme.

Replace with border-t-2 border-secondary on the connector div, and
toggle border-inverse / border-secondary on step transition. Both
classes are real Sure tokens with proper light/dark variants
(alpha-black-200 / alpha-white-300 for border-secondary).
This commit is contained in:
Guillem Arias
2026-05-11 15:29:05 +02:00
parent cc46effc16
commit fa8f7e2418
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/controllers/savings_goal_stepper_controller.js
View File

@@ -194,8 +194,8 @@ export default class extends Controller {
this.step2CircleTarget.classList.toggle("text-secondary", this.currentStep < 2);
}
if (this.hasStepperLineTarget) {
this.stepperLineTarget.classList.toggle("bg-inverse", this.currentStep > 1);
this.stepperLineTarget.classList.toggle("bg-secondary", this.currentStep === 1);
this.stepperLineTarget.classList.toggle("border-inverse", this.currentStep > 1);
this.stepperLineTarget.classList.toggle("border-secondary", this.currentStep === 1);
}
// Modal subtitle lives in the dialog header, outside this controller's
// DOM scope. Locate it by attribute and update directly.

2
app/views/savings_goals/_form_stepper.html.erb
View File

@@ -11,7 +11,7 @@
<span data-savings-goal-stepper-target="step1Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-inverse text-inverse text-xs font-medium">1</span>
<span class="text-sm font-medium text-primary"><%= t("savings_goals.form_stepper.step1.label") %></span>
</div>
<div class="flex-1 h-0.5 bg-secondary rounded-full" data-savings-goal-stepper-target="stepperLine"></div>
<div class="flex-1 border-t-2 border-secondary" data-savings-goal-stepper-target="stepperLine"></div>
<div class="flex items-center gap-2" data-savings-goal-stepper-target="step2Indicator">
<span data-savings-goal-stepper-target="step2Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center border border-secondary text-secondary text-xs font-medium">2</span>
<span class="text-sm font-medium text-secondary"><%= t("savings_goals.form_stepper.step2.label") %></span>