Skip to content

refactor: move stat-pill state colors into CSS modules#406

Merged
fank merged 2 commits into
mainfrom
refactor/stat-pill-classes
Apr 30, 2026
Merged

refactor: move stat-pill state colors into CSS modules#406
fank merged 2 commits into
mainfrom
refactor/stat-pill-classes

Conversation

@fank
Copy link
Copy Markdown
Member

@fank fank commented Apr 30, 2026

Summary

  • Follow-up to fix: honor disableKillCount in playback UI (#87) #405 review feedback: replace conditional inline color styles in UnitsTab and StatsTab stat pills with semantic CSS module classes.
  • Adds modifier classes detailStatValueKills/Deaths/Markers and forceStatNumTotal/Alive/Kills/Deaths on the existing base classes; default color falls back to --text-dimmest.

Test plan

  • npx vitest run src/pages/recording-playback/ src/hooks/__tests__/useCustomize.test.tsx (320 tests pass)
  • npx tsc --noEmit
  • Visual regression: stat pills in unit detail card and force summary unchanged.

Replace conditional inline color styles in UnitsTab and StatsTab stat
pills with semantic modifier classes (detailStatValueKills/Deaths/
Markers, forceStatNumTotal/Alive/Kills/Deaths). Keeps JSX free of
state-driven inline color logic.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 30, 2026

Coverage Report for ui

Status Category Percentage Covered / Total
🔵 Lines 98.99%
🟰 ±0%
4848 / 4897
🔵 Statements 98.4%
🟰 ±0%
6836 / 6947
🔵 Functions 98.02%
🟰 ±0%
1885 / 1923
🔵 Branches 89.22%
⬆️ +0.04%
2228 / 2497
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
ui/src/pages/recording-playback/components/StatsTab.tsx 100%
🟰 ±0%
95.23%
⬇️ -0.42%
100%
🟰 ±0%
100%
🟰 ±0%
ui/src/pages/recording-playback/components/UnitsTab.tsx 97.17%
🟰 ±0%
93.93%
⬆️ +2.51%
97.8%
🟰 ±0%
100%
🟰 ±0%
136-144, 219-220
Generated in workflow #556 for commit 00317a2 by the Vitest Coverage Report Action

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the styling of statistics in the recording playback side panel by moving inline styles into dedicated CSS classes within SidePanel.module.css and updating StatsTab.tsx and UnitsTab.tsx to utilize these classes. This change improves maintainability and consistency across the UI. One improvement opportunity was identified regarding a hardcoded hex color that should be replaced with a CSS variable to maintain themeability.

Comment thread ui/src/pages/recording-playback/components/SidePanel.module.css
@fank fank merged commit f76501b into main Apr 30, 2026
3 checks passed
@fank fank deleted the refactor/stat-pill-classes branch April 30, 2026 13:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant