Repository navigation
feat(mobile): give Profile rows a curated shared icon palette - #6613
Conversation
Surface: mobile-app
The Profile screen's row icons have lost their colour and render plain white. Give them a curated,
deliberate palette, chosen once, in one shared place.
## The symptom, as reported
On the Profile screen (`Profil`), dark theme, Serbian locale, the row icons render plain white.
Affected rows: `Agent za pregled koda`, `Bezbednosni agent`, `Pregled PR-a`,
`Upravljaj organizacijom`, `Podešavanja`, `Tutorial`. Reproduce it before you change anything.
## The cause, confirmed in the source at `2f0d76d5d8f0`
All six rows are `ConfigureRow` (`apps/mobile/src/components/ui/configure-row.tsx`), used from
`apps/mobile/src/components/profile-screen.tsx:174-273`. `ConfigureRow` renders:
```tsx
const tint: Tint = tone ? toneColor(tone) : NEUTRAL_TINT;
...
const iconTile = <IconTile icon={Icon} tint={tint} />;
```
and `NEUTRAL_TINT` (`configure-row.tsx:36-42`) is:
```ts
{ tileBgClass: 'bg-hair-soft', tileBorderClass: 'border-border',
hueThemeKey: 'secondaryForeground' }
```
`IconTile` (`apps/mobile/src/components/ui/icon-tile.tsx`) strokes the glyph with
`colors[tint.hueThemeKey]`, so every one of these rows paints `secondaryForeground` — near-white in
dark theme — on a `hair-soft` tile that is 5% alpha. A white glyph on an invisible tile is exactly
"lost their colour, plain white".
The file's own comment records why it is that way:
> A settings list is not a list of agents: hashing each title into the agent hue ramp gave a single
> list (Language / Trusted ho
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Executive SummaryReviewed the curated Profile row-hue palette change (13 files) at OverviewThe change replaces label/title-hashed tints with an explicit
Files Reviewed (13 files)
Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0 Review guidance: REVIEW.md from base branch |
|
This description names a scenario the proof did not capture:
A repeated proof run rebuilds the same evidence, so no proof run is dispatched for a named gap. Merging with this gap open is your decision. |
Changelog for users
Changelog for maintainers
IconTilestays the one tile treatment;ConfigureRowandActionTilenow take an explicithueprop naming a palette step, and nothing derives a colour from a label, title, translation or hash.RowHue,ROW_PALETTEandrowTint(), with a comment stating the choosing rule, the destination table and the growth rule for new rows.--row-honeythrough--row-fernas a hue plus a 10%-alpha tile background and a 20%-alpha border in both themes; the generated colour map is regenerated and the assertion script passes.ConfigureRowprecedence is tone > hue > neutral, so settings rows outside Profile still render the neutral tile.ActionTilerequires a hue;destructivestill overrides it withtoneColor('danger'), andagentColorand the agent surfaces are unchanged.The six family steps walk one warm band at a fixed chroma/value per theme, straddling the brand olive and yellow; the reserved status hues (danger, warn, good, info) sit outside that band, so no row reads as a status colour. The same-row-same-tint checks are the assertions that the colour no longer depends on the label.
E2E proof
[e1] Dark theme: switch Appearance to Dark in Preferences, return to Profile — android: repaired the stale parked steps (old tap 'Dark' MISSed) and ran state.sh settings then the scene; 'SCENE e1 OK' with the post-switch Profile digest (Preferences, Tutorial, Feedback, Privacy choices, Sign out, Delete Account) proves the state move, while the dark rendering itself is the visual reviewer's call (e1.png).
[e7] ux-check: Dark theme, Serbian locale, Profile: none of the six row glyphs (Code Reviewer, Security Agent, PR Review, Manage Organization, Preferences, Tutorial) renders near-white; each shows a… — Dark theme is proven live by e7-prefs-dark.txt (RadioButton content-desc="Tamno" checked="true") and the Serbian Profile renders all six rows in one digest, e7-org.txt (Agent za pregled koda / Bezbednosni agent / Pregled PR-a / Pogledaj organizaciju / Podešavanja / Tutorijal), with e7-bottom.txt showing Povratne informacije, Podešavanja privatnosti, Odjavi se, Obriši nalog; the glyph hue on the tiles is the visual reviewer's judgement on the same run's e7-org.png/e7-bottom.png, and in the Personal context the org row is absent (e7-personal.txt) so it was observed in the org context instead.
[e4] Light theme: switch Appearance to Light in Preferences, return to Profile and still the light screen (the second half of the both-themes proof). — android/emulator-5554: repaired parked list (Preferences anchor matched the Profile row and never navigated); run ends on the Profile screen (e4-dispatch2.log: 'SCENE e4 OK', 'android.view.View Profile', 'Code Reviewer') and the Light selection persisted after the round trip (e4-light-checked.txt: 'content-desc="Light" checkable="true" checked="true"'); light Profile/Preferences stills e4.png, e4-light-checked.png for the visual reviewer.
[e7] ux-check: Dark theme, Serbian locale, Profile: none of the six row glyphs (Code Reviewer, Security Agent, PR Review, Manage Organization, Preferences, Tutorial) renders near-white; each shows a…
[e5] Serbian locale Profile rows in the same order, then switch back to English — android; corrected replay landed OK — e5-scene.log line 215 'SCENE e5 OK' — and its digest shows the SR Profile rows in the English order: 'android.widget.TextView Agent za pregled koda' (147), 'Bezbednosni agent' (150), 'Pregled PR-a' (154), 'Tutorijal' (161), with the SR bar 'android.widget.Button Početna, kartica, 1 od 3' (163); the four SR action tiles 'Povratne informacije'/'Podešavanja privatnosti'/'Odjavi se'/'Obriši nalog' are in e5-bottom-scene.log ('SCENE e5-bottom OK' line 38, tiles 57-64); stills e5-sr-profile.png, e5-light-sr-profile.png, e5-en-profile.png, e5-bottom.png; replay…
[e5] Serbian locale Profile rows in the same order, then switch back to English
[e1] Dark theme: switch Appearance to Dark in Preferences, return to Profile
E2E proof — log excerpts
/home/igor_kilocode_ai/.local/share/kwf/sections/profile-row-icon-palette-2f83/e2e-mobile-app/e1-run4.log/home/igor_kilocode_ai/.local/share/kwf/sections/profile-row-icon-palette-2f83/e2e-mobile-app/e2-run.logOwner request
[p1] Before/after stills of the same screen: Profile screen — android; the worktree Profile screen renders — 'SCENE p1 OK' (p1-top.log line 1) with 'android.widget.Button Code Reviewer, Automatic PR reviews' (18), Security Agent, PR Review, Preferences, Tutorial in the digest — and the same replay's scroll run proves the four bottom action tiles: 'android.widget.Button Feedback' (p1-run2.log 20), 'android.widget.Button Privacy choices' (22), 'android.widget.Button Sign out' (24), 'android.widget.Button Delete Account' (26); still p1.png (top, shows the row icons) captured for the visual reviewer, who owns the before/after colour comparison; the…
[e9] ux-check: Light theme, English and Serbian: every row glyph is visibly coloured and readable against its tile (not washed out), and the colours match row-for-row between the two languages. — Light appearance was selected and is proven by the harness dump
content-desc="Svetlo"" checkable="true" checked="true"in e9-prefs-sr.xml, and the same destinations render in the same list positions in both locales —android.widget.Button Code Reviewer, Automatic PR reviews tappable [37,1081][1043,1225]andandroid.widget.Button Feedback tappable [37,1470][1043,1604]in e9-en-scenes.log againstandroid.widget.Button Agent za pregled koda, Automatski pregledi PR-ova tappable [37,1081][1043,1225]andandroid.widget.Button Povratne informacije tappable [37,1470][1043,1604]in…[e11] ux-check: Every row glyph is perceptibly distinguishable from its own 30x30 tile and from the row card behind it in both themes (non-text 3:1 holds on device). — android/emulator-5554: both themes reached (e11-dark-checked.txt: 'content-desc="Dark" checkable="true" checked="true"'; light in e4-light-checked.txt); computed WCAG non-text ratios for all six steps vs card and tinted tile are >=3:1 in both themes (e11-contrast.log: 'gold hue=#7A7C1D vsCard=3.82 vsTile=3.41', 'fern hue=#9EEB84 vsCard=11.46 vsTile=8.96'); Profile captures both themes (e11-profile-light.png, e11-profile-light-bottom.png, e11-profile-dark.png, e11-profile-dark-bottom.png) are for the visual reviewer — perceptual distinguishability is not my claim.
[e9] ux-check: Light theme, English and Serbian: every row glyph is visibly coloured and readable against its tile (not washed out), and the colours match row-for-row between the two languages.
[e8] ux-check: English vs Serbian of the same screen and theme show identical row colours/tile class — android; e8-en.log and e8-sr.log both read 'SCENE … OK' and show the same rows in the same order at identical bounds (Code Reviewer/Agent za pregled koda [37,1016], Security Agent/Bezbednosni agent [37,1187], PR Review/Pregled PR-a [37,1457], Preferences/Podešavanja [37,1726], Tutorial/Tutorijal [37,1897], LINKED ACCOUNTS/POVEZANI NALOZI [37,2086]) with only the text localized, so translation does not change which row renders; glyph colour and tile class are visual, so the visual reviewer judges e8-en.png/e8-sr.png, and the tint's label-independence is the rowTint table plus the mounted EN/SR…
[e12] ux-check Bottom bar (Početna / Agenti / Profil) in both themes — android; 'SCENE e12-tabs OK' (e12-tabs-scene.log line 1) proves the bar is functional — tabs 'Home, tab, 1 of 3' (35), 'Agents, tab, 2 of 3' (37), 'Profile, tab, 3 of 3' (39) switch to 'Nothing running right now'/'Agents'/'Code Reviewer'; both-theme stills e12-dark-profile.png and e12-light-profile.png (Dark/Light radio checked) captured for the visual reviewer; the diff touches _layout.tsx comment-only, so the bar is unchanged; no behavioural UX-DEFECT observed.
[e11] ux-check: Every row glyph is perceptibly distinguishable from its own 30x30 tile and from the row card behind it in both themes (non-text 3:1 holds on device).
[e12] ux-check Bottom bar (Početna / Agenti / Profil) in both themes
[e8] ux-check: English vs Serbian of the same screen and theme show identical row colours/tile class
[e11] ux-check: Every row glyph is perceptibly distinguishable from its own 30x30 tile and from the row card behind it in both themes (non-text 3:1 holds on device).
[e9] ux-check: Light theme, English and Serbian: every row glyph is visibly coloured and readable against its tile (not washed out), and the colours match row-for-row between the two languages.
Follow-ups (not changed here)