Improve nav icons, menu icon proportions, and CDG lyrics smoothing by Copilot · Pull Request #1 · LightSeek3r/KaraokeEternal

Copilot · 2026-03-06T15:31:01Z

Nav icons were visually cluttered, settings panel icons oversized relative to text, and CDG lyrics rendered with hard pixelation.

Navigation icons

NAV_LIBRARY: stacked-cards → album disc (Material Design album)
NAV_SUBSCRIPTIONS: subscriptions → playlist-play (Material Design playlist_play)

Menu icon sizing

PlayerPrefs and PathItem icons reduced from --icon-size-l (2rem) to --icon-size-m (1.5rem) — was 60% larger than adjacent text, now proportional

CDG lyrics rendering

// Before: pixelated scaling of 300×216 native CDG frames
this.canvasCtx.imageSmoothingEnabled = false

// After: smooth interpolation when scaling to screen
this.canvasCtx.imageSmoothingEnabled = true
this.canvasCtx.imageSmoothingQuality = 'high'

Before & After

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

- Add text labels (Library, Queue, Account) below navigation icons - Improve nav touch targets with better padding and flex layout - Activate Beon custom font for visualization text via --font-family-custom - Improve ColorCycle text: clamp() sizing, layered RGBA shadows, letter-spacing - Improve UpNow text: clamp() sizing, bold weight, enhanced shadows - Add demo HTML files showcasing before/after for both changes Co-authored-by: LightSeek3r <75648597+LightSeek3r@users.noreply.github.com>

- Replace NAV_LIBRARY icon (stacked cards → album disc) for clearer recognition - Replace NAV_SUBSCRIPTIONS icon (subscriptions → playlist-play) for queue clarity - Reduce settings panel icons from --icon-size-l (2rem) to --icon-size-m (1.5rem) in PlayerPrefs.css and PathItem.css for better proportion with text - Enable imageSmoothingEnabled=true with high quality in CDGPlayer to eliminate pixelated lyrics rendering when CDG graphics are scaled up - Update demo HTML with before/after comparisons for all three changes Co-authored-by: LightSeek3r <75648597+LightSeek3r@users.noreply.github.com>

Copilot

Pull request overview

Updates several UI/visual elements in KaraokeEternal’s player and navigation to improve clarity and rendering quality.

Changes:

Updates navigation presentation (new icons + adds text labels under icons).
Adjusts player overlay typography (custom font token + responsive sizing/shadows).
Enables high-quality canvas smoothing for CDG frame scaling and reduces settings icon sizes.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/styles/variables.css	Changes the global `--font-family-custom` token to prefer Beon.
src/routes/Player/components/PlayerTextOverlay/UpNow/UpNow.css	Tweaks UpNow username typography (clamp sizing, shadow, spacing, weight).
src/routes/Player/components/PlayerTextOverlay/ColorCycle/ColorCycle.css	Tweaks ColorCycle typography (clamp sizing, shadow, spacing, weight).
src/routes/Player/components/Player/CDGPlayer/CDGPlayer.tsx	Enables canvas image smoothing/high quality for scaled CDG rendering.
src/routes/Account/components/Prefs/PlayerPrefs/PlayerPrefs.css	Reduces SVG icon height for PlayerPrefs.
src/routes/Account/components/Prefs/PathPrefs/PathItem/PathItem.css	Reduces SVG icon height for PathItem controls/drag handle.
src/components/Navigation/Navigation.tsx	Adds labels and updates NavLink class structure.
src/components/Navigation/Navigation.css	Adds styles for labeled nav links and active label/icon coloring.
src/components/Icon/icons.ts	Replaces NAV_LIBRARY and NAV_SUBSCRIPTIONS SVG paths.
docs/demo/visualization-fonts-demo.html	Adds a standalone demo page for visualization font/typography changes.
docs/demo/menu-ui-demo.html	Adds a standalone demo page for nav/menu sizing and CDG smoothing.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-06T17:05:44Z


  --font-family: system-ui, sans-serif;
-  --font-family-custom: system-ui, sans-serif;
+  --font-family-custom: 'Beon', system-ui, sans-serif;


This PR changes --font-family-custom to prefer the Beon font, but the PR title/description focuses on nav icons/menu icon sizing/CDG smoothing. Please update the PR description/title to explicitly include the font/typography changes (and the new demo docs), or split them into a separate PR so reviewers can evaluate the visual impact independently.

Copilot · 2026-03-06T17:05:44Z


  --font-family: system-ui, sans-serif;
-  --font-family-custom: system-ui, sans-serif;
+  --font-family-custom: 'Beon', system-ui, sans-serif;


--font-family-custom is used outside the player visualization (e.g. modal titles and account/queue headings). Switching it to Beon will change typography across multiple screens, not just the player overlay. If the intent is to limit Beon to the player visualization, consider introducing a dedicated variable (e.g. --font-family-visualization) or scoping the font-family override to the player overlay container instead of changing the global token.

Suggested change

--font-family-custom: 'Beon', system-ui, sans-serif;

--font-family-custom: var(--font-family);

--font-family-visualization: 'Beon', system-ui, sans-serif;

Copilot · 2026-03-06T17:05:44Z

 .user {
-  font-size: 6vh;
+  font-size: clamp(2rem, 6vh, 4rem);
+  font-weight: bold;


The Beon font is only declared with font-weight: normal in src/styles/fonts.css. Setting font-weight: bold here will force synthetic bolding (or fallback), which can look inconsistent across browsers. Consider either adding a bold Beon font-face (matching the weight you want) or using font-weight: normal and relying on size/shadow for emphasis.

Suggested change

font-weight: bold;

font-weight: normal;

Copilot · 2026-03-06T17:05:45Z

-  text-shadow: 0px 5px 5px #000;
+  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.6);
+  letter-spacing: 0.05em;
+  font-weight: bold;


The Beon font is only registered at font-weight: normal (see src/styles/fonts.css). Using font-weight: bold here will result in synthetic bolding/fallback and can cause inconsistent rendering. Consider adding a bold Beon font-face or keeping this at font-weight: normal.

Suggested change

font-weight: bold;

font-weight: normal;

Copilot · 2026-03-06T17:05:45Z

+    this.canvasCtx.imageSmoothingEnabled = true
+    this.canvasCtx.imageSmoothingQuality = 'high'


paintCDG runs on every changed CDG frame (via requestAnimationFrame). Setting imageSmoothingEnabled/imageSmoothingQuality on each paint is unnecessary work in this hot path. Consider moving these assignments to componentDidMount (after getContext) or only updating them when the value actually changes.

Suggested change

this.canvasCtx.imageSmoothingEnabled = true

this.canvasCtx.imageSmoothingQuality = 'high'

if (!this.canvasCtx.imageSmoothingEnabled) {

this.canvasCtx.imageSmoothingEnabled = true

}

if (this.canvasCtx.imageSmoothingQuality !== 'high') {

this.canvasCtx.imageSmoothingQuality = 'high'

}

Initial plan

3f8d6ee

Copilot AI assigned Copilot and LightSeek3r Mar 6, 2026

Copilot started work on behalf of LightSeek3r March 6, 2026 15:31 View session

Copilot AI changed the title ~~[WIP] Update app menus UI and visualization fonts for user friendliness~~ Improve navigation labels and visualization font rendering Mar 6, 2026

Copilot finished work on behalf of LightSeek3r March 6, 2026 15:44

Copilot started work on behalf of LightSeek3r March 6, 2026 16:02 View session

Copilot AI changed the title ~~Improve navigation labels and visualization font rendering~~ Improve nav icons, menu icon proportions, and CDG lyrics smoothing Mar 6, 2026

Copilot finished work on behalf of LightSeek3r March 6, 2026 16:25

LightSeek3r marked this pull request as ready for review March 6, 2026 17:01

Copilot AI review requested due to automatic review settings March 6, 2026 17:01

Copilot started reviewing on behalf of LightSeek3r March 6, 2026 17:02 View session

Copilot AI reviewed Mar 6, 2026

View reviewed changes

Navigation Menu

Improve nav icons, menu icon proportions, and CDG lyrics smoothing - #1

Improve nav icons, menu icon proportions, and CDG lyrics smoothing#1
LightSeek3r with Copilot wants to merge 3 commits into
mainfrom
copilot/update-menu-ui-fonts

Copilot AI commented Mar 6, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	--font-family-custom: 'Beon', system-ui, sans-serif;
	--font-family-custom: var(--font-family);
	--font-family-visualization: 'Beon', system-ui, sans-serif;

		this.canvasCtx.imageSmoothingEnabled = true
		this.canvasCtx.imageSmoothingQuality = 'high'

Conversation

Copilot AI commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Navigation icons

Menu icon sizing

CDG lyrics rendering

Before & After

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 6, 2026 •

edited

Loading