Rework header#21
Merged
Merged
Conversation
Co-authored-by: Copilot <copilot@github.com>
2 tasks
Co-authored-by: Copilot <copilot@github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refreshes the frontend header/UI styling by introducing a new “LED display” color palette and a new reusable button system, then applying those styles across the header, player controls, and track badges.
Changes:
- Replaced legacy
--accent-*variables with--led-*variables and added additional typography/radius tokens. - Introduced new reusable button classes (
.btn,.btn-metal,.btn-amber,.btn-dark) and migrated several components to use them. - Updated header layout/branding markup and styling, plus refined badge styling for Rosamerica/Dortmund labels.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/index.css | Adds new design tokens and new .btn* + badge variants; updates global colors. |
| frontend/src/components/TrackItem.tsx | Applies new badge variant classes for genre labels. |
| frontend/src/components/Player.tsx | Migrates player control buttons from .button to .btn*. |
| frontend/src/components/Player.css | Updates player background styling to new gradients. |
| frontend/src/components/PlayButton.css | Updates play button colors to new --led-* variables. |
| frontend/src/components/Header.tsx | Reworks logo markup and migrates search/API controls to .btn*. |
| frontend/src/components/Header.css | Reworks header/search styling and adds responsive layout adjustments. |
| frontend/src/components/Filters.tsx | Migrates RESET button to .btn btn-amber. |
| frontend/src/components/Filters.css | Updates color variables from accent to LED palette for filters UI. |
| frontend/index.html | Loads JetBrains Mono font used by new UI elements. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
TODO