fix(header): normalize streak, cores, and reputation buttons#6097
Open
tsahimatsliah wants to merge 10 commits into
Open
fix(header): normalize streak, cores, and reputation buttons#6097tsahimatsliah wants to merge 10 commits into
tsahimatsliah wants to merge 10 commits into
Conversation
Align all three header stat buttons inside the profile pill on the same Button size/variant, icon size, typography, and number color so the group reads as one consistent control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Pre-existing strict violations (optional auth user, ConditionalWrapper wrapper type, ReactElement vs null return, Button props union) live on lines untouched by this PR and should be addressed in a dedicated cleanup PR. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the streak-only `pl-4` override so all three pill buttons share the same `pl-1.5 pr-3` from ButtonSize.Small. Shrink the compact streak icon to IconSize.XSmall so its full-bleed glyph visually matches the padded reputation and core icons. Update the profile-button spec to assert the accessible button by role instead of relying on the Radix tooltip's duplicated aria-label. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Keep the streak glyph rendered at XSmall (20px) but center it inside a 24x24 wrapper so its flex bounding box matches the cores and reputation icons. The Button's gap-1 now produces the same spatial gap between icon and number across all three buttons. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ButtonSize.Small with a left icon defaults to pl-1.5 pr-3 (6/12), so the right edge of each button reads as more padded than the left. Override to !px-2 on streak, cores, and reputation so all three share the same 8px left/right inner padding. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the inner padding on streak, cores, and reputation from !px-2 (8/8) to !px-1.5 (6/6). Both sides stay equal and the buttons now hug their icon/number more tightly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ReputationIcon (FilledIcon, viewBox 16x17) renders with ~4px of internal padding on each side when scaled to 24px, so identical button padding still left reputation looking more inset on the left than streak and cores. Use !pl-0.5 (2px) so the visible icon edge lands at the same horizontal position as cores'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
The three stat buttons inside the profile pill in the header (streak, cores, reputation) were rendered with three different patterns. This commit aligns them so they read as one consistent control.
Before the three buttons differed in:
typo-subhead; cores/streak usedtypo-footnote.IconSize.Small; the others used the size inherited fromButtonSize.Small.text-accent-bacon-default; reputation/cores used the default text color.ButtonVariant.Floatwhile sitting inside abg-surface-floatpill, which doubled the surface.<button>wrappingReputationUserBadgeplus the avatar; the others used the sharedButtoncomponent.After all three are
Buttonwithvariant=Tertiary+size=Small, default icon size, default text color, and the avatar is its own dedicated clickable trigger for the profile menu.Test plan
🤖 Generated with Claude Code
Preview domain
https://claude-ecstatic-dirac-678fac.preview.app.daily.dev