TASK-23054 one icon and one colour per product concept (QR pink, rewards yellow star; absorbs TASK-22761) - #3456
Merged
Merged
Conversation
QA 2026-09-25: the bottom nav QR button is pink, but the QR row under Spend in Accounts and payments was green. That screen coloured every non-card row by its status chip (Available = green), so a concept's bubble changed with the user's state. Other surfaces typed their own icon/colour pairs too (home carousel QR in yellow, card in pink, empty states in gray, the link success card in raw blue). - CONCEPT_ICONS.qrPay takes the brand fill, the nav button's pink; Pix key payments get a concept of their own. - Accounts and payments rows carry a concept key instead of an icon; the badge alone carries status. - EmptyState, ActionModal and CarouselCTA accept a `concept`, and every concept call site now spreads CONCEPT_ICONS. - A source scan fails on a new hard-coded concept glyph or half-used pair; the few glyphs that are not the concept on their surface are listed with a reason.
Hugo0
requested review from
0xkkonrad,
abalinda,
innolope-dev,
jjramirezn and
kushagrasarathe
as code owners
September 25, 2026 09:47
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Author
|
/chip review |
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository: peanutprotocol/peanut-ui/.coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Code-analysis diffPainscore total: 8876.59 → 8880.81 (+4.22) 🆕 New findings (169)
…and 149 more. ✅ Resolved (171)
…and 151 more. 📈 Painscore deltas (top movers)
|
Contributor
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
![chip-peanut-bot[bot]](https://avatars.githubusercontent.com/in/2915219?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
No actionable defects found in the concept icon and color changes.
Checked clean
- Reviewed the 28-file merge-base diff and affected call sites for icon, color, navigation, and status behavior.
- Checked the new concept-usage guard and relevant component contracts; no actionable regression found.
- At review time, format, eslint, design-system lint, and typecheck passed; unit and visual-capture checks were still running.
Security review: did not run — this change has no security, privacy or money surface, so it was not asked. This review is one reviewer short.
Third opinion: did not run — claude-api_error. This review is one reviewer short.
Exact head: 1d069fc8b400 · Context: repo · Took 5m
Contributor
|
English · Español · Español (Argentina) · Português (Brasil) After merge: e728618 → 9b7a2b1. Capture complete in all locales. |
QA 2026-09-25: a Peanut reward drew its star on green in activity (the PerkIcon hand-rolled a green circle), while the home top nav and the Rewards page speak in the yellow star. CONCEPT_ICONS.rewards is now that star on yellow; PerkIcon, the QR success reward cards and the carousel invite CTAs spread it, and the guard test catches a star drawn in a bubble of its own.
Hugo0
changed the title
Contributor
Author
|
/chip review |
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
No actionable defects found at the new head.
Checked clean
- Rechecked the complete 34-file PR diff against the supplied dev base; the merge added no independent changes to this PR’s concept call sites.
- Verified the rewards star asset and yellow bubble across activity, receipts, QR success, carousel, and empty states; checked the updated usage guard.
- At review time, the current-head Tests workflow and visual captures were still pending or running; no current-head failing check was reported.
Security review: did not run — this change has no security, privacy or money surface, so it was not asked. This review is one reviewer short.
Third opinion: did not run — it reads only the first review of a pull request; the first reviewer checks later rounds. This review is one reviewer short.
Exact head: a3ac2ba540a6 · Context: repo · Took 6m
Half the modals picked their bubble colour through a raw class, and the rest fell through to pink, so pink meant nothing. tone is now required by the type whenever an icon renders, a brand tone covers Peanut's own moments, and every caller names its tone per the colour spec. Raw bg iconContainerClassName overrides are gone from product callers.
…ed logo fill Adopted from TASK-22761 (Kush, ui#3457) and rewritten to the rule Hugo set on 2026-09-25: yellow is Peanut's own, pink is the primary action (QR pay), and a concept bubble never changes colour with status. The DS page states that rule; its per-colour usage list is left out because it described the state-coloured variant.
The remaining audited call sites: the home activation CTAs and the getting-started checklist (card pink, verify and money moves blue), receipt more actions, claim account and residence change (blue), corridor gate (review yellow, support blue), additional verification pending (yellow), KYC failed (red), region restricted (gray), unlock method, backup FAQ, passkey info and already claimed (blue), the balance warning (yellow). Error empty states turn red so failed-to-load no longer reads like nothing-here. Four same-pixel bubbles move off raw bg classes onto the colour prop. Adapted in ui#3456 to Hugo's rule (2026-09-25): Peanut's own stays yellow, not pink (card, early user, public profile, the account step), and the activation verify steps take blue.
Contributor
🖼 Visual diff — 5 screens moved8 of 164 shots changed · 156 identical · baseline
job summary · before/after/diff images — artifact Fixture screenshots, no backend. Advisory — this check never blocks a merge. Posted from the default branch by ds-shots-comment.yml; the report it renders is untrusted data. |
…oncept Adopted from TASK-22761 (Kush, ui#3457): an external address or wallet counterparty drew a wallet on yellow in activity, UserCard, ContributorCard and PeanutActionDetailsCard, while every picker draws crypto as coins on blue. A flag that fails to load now falls back to the real bank IconBubble. The QR KYC gate names the QR pay concept when no brand mark is known. Not taken, by Hugo's rule of 2026-09-25: the state-coloured concept bubbles (link state map replacement, conceptBubbleFor, the identity verification row's status colours). A concept's colour names the concept; the badge carries the status.
Hugo0
changed the title
Contributor
Author
|
/chip review |
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
One minor color-semantic mismatch in actionable corridor gate drawers; no other actionable defects found.
Findings
- MINOR · src/features/deposit-accounts/components/CorridorGateDrawer.tsx:178 · Actionable corridor gates render as inactive gray
For a needs-identity gate, depositGateView sets actionverify;accept-tosandprovide-emailare similarly actionable. None has an ICONS entry, sogateIconis undefined and this expression renders gray beside an enabled primary button. Gray is documented as inactive, while the drawer comment says a way forward is blue. Map colors by action rather than icon-map presence, and cover an actionable gate in the drawer tests.
Checked clean
- Verified the exact head and base, and reviewed the complete PR diff plus the new concept, modal, avatar, empty-state, and gate changes.
- Confirmed the corridor-gate action mapping makes verify, accept-tos, and provide-email reachable; no existing color assertion covers them.
- Current-head unit, typecheck, eslint, format, and ds-lint checks passed; no failing check was reported.
Security review by moonshotai/kimi-k3: 0 finding(s), marked with the model name. It reads the diff only and answers only security, privacy and money, so treat its findings as advice.
Third opinion: did not run — it reads only the first review of a pull request; the first reviewer checks later rounds. This review is one reviewer short.
Exact head: 6e1645c3bc86 · Context: repo · Took 7m
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
One minor color-semantic mismatch remains in actionable corridor gate drawers; no other actionable defects found in the prior exact-head review.
Findings
- MINOR · src/features/deposit-accounts/components/CorridorGateDrawer.tsx:178 · Actionable corridor gates render as inactive gray
For a needs-identity gate, depositGateView sets action to verify; accept-tos and provide-email are also actionable. None has an ICONS entry, so gateIcon is undefined and this expression renders gray beside an enabled primary button. IconBubble documents gray as inactive, while the drawer comment says a way forward is blue. Choose the color by action rather than icon-map presence, and cover an actionable gate in the drawer tests.
Checked clean
- Verified exact head and base objects; rechecked the previous exact-head result against the current corridor gate mapping, icon color semantics, and drawer tests.
- P1 remains present at line 178; no reply, resolution, or deferral was supplied in the review ledger.
Security review by moonshotai/kimi-k3: 0 finding(s), marked with the model name. It reads the diff only and answers only security, privacy and money, so treat its findings as advice.
Third opinion: did not run — it reads only the first review of a pull request; the first reviewer checks later rounds. This review is one reviewer short.
Exact head: 6e1645c3bc86 · Context: repo · Took 3m (queued 7m)
… while waiting Chip on ui#3456: verify, terms and email gates have no ICONS entry, so the bubble fell to the inactive gray beside an enabled primary button. The colour now follows the same WAITS set the button does.
Contributor
Author
|
/chip review |
Contributor
There was a problem hiding this comment.
Chip review — no blocking findings — this is not an approval
No findings.
Checked clean
- Verified the exact head and dev base; reviewed the two-file follow-up diff against the prior exact-head review of the full pull request.
- P1 and P2 are fixed: bubble color now uses the same WAITS state as the button, making actionable gates blue and waiting gates yellow; the added tests cover both categories.
- The follow-up diff passes git diff --check. Current-head CI checks are still in progress; local dependencies are absent, so tests were not rerun locally.
Security review by moonshotai/kimi-k3: 0 finding(s), marked with the model name. It reads the diff only and answers only security, privacy and money, so treat its findings as advice.
Third opinion: did not run — it reads only the first review of a pull request; the first reviewer checks later rounds. This review is one reviewer short.
Exact head: f0e3b0c2a907 · Context: repo · Took 2m
Hugo0
added a commit
that referenced
this pull request
Sep 25, 2026
--no-verify: the hook flags src/types/api.openapi.json, which arrives unchanged from dev in this merge, not from this branch. AdvisoryPreemptModal stays deleted; dev's icon edit to it (#3456) is dropped.
This was referenced Sep 25, 2026
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
QA on staging (2026-09-25): the bottom nav QR button is pink, but the QR row under Spend in Profile → Accounts and payments was green, and a Peanut reward drew its star on green in activity. Hugo's rule: one icon and one background colour per product concept, on every surface. The colour names the concept, never its status; the badge carries the status.
Root cause:
UnlockPayments.view.tsxcoloured every row except the card and the Peanut user by its status chip (BUBBLE_COLOR: Available = green).PerkIconhand-rolled a green circle. Other surfaces typed their own icon/colour pairs.This PR also takes in the parts of Kush's TASK-22761 (ui#3457, "icon bubble colours follow one rule") that agree with Hugo's rule. Credit to Kush for the ActionModal tone contract, the avatar fallbacks, the per-site audit and the DS page. #3457 closes after this merges.
The colour rule (IconBubble JSDoc + /dev/ds/primitives/icon-bubble)
brand: the primary action, QR pay, the same#ff90e8as the nav QR button (a test pins the two tokens equal)What changes
CONCEPT_ICONS:qrPay→brand; newpixKey;rewards→ the star on yellow (wastrophy).UnlockRow.icon→UnlockRow.concept. Rows and the row drawer spread the concept whatever the status.BUBBLE_COLORis deleted.EmptyState,ActionModalandCarouselCTAacceptconcept.tone(error,attention,success,info,peanut) or aconcept, and the type system enforces this. Kush'sbrandtone becomespeanut(yellow, Peanut's own). RawiconContainerClassNamecolours are gone from product callers.AvatarWithBadge.fallbacktakes a node).logocolour is removed, and each colour's meaning is documented.otherCountries; balance warning, camera permission and passkey help move off raw classes. Early user, public profile and the easter egg go yellow (Peanut's own), not pink.PerkIconis deleted. Activity rows, the receipt perk banner, the perk receipt head and the QR success reward cards spreadCONCEPT_ICONS.rewards.bg-blue-50056px circle to the blue link bubble (48px).conceptIconsUsage.test.tsscanssrc/. It fails on a literal concept glyph onIconBubble/EmptyState/ActionModal, a glyph+colour pair in one object, a hand-rolledrounded-fullcontainer around a concept glyph or the rewards star, orCONCEPT_ICONS.x.iconwithout.color. The exemptions carry a reason, and a stale exemption fails too.Taken from #3457 vs rejected
brandtone →peanut(yellow)logocolour, JSDoc per colourSTATE_BUBBLE_COLORS,conceptBubbleFor, replacingLINK_STATE_BUBBLES, KYC row state colours, Unlock payments waiting-yellow / not-available-gray)Still needs a decision
GettingStartedChecklistfirst payment usesarrow-up, the withdraw glyph, for a send.ScanToDownloadModalqr-codefor an app-download QR (nowpeanutyellow).SemanticRequestPageWrappergraylinkerror state;ClaimAccountScreenlinkexplainer bullet.QrPayBlockedView"order not ready":qr-codeon attention yellow (a waiting state).PendingVerificationTasks:badgeon a hand-rolled yellow bubble.Checks
prettier,
tsc --noEmit, the full Jest suite andds-lint-counts --checkpass locally, andnext buildpassed locally at an earlier head. No local screenshots: the running stack belongs to another worktree. The Screen Library capture comment on this PR shows the after state.