Repository navigation
feat(ui): sweep remaining pages and components (batch 5) - #102
Closed
Coder-soft wants to merge 32 commits into
Closed
Coder-soft wants to merge 32 commits into
Coder-soft wants to merge 32 commits into
Conversation
First layer of the UI redesign. Establishes the foundation the page-by-page sweep will build on, without touching component structure yet. - Collapse the two competing theme files (index.css + global.css) into a single source; global.css is deleted and its scrollbar utilities merged. - Replace the token set with one dark-only palette: cool near-black surfaces, near-white ink, and #F199D8 as the single brand colour (dark foreground for accessible contrast). Remove the glow/neon keyframes. - Wire Geist Sans + Geist Mono as the UI/heading/body type system; headings no longer use the pixel display font. - Remove light mode: drop ThemeToggle, the navbar/drawer toggles, the theme init in App, the `.dark` token block, and the light theme-color meta. - Set `class="dark"` on <html>, modernise the base Card, and hardcode Sonner to dark.
- Revert the brand token from the pink test value back to the original #9B87F5 (hsl 251 85% 75%), including the ring, sidebar and cow-* aliases. - Give the primary button a dark foreground for accessible contrast instead of white. - Drop `height: 100%` from html/body (inherited from the removed global.css); it collapsed the documentElement scroll height and broke window scrolling and the navbar scroll listener.
Rename the home page's pixel call sites to the new design system. Structure and copy are unchanged; only the visual language moves. - Headings: Geist, semibold, tracking-tight; body copy and labels move off the monospace/pixel fonts to Geist with muted-foreground. - Cards: `pixel-card`/`pixel-corners`/2px borders replaced with rounded-xl surfaces, hairline borders and surface steps. Hover is a subtle lift and border tint, no glow. - Buttons: pixel-btn variants replaced with rounded, token-based buttons (primary fill / outline) with consistent padding. - Section dividers drop the heavy 4px purple borders for hairlines. - The RenderDragon wordmark keeps the pixel font as the single brand accent. ResourceCard itself (rendered in Featured) is untouched; it is scheduled for the resources batch.
Steer from review: all buttons are fully rounded. - Button primitive (button-variants) goes rounded-md -> rounded-full. - Inline CTA links on the home page match. - Legacy pixel-btn variants drop the pixel-corners clip and round fully, so buttons on not-yet-swept pages stay pill-shaped too.
Sweep the resources browse experience onto the new system. - ResourceCard: rounded-xl surface, hairline border, lift-on-hover, hairline preview frames, muted title, token-based copyright button and spinner. - ResourceCardSkeleton matches the new card shape. - Filters/sort: drop pixel-corners; category controls are pill buttons, search uses the standard input. - ResourcesList: empty-state and contribute buttons use token buttons. - ResourcesHub: Geist heading, pill tabs, token scroll-to-top, primary badges. Not in this batch: ResourceDetailDialog, creator/music pack tabs and the sidebar browsers still use the old classes; they are a follow-up.
Steer from review: headings use Montserrat Bold. - Add @fontsource/montserrat (600/700) and a `font-heading` family token. - Base h1-h6 use Montserrat bold; swept headings drop font-semibold for font-bold so they render at 700. - The hero wordmark keeps the pixel font at normal weight.
Finish the resources experience: detail dialog, pack tabs, favorite views, sidebar browsers, filters, players and popups all move to the new system. - Replace cow-* / pixel-* / pixel-input and the pixel fonts with token classes: primary/primary-foreground accents, muted-foreground text, hairline borders. - CreatorPackCard becomes a rounded surface; dialogs use border-border instead of a 2px primary outline; buttons are pills; AudioPlayer/ResourcePreview use the primary token. - Creator/music pack tabs, favorites tabs + sidebar, and the McSounds/McIcons browsers swept with the same replacements. Only the sidebar/tab internals differ from the card grid; structure unchanged.
Apply the design system across everything that was still using the old classes: generators, utilities, community/guides/blogs, auth, profile, admin, analytics, static pages, skeletons and shared components. Mechanical, token-for-token replacements: - cow-purple/cow-dark accents -> primary / background tokens - pixel-card -> rounded-xl border bg-card p-4 - pixel-btn-primary/secondary -> rounded pill primary/outline utilities - pixel-input -> rounded input surface - pixel-corners removed - pixel + monospace fonts dropped from chrome headings/body Intentionally preserved as pixel output: Logo, PixelSvgIcon, the hero/navbar/ footer wordmark, MinecraftNametagGenerator, the text-generator preview and the menu/gallery art components.
|
@Coder-soft is attempting to deploy a commit to the yamura3's projects Team on Vercel. A member of the Team first needs to authorize it. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configuration
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Every call site is now on the token system, so remove the legacy definitions. - Delete .pixel-* (btn/card/input/corners), .neon-border, .parallax-*, .tool-planks-hover, .font-pixel, .font-chakra and all cow-* color utilities and their --cow-* variables from index.css. - Remove the cow palette and jetbrains-mono family from the Tailwind theme. - Stop importing @fontsource/jetbrains-mono (no remaining usage). Kept: .cow-grid-bg (used as the subtle background grid), .pixelated, the Minecraftia/Minecraft Seven/Minecraft Five fonts (brand + generator output) and the Video.js theme.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- Add accessible titles to the mobile nav drawer (DrawerTitle/Description), the resource filter sheets (SheetTitle) and the changelog dialog (DialogTitle), clearing Radix "requires a DialogTitle/Description" warnings. - Repair hover:bg-primary/90/<n> classes accidentally produced by the batch-5 replacement across ~13 files.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Same fix as the standalone creatorcluster#103, applied to the redesigned card so the redesign branch does not carry the pre-existing id/URL mismatch.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- Donate button now pops out (spring scale + fade + lift) instead of a plain opacity fade. - Back-to-top button pops in with a matching spring; its arrow is white. - Back-to-top scroll detection listens in the capture phase and reads any scrolling element, so it fires reliably.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
The full-bleed pattern image + dark vignette covered the whole card and washed out the title/description. Replace it with a top header band: a rounded preview that fades in behind the icon row, a subtle zoom, and a gradient into the card so the copy stays legible. The icon tile picks up a translucent backdrop over the image.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- Remove the back-to-top button from the Resources Hub. - Fix horizontal overflow in the Minecraft Icons/Sounds layout (max-w-7xl exceeded the container), which is what blocked comfortable scrolling. - Restyle the category count chips from low-contrast grey (bg-secondary/50 + muted text) to a branded primary chip. - Center the audio player transport: the skip/play/skip group is centered in the player with the time beneath, and the play glyph nudge is corrected (ml-1 over-shifted it; now translate-x-[1px]).
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
The Radix ScrollArea is a flex-1 child of a fixed-height, overflow-hidden column. Without min-h-0 its default min-height:auto made it grow to the full tree height, so the parent clipped it and the viewport never scrolled. Adding min-h-0 lets it shrink to the available space and scroll. Same fix for the Minecraft Sounds browser.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
`overflow-x: hidden` on html/body computes the root's overflow-y to hidden, which stops wheel/touch scrolling of the whole document (programmatic scroll still worked, hiding the bug). `clip` clips horizontal overflow without forcing the other axis, so vertical scrolling works normally.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Replace the Radix ScrollArea with a plain overflow-y-auto div (keeping the min-h-0 fix). The ScrollArea's viewport sizing is finicky in some browsers, which can leave the long Minecraft Icons tree unscrollable even though the Sounds tree appears fine. A plain scroll container is dependable everywhere.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
SelectContent ran a custom effect on mount that set `document.documentElement.style.overflow = 'hidden'` (to avoid a scrollbar layout shift). It did not reliably restore it, so after using a dropdown (e.g. the Minecraft Icons subcategory filter) the <html> element kept an inline overflow:hidden and the whole page stopped scrolling — even though scrollTop still worked programmatically. Removed the effect; Radix already handles scroll-locking while the dropdown is actually open.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- Count badges were clipped: the Radix ScrollArea's overlay scrollbar sat on the right edge, and nested rows were `w-full` + `ml-6` (which overflowed the container by the left margin). Switched to the plain scroll container and sized nested rows with calc so their right edge stays inside. - Match the other browsers: non-bold header, pixel music icon, primary-tinted count chips.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Users disliked semi-transparent panels and cards that went semi-transparent on hover. Solidify the surface tokens: card/muted/secondary/accent/background opacity modifiers (and their hover variants) become fully opaque. Image scrims (bg-black/*) and accent tints (bg-primary/*) are left as-is.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Replace the raw link text with a YouTube icon and the video's title, resolved via oEmbed (noembed, CORS-friendly) and cached per video id. Non-YouTube links fall back to the URL.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Fetch GET /music_moods from the assets API (with the existing fallback base)
instead of the bundled /data/music_moods.json. Same { filename, moods, source }
shape.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
cursorWidth was set to 0 earlier (hiding the cursor). Bring it back at 2px in a lighter purple so the playhead is visible over the progress colour.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
…aveform (bg-muted)
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
- Font previews never loaded: `document.fonts.check()` returns true for any family (even bogus), so the loader short-circuited and previews fell back to a default face. Track loaded families in a module set and always load. Also stop double-encoding the URL (`encodeURI` turned existing %20 into %2520) which broke space-named fonts. - Resource detail dialog: replace the old coloured category chip with the same dark-grey single-line label used on the cards. - Redesign the Contact page: clean header, rounded email/community panels, pill Discord button, and a tidy team grid with solid social buttons.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Starting a new asset's preview left the previous one playing (each AudioPlayer was independent). Add a window-level coordinator: when a player starts it broadcasts `rd:audio-play` with its id, and every other player pauses itself.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Replace the rounded/pill shape language with a 45° chamfer on the top-left and bottom-right corners of panels, cards, buttons and inputs. Implemented as an unlayered `.chamfer` class (and applied to the panel radius utilities) so it out-specifies the radius utilities; circles (avatars, spinners, switches) keep rounded-full.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
This branch was successfully deployed
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.
Batch 5 — apply the design system to everything outside the resources hub. Stacked on #101 → #100 → #99.
Scope
Generators (Background/Text/Player/YouTube/Content), Utilities, Community, Guides/GuideView, Blogs/BlogView, Showcase, Changelogs, MusicCopyright, Looney*, Account, Profile/ProfileEditor, Admin/Analytics, auth dialogs/providers, creator-pack pages/managers, Contact/FAQ/TOS/Privacy/Construction/NativeApplication/NotFound, skeletons, DonateButton, AdBlockDetector, ValueProps/FinalCTA, ErrorBoundary, App.
Change
Mechanical token-for-token replacement:
cow-purple/cow-dark→primary/backgroundpixel-card→rounded-xl border bg-card p-4pixel-btn-primary/pixel-btn-secondary→ pill primary / outline utilitiespixel-input→ rounded input surface;pixel-cornersremovedPreserved on purpose (pixel output / brand)
Logo,PixelSvgIcon, hero/navbar/footer wordmark,MinecraftNametagGenerator, the text-generator preview, and the menu/gallery art components.Verification
pnpm lint0 errors (1 pre-existing warning);pnpm buildpasses./faq,/construction(community) and/resourcesin the dev server.