refactor(frontend): redesign SVG embed card for cleaner visual - #384
Conversation
|
@hellosunghyun is attempting to deploy a commit to the Inevitable Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR redesigns the profile embed SVG card in packages/frontend to use a cleaner, GitHub Primer-inspired visual style while improving metric rendering for long numeric values.
Changes:
- Reworked the embed SVG layout (new gradients, border/glow, brand icon header, metric accent bars, updated palette).
- Added
fitValueFontSize()to auto-scale oversized metric values to prevent overflow. - Updated/expanded tests to match the new SVG structure, colors, and font-scaling behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/frontend/src/lib/embed/renderProfileEmbedSvg.ts | Implements the redesigned SVG markup, palette, accent gradients, and auto-fit font sizing. |
| packages/frontend/tests/lib/renderProfileEmbedSvg.test.ts | Updates assertions for new IDs/colors/structure and adds coverage for long-value font scaling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function getRankColor(rank: number | null, palette: ThemePalette): string { | ||
| if (rank === 1) return "#EAB308"; | ||
| if (rank === 2) return "#94A3B8"; | ||
| if (rank === 3) return "#D97706"; | ||
| return palette.accentSoft; | ||
| if (rank === 1) return palette.rankGold; | ||
| if (rank === 2) return palette.rankSilver; | ||
| if (rank === 3) return palette.rankBronze; | ||
| return palette.rankDefault; | ||
| } |
There was a problem hiding this comment.
accentRank is defined in ThemePalette/THEMES but never used. As a result, non-medal ranks currently use rankDefault (brand blue) for both the rank value color and the accent-bar gradient via getRankColor(), which doesn't match the PR description's “amber for rank” default. Consider using palette.accentRank for the rank card accent (and reserving rankDefault/title for the value), or remove accentRank if the default should be blue.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 2 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/frontend/src/lib/embed/renderProfileEmbedSvg.ts">
<violation number="1" location="packages/frontend/src/lib/embed/renderProfileEmbedSvg.ts:225">
P2: `rankAccent` is computed identically to `rankColor` via `getRankColor()`, so the accent bar for non-medal ranks renders as blue (`rankDefault`) instead of the intended amber. Meanwhile `palette.accentRank` (`#D29922` / `#9A6700`) is defined in both themes but never referenced. Use `palette.accentRank` here for the accent bar default, and let `getRankColor()` continue to drive the value text color.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| const metricsW = width - px * 2; | ||
| const metricW = (metricsW - metricsGap * 2) / 3; | ||
| const rankColor = getRankColor(data.stats.rank, palette); | ||
| const rankAccent = getRankColor(data.stats.rank, palette); |
There was a problem hiding this comment.
P2: rankAccent is computed identically to rankColor via getRankColor(), so the accent bar for non-medal ranks renders as blue (rankDefault) instead of the intended amber. Meanwhile palette.accentRank (#D29922 / #9A6700) is defined in both themes but never referenced. Use palette.accentRank here for the accent bar default, and let getRankColor() continue to drive the value text color.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/src/lib/embed/renderProfileEmbedSvg.ts, line 225:
<comment>`rankAccent` is computed identically to `rankColor` via `getRankColor()`, so the accent bar for non-medal ranks renders as blue (`rankDefault`) instead of the intended amber. Meanwhile `palette.accentRank` (`#D29922` / `#9A6700`) is defined in both themes but never referenced. Use `palette.accentRank` here for the accent bar default, and let `getRankColor()` continue to drive the value text color.</comment>
<file context>
@@ -160,117 +201,118 @@ function renderProfileCardSvg(data: UserEmbedStats, options: RenderProfileEmbedO
+ const metricsW = width - px * 2;
+ const metricW = (metricsW - metricsGap * 2) / 3;
const rankColor = getRankColor(data.stats.rank, palette);
+ const rankAccent = getRankColor(data.stats.rank, palette);
return `<?xml version="1.0" encoding="UTF-8"?>
</file context>
| const rankAccent = getRankColor(data.stats.rank, palette); | |
| const rankAccent = (data.stats.rank && data.stats.rank <= 3) ? getRankColor(data.stats.rank, palette) : palette.accentRank; |
…-redesign # Conflicts: # packages/frontend/src/lib/embed/renderProfileEmbedSvg.ts
junhoyeo
left a comment
junhoyeo
left a comment
There was a problem hiding this comment.
LGTM — clean Primer-inspired redesign with solid auto-scaling logic. Review suggestions will be addressed in a follow-up PR.
Summary
What Changed
Visual
#58A6FF,#3FB950,#E3B341dark /#0969DA,#1A7F37,#9A6700light)Functional
fitValueFontSize()— new auto-scaling function that shrinks oversized metric values (e.g. "15,726,314,363" renders at 20px instead of overflowing at 28px)Math.round()on computed display-name x-position to avoid ugly decimals in SVG attributesformatCompactwas imported but never directly referencedTests
auto-scales font size for very long token valuesFull Changelog:
renderProfileEmbedSvg.ts+renderProfileEmbedSvg.test.ts— no other files touched.Summary by cubic
Redesigned the profile embed SVG for a cleaner, Primer-inspired look and added an optional contributions graph. Long metric values now auto-fit, and the error card matches the new style.
New Features
token-grad, cost is green; values auto-fit to prevent overflow.graph=1/true: theme-aware cells with day/month labels; increases card height; ignored in compact mode.Refactors
bg,glow,divider-grad,acc-*, errorerr-bg); removedformatCompact; rounded display-name x-position.graphfrom the query and includes contributions fromgetUserEmbedContributions(built fromdailyBreakdown+submissions, intensity 0–4, cached 60s). Tests updated for the new structure/colors, long-value scaling, and graph rendering.Written for commit c5e7c70. Summary will update on new commits.