feat(library): redesign library with Heroic Theme and Outfit font#5489
Draft
biliesilva wants to merge 20 commits intomainfrom
Draft
feat(library): redesign library with Heroic Theme and Outfit font#5489biliesilva wants to merge 20 commits intomainfrom
biliesilva wants to merge 20 commits intomainfrom
Conversation
Adds the first pass of the library UI redesign: - New "Heroic Theme" (dark minimal, cyan accent) in themes.scss and registered in the theme selector. - Replace Rubik + Cabin with Outfit as the single app font family (default for both --primary-font-family and --secondary-font-family). - Swap MUI filled icons to Outlined variants in GameCard, SideloadDialog, and Library root (ArrowDropUp). FA structural icons in ActionIcons unchanged — the free pack does not ship regular variants for them. - Restyle GameCard: softer 12px radius, refined hover (translateY + layered shadow), pill-shaped store badge and status chip with blur overlay, smoother title reveal with gradient. - Tighten library grid spacing and pill the "number of games" badge. - Add --card-overlay-bg variable and a nord-light override so badges remain legible on light themes.
- Restyle SearchBar: pill shape, subtle border, hover/focus states with accent ring - Styled autocomplete dropdown (rounded, shadowed, hover highlight) - Add "/" keyboard shortcut to focus search globally (Esc to blur) - Kbd hint rendered inside the input when empty, hidden while focused
…over - Add lucide-react as the primary outlined icon library - Swap Library + Sidebar + filter buttons to Lucide icons - Restyle CategoryFilter + LibraryFilters as pill-shaped dropdown buttons (Dropdown gains a .pill button variant) - Restyle Sidebar: narrower default width (350 -> 240), section labels (LIBRARY / ACCOUNT / COMMUNITY), modern rounded active pill items, section grouping reflects design - Reorganize SidebarItem: accepts ReactNode icon (was FA-only) - Refined AlphabetFilter spacing/typography - AddGameButton: ghost pill with + icon - GameCard: floating circular action on hover, store badge moved to top-left (clearer corner hierarchy), status chip offset to the right
- Grid min column width 168 -> 220px for a more standard card size - Sidebar items: font-size --text-sm -> --text-md, icon 18 -> 22px, padding bumped to 10px vertical - ActionIcons icon 18 -> 20px - Dropdown pill buttons (Filters, Categories): font --text-sm -> --text-md, padding 10x16, inline icons 16 -> 18px - SearchBar: input font --text-sm -> --text-md, search icon 18 -> 20px, padding 6x12 -> 8x14 - AddGameButton: font --text-sm -> --text-md, Plus icon 14 -> 16 - LibraryHeader count pill: --text-sm -> --text-md with more padding - GameCard title: --text-md -> --text-lg, wider horizontal padding - AlphabetFilter: 12 -> 13px, text-tertiary -> text-secondary, wider hits - Heroic Theme: lighten secondary/tertiary text and navbar-inactive (#a6b1c5 -> #c4cedd, #6e7a90 -> #8f99ad / #b4beca for sidebar)
biliesilva
force-pushed
the
ui/library-page-redesign
branch
from
06e3083 to
154ee2a
Compare
- Wordmark: "Heroic" (title) + "Launcher" (uppercase tag) beside the shield icon; collapses to icon-only when the sidebar is narrow. - Active item: accent-colored text with a subtle tinted background + inset ring (replaces the darker-only active bg), matching the design. - Downloads item: shows a count badge on the right when there are active or queued installs in libraryStatus (reuses existing state). - SidebarItem extended with an optional badge prop (ReactNode). All existing sidebar items (Patreon, Ko-fi, Quit, etc.) preserved.
…ze collapsed icons
…prefix, shrink fonts
This reverts commit dff9f66.
…ear settings icon, big play CTA on hover
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
First pass of the Library page redesign, based on the Heroic redesign direction.
themes.scssand registered in the theme picker.lucide-reactand migrated Library, Sidebar, Header, SearchBar, ActionIcons, filter dropdowns, AddGameButton, and QuitButton to Lucide outlined icons. MUI usages in Library scope were swapped to*Outlinedvariants./keyboard shortcut.--text-secondaryand--navbar-inactivefor better contrast.Deferred / not done
Test plan
/anywhere → search focuses; Esc to blurpnpm codecheckpasses