fix(frontend): cancel priority-bounce animation on .btn-primary--priority:disabled (GitLab #184) #382

2026-05-08T01:50:51Z

Brouie commented

2026-05-08 01:50:51 +00:00

(Migrated from gitlab.com)

What

Cancel priority-bounce animation on .btn-primary--priority:disabled (#184). primary CTA buttons (BUY CHARM, etc) kept bouncing rhythmically while disabled, masking the disabled state. found during arena dogfood — header chip correctly flipped to "Wrong Network" but BUY CHARM kept looking inviting.

Closes

closes #184

Root cause

.btn-primary--priority (frontend/src/index.css:2886) adds animation: priority-bounce 3.1s var(--motion-bounce) infinite to mark the button as the primary action. .btn-primary:disabled (line 2876) adds opacity 0.65 + cursor not-allowed. .timecurve-simple__cta--arcade:disabled (line 7760) adds grayscale + brightness dim.

so disabled state DOES dim the button. but no rule cancelled the priority-bounce animation — the rhythmic motion read as "interactable" stronger than the static dim read as "disabled".

Changes

frontend/src/index.css — added one new rule adjacent to .btn-primary--priority at line 2886:

.btn-primary--priority:disabled {
  /* Cancel the priority-bounce animation while disabled so the button
     doesn't visually read as "interactable" when the disabled prop is
     set (e.g. wrong-chain, insufficient bounds). The opacity dim from
     .btn-primary:disabled and the grayscale from arcade-variant
     :disabled stay in effect. GitLab #184. */
  animation: none;
}

Verification

tsc -b clean
npx vitest run — 307/307 PASS (51 files). CSS-only change, no test surface impact.
npm run lint — 0 errors. 1 pre-existing warning (IndexerConnectivityContext.tsx fast-refresh, untouched).

visual verification on local QA stack: switched MetaMask to BNB Chain (wrong network), observed BUY CHARM no longer bounces while disabled. Disabled state now reads as disabled at first glance — opacity dim + grayscale + static (no bounce) makes the cue unambiguous.

Scope

affects every button using .btn-primary--priority class — BUY CHARM and any other priority-tier CTAs across the app get the same treatment uniformly.

Out of scope

functional disabled-state logic in TimeCurveArenaView.tsx:866 (disabled={isWriting || chainMismatch || ...}) was already correct and is untouched. this MR is purely the visual fix.

cc @PlasticDigits — second small fix shipped in same session as #184 file. ready for review when you have time.

## What Cancel `priority-bounce` animation on `.btn-primary--priority:disabled` ([#184](https://gitlab.com/PlasticDigits/yieldomega/-/issues/184)). primary CTA buttons (BUY CHARM, etc) kept bouncing rhythmically while disabled, masking the disabled state. found during arena dogfood — header chip correctly flipped to "Wrong Network" but BUY CHARM kept looking inviting. ## Closes * closes #184 ## Root cause `.btn-primary--priority` (frontend/src/index.css:2886) adds `animation: priority-bounce 3.1s var(--motion-bounce) infinite` to mark the button as the primary action. `.btn-primary:disabled` (line 2876) adds opacity 0.65 + cursor not-allowed. `.timecurve-simple__cta--arcade:disabled` (line 7760) adds grayscale + brightness dim. so disabled state DOES dim the button. but no rule cancelled the priority-bounce animation — the rhythmic motion read as "interactable" stronger than the static dim read as "disabled". ## Changes `frontend/src/index.css` — added one new rule adjacent to `.btn-primary--priority` at line 2886: ```css .btn-primary--priority:disabled { /* Cancel the priority-bounce animation while disabled so the button doesn't visually read as "interactable" when the disabled prop is set (e.g. wrong-chain, insufficient bounds). The opacity dim from .btn-primary:disabled and the grayscale from arcade-variant :disabled stay in effect. GitLab #184. */ animation: none; } ``` ## Verification - `tsc -b` clean - `npx vitest run` — 307/307 PASS (51 files). CSS-only change, no test surface impact. - `npm run lint` — 0 errors. 1 pre-existing warning (`IndexerConnectivityContext.tsx` fast-refresh, untouched). visual verification on local QA stack: switched MetaMask to BNB Chain (wrong network), observed BUY CHARM no longer bounces while disabled. Disabled state now reads as disabled at first glance — opacity dim + grayscale + static (no bounce) makes the cue unambiguous. ## Scope affects every button using `.btn-primary--priority` class — BUY CHARM and any other priority-tier CTAs across the app get the same treatment uniformly. ## Out of scope functional disabled-state logic in `TimeCurveArenaView.tsx:866` (`disabled={isWriting || chainMismatch || ...}`) was already correct and is untouched. this MR is purely the visual fix. cc @PlasticDigits — second small fix shipped in same session as #184 file. ready for review when you have time.

PlasticDigits commented

2026-05-09 03:55:30 +00:00

(Migrated from gitlab.com)

mentioned in commit 1163a7ffc1

mentioned in commit 1163a7ffc127eff7a191786aeffc1a3ff2ebea3c

PlasticDigits (Migrated from gitlab.com) merged commit 1163a7ffc1 into main

2026-05-09 03:55:30 +00:00

PlasticDigits commented

2026-05-13 15:13:34 +00:00

(Migrated from gitlab.com)

mentioned in commit 665989c171

mentioned in commit 665989c17105d114811e27ca5a879645f1836cb1

Sign in to join this conversation.

No reviewers

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

code/yieldomega!382

Rows
Columns