fix(media): logo tile polish — no crop, no gloss over real logos, neutral chips#17
Merged
Conversation
…tral chips - ProjectLogo: object-contain instead of object-cover so non-square logos are not cropped; letterbox areas show the accent fill - ProjectLogo: gloss stack (mesh + top lighting + corner blik) renders only behind the monogram fallback — it used to leak through transparent SVG logos - ProjectLogo: flat accent background under real logos; the white-mixed gradient (fallback-only now) produced light fringes around dark logos - ProjectLogo: shrink-0 baked into the tile so flex rows can never squish it - ProjectLogo: corner radius scales with tile size (~25% of edge) so sm/md/lg read as the same squircle - FeaturedProjectCard: drop border-2 frame around the logo; stronger bottom scrim so card text stays readable over typographic banners - MarketplaceProjectCard: drop ring-2/border frame around the logo; neutral category chip — project accentColor (e.g. #000000) made it unreadable - ProjectPagePreview: neutral category chip, fixed-brand Trophy tint, and no border-4 frame around the logo (mirrors dev-portal/backoffice overview fix)
… edge md (44px) still used rounded-xl (12px = 27%) and lg at its mobile width (56px) kept 16px (28.6%) — both read rounder than sm (9px/36 = 25%).
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.
Problem
Project logos and category chips are rendered with assumptions that break on real-world data (transparent SVGs, non-square images, dark accent colors):
object-cover, so any non-1:1 logo (e.g. the 32x30 Unicity line-ball SVG) lost its edges.#000000the GAME chip was invisible.ring-2/borderon the marketplace card,border-2on the featured card,border-4in the page preview) — same class as the frames already removed from the dev-portal/backoffice overview pages.Fix
ProjectLogo:object-contain, gloss only behind the monogram fallback, flat accent fill under real logos, baked-inshrink-0, size-proportional corner radius.FeaturedProjectCard: frameless logo, stronger bottom scrim for text readability over typographic banners.MarketplaceProjectCard/ProjectPagePreview: frameless logo, neutral category chips, fixed-brand Trophy tint.Tests
81/81 passing, including new
ProjectLogosuite (un-cropped contain, no gloss with a real logo, monogram+gloss fallback, placeholder-URL fallback, shrink-0) and frameless/neutral-chip assertions on both cards.tsc --noEmitandtsupbuild clean.