Merged
Conversation
Complete visual overhaul across all screens: Theme foundation (theme.rs): - Named color constants: BG, SURFACE, SURFACE_ALT, BORDER, TEXT, TEXT_MUTED, ACCENT, GAME_BTN, TIMER_TRACK/FILL - Spacing constants: SP_XS/SM/MD/LG/XL - Border radius constants: RADIUS_SM/MD/LG/FULL - Replaces all scattered Color::srgb(0.9, 0.9, 0.9) and palette refs Menu restyle: - Rounded card containers for N-selector and cue toggles - Circular +/- buttons with border - Checkboxes show ✓ glyph (toggled via TextColor visibility) - Full-width PLAY button with accent background and dark text - Score history table with Date column, alternating row tints - Consistent spacing via theme constants Game HUD restyle: - Timer progress bar below the top bar (6px, accent fill, color shifts when >80% elapsed) - Compact pill-shaped action buttons that fit 4 across - Shortened labels: Pos/Col/Shp/Snd with key in parens - Themed colors for button states Pause overlay: - Centered card with rounded corners on dark scrim - Resume button (accent) and Quit to Menu button (surface) - PauseAction enum + pause_button_system for button handling Note: BorderRadius is a Node field in Bevy 0.18, not a Component.
The score history table used a flat grid where BackgroundColor was set on individual text cells, only tinting the text bounds. Switched to a column of flex-rows so each row container spans the full width and carries the alternating background. Rows also get rounded corners.
The ✓ glyph wasn't rendering properly with FiraSans-Bold. Replaced with a pure UI approach: a small 16x16 rounded Node inside the checkbox whose BackgroundColor toggles between BG (visible) and NONE (hidden). No font dependency for the check indicator.
Both query parameters accessed &mut BackgroundColor — the main checkbox query on Button entities and the check_marks query on CheckMark entities. Bevy couldn't prove disjointness, causing a panic at startup. Adding Without<Button> to check_marks makes the queries provably disjoint.
Adds a 'Quit' button below PLAY that exits the application via AppExit::Success. Styled as a subdued surface-alt button with muted text to keep visual focus on PLAY.
Add align_items: Center to the root column so cards, buttons, and score history are centered rather than stretched to full width. All content elements use a fixed 360px width for consistent sizing.
The button system was resetting all buttons to theme::SURFACE on Interaction::None, overriding the PLAY button's accent background. Added a RestingColor component that stores each button's resting color, used to restore it after hover/press.
Remove flex_grow: 1.0 from the score table so it sizes to its content instead of stretching to fill remaining vertical space.
Show 5 scores per page with ‹/› navigation buttons and a page indicator. The table rebuilds reactively when the ScorePage resource changes. Page resets to 0 on menu entry.
manuelmauro
force-pushed
the
feat/ui-restyle
branch
from
3dc1bd4 to
1e9574d
Compare
manuelmauro
changed the title
manuelmauro
changed the title
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
1 participant
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.
Summary
Complete visual overhaul across all screens — all 4 scopes from the Shape Up pitch shipped.
Scope 1: Theme foundation (
src/theme.rs)Centralised design tokens replacing all scattered
Color::srgb(0.9, ...)andpalette::references:BG,SURFACE,SURFACE_ALT,BORDER,TEXT,TEXT_MUTED,ACCENT,GAME_BTN,TIMER_TRACK/FILLSP_XS(4) /SP_SM(8) /SP_MD(16) /SP_LG(24) /SP_XL(32)RADIUS_SM(6) /RADIUS_MD(12) /RADIUS_LG(16) /RADIUS_FULL(9999)Scope 2: Menu restyle
TextColor)Scope 3: Game HUD restyle
Scope 4: Pause overlay
AppState::MenuTechnical notes
BorderRadiusis a field onNodein Bevy 0.18, not a standalone component — cannot be in spawn tuples directlypx()is notconst— theme spacing usesVal::Px(...)for const correctness