fix: give the report header a logo that survives being small - #261
Conversation
#259 swapped the old wordmark badge for the org's new mark, which was the right art but the wrong variant for this surface. The header renders the image at 20px, and the wordless mark is a stroke on transparency -- at that size a stroke carries almost no visual weight, so the header read as a faint tick rather than a mark. It is worst on GitHub's dark theme, where a thin brand-blue line sits close to the background. Two things were wrong, not one: * The variant. branding/logo-mark.png is documented for use "where a background already exists"; the comment header has none, so the mark had nothing to sit on. branding/avatar.png is the filled version and the one the branding README calls out as legible small. Using it here is what the asset is for. * The size. The report title is an h2, which GitHub renders at about 24px, so a 20px icon was smaller than the words beside it and lost the visual hierarchy before any question of contrast. So assets/logo.png is now a 128x128 downscale of avatar.png with the corners rounded (22%), and the width goes 20 -> 24 to match the h2 cap height. Rounding matters because GitHub rounds avatars in its own UI but not inline images; without it the header carries a hard blue square. Measured on the written file: RGBA preserved with the corners genuinely transparent (alpha 0 at 0,0 -- a flattened export would have shown 255 and rendered as a white box on dark), and the two dominant opaque colours are (44,156,205) = #2c9ccd and white, i.e. the brand blue and the check. 4994 -> 2822 bytes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U9zFxq8V4qxG4aMzJhGBFn
|
Warning Review limit reached
Next review available in: 26 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
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 |
|
1 participant
Why
#259 swapped the old wordmark badge for the org's new mark — right art, wrong variant for this surface. Reported by @shenxianpeng: the header now reads as a faint tick with no presence.
Two separate causes, not one:
The variant.
branding/logo-mark.pngis documented for use "where a background already exists". The comment header has none, so the mark had nothing to sit on — and a stroke on transparency carries almost no visual weight at this size, where the old asset was a filled badge. It is worst on GitHub's dark theme, where a thin brand-blue line sits close to the background.The size. The report title is an
h2, which GitHub renders at roughly 24px. Awidth="20"icon was therefore smaller than the words beside it — the hierarchy was already lost before any question of contrast.What changed
logo-mark.png(stroke, transparent)avatar.png(filled, brand blue)2024branding/avatar.pngis the filled variant and the one the branding README calls out as legible small — using it here is what the asset is for.Corners are rounded because GitHub rounds avatars in its own UI but not inline images; without it the header carries a hard blue square.
Verification
Rendered every candidate at real size against both themes before choosing — the comparison is what drove the decision rather than taste:
logo-mark @20(what shipped) — faint on light, nearly lost on dark.logo-mark @28— enlarging does not help, because the problem is stroke weight, not scale.avatar @20/24/28— holds on both themes;@24balances the h2 cap height.Measured on the written file, not assumed:
0at(0,0). A flattened export would read255there and render as a white box on dark, the exact defect the branding README flags about the legacylogo-small.jpg.(44, 156, 205)=#2c9ccdand white: the blue tile and the check.99 passed, black clean. The golden tests build their expected header frommain.REPORT_TITLE, so they follow the width automatically rather than hard-coding it.Note on ordering
Touches
main.pyonly atLOGO_URL/REPORT_TITLEand the two width mentions in the output-spec comment. #260 edits a different part of that comment block, so the two should merge in either order; if git does complain, the resolution is to keep both (my width change, its skipped-case block).🤖 Generated with Claude Code
https://claude.ai/code/session_01U9zFxq8V4qxG4aMzJhGBFn
Generated by Claude Code