From 401d0b3a19662c0fa3472b259018cad69e552a4e Mon Sep 17 00:00:00 2001 From: idoshamun Date: Sun, 24 May 2026 14:10:27 +0000 Subject: [PATCH 1/2] style(profile-button): match streak and cores text styling with reputation Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/shared/src/components/profile/ProfileButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/shared/src/components/profile/ProfileButton.tsx b/packages/shared/src/components/profile/ProfileButton.tsx index 08c4675e293..b8de8b80bc4 100644 --- a/packages/shared/src/components/profile/ProfileButton.tsx +++ b/packages/shared/src/components/profile/ProfileButton.tsx @@ -212,7 +212,7 @@ export default function ProfileButton({ streak={streak} isLoading={isLoading} compact - className="pl-4" + className="pl-4 !font-bold !text-text-primary !typo-subhead" /> )} {hasCoresAccess && ( @@ -236,6 +236,7 @@ export default function ProfileButton({ tag="a" variant={ButtonVariant.Tertiary} size={ButtonSize.Small} + className="!font-bold !typo-subhead" > {largeNumberFormat(displayedBalance)} From 17912755ad189d27050af6b74aed18dc5249713b Mon Sep 17 00:00:00 2001 From: idoshamun Date: Sun, 24 May 2026 14:29:26 +0000 Subject: [PATCH 2/2] style(profile-button): preserve streak/cores colors and tighten icon spacing Co-Authored-By: Claude Opus 4.7 (1M context) --- AGENTS.md | 1 + packages/shared/src/components/profile/ProfileButton.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index eadda2060f0..a6da20ee389 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -452,6 +452,7 @@ When reviewing code (or writing code that will be reviewed): - **Floating actions over positioned siblings need both DOM order and z-index** - When stacking a control (e.g. a lightbox close button) over a sibling that uses `position: relative`/`absolute` (e.g. an `` with `relative` for centering), do BOTH: render the floating control AFTER the content in the JSX, and give it an explicit `z-*` class (`z-1` matches the `ModalClose` default in `packages/shared/src/components/modals/common/ModalClose.tsx`). z-index alone is fragile in flex/stacking-context edge cases — pair it with DOM order so painting is unambiguous. - **Pick the overlay tier to match the surface, not the Modal default** - Overlay tokens come in tiers (`primary` ~64%, `secondary` ~40%, `tertiary` ~32%, `quaternary` ~24%). The standard `Modal` uses `bg-overlay-quaternary-onion`, but full-screen photo/media lightboxes need a darker tint so the image stands out — prefer a darker neutral like `bg-overlay-primary-pepper`. Don't default to `quaternary-onion` for every overlay; pick the tier and base color appropriate for the surface. - **CloseButton over images/media: use `ButtonVariant.Primary`, not `Float`** - `ButtonVariant.Float` paints with `--theme-surface-float` (~8% opacity surface), which is nearly invisible against a dark blurred backdrop or photo. For close buttons overlaid on image content (lightboxes, image-input previews, photo cards), use `ButtonVariant.Primary` for a solid background — this matches the existing `ImageInput.tsx` pattern (`packages/shared/src/components/fields/ImageInput.tsx`). Reserve `Float` for buttons floating over solid app backgrounds, not over content that bleeds through. +- **"Match styling" requests target typography and spacing, not color** - When a UI task says "make X look like Y" or "copy the styling", change typography (font-weight, font-size via `typo-*`) and spacing (gap, padding, margin), but preserve each element's existing color unless color is explicitly named. Colors usually carry semantic meaning (e.g. the header streak counter uses `text-accent-bacon-default` to read as an active streak indicator). Verify before collapsing color differences. ## Node.js Version Upgrade Checklist diff --git a/packages/shared/src/components/profile/ProfileButton.tsx b/packages/shared/src/components/profile/ProfileButton.tsx index b8de8b80bc4..60a95aa8079 100644 --- a/packages/shared/src/components/profile/ProfileButton.tsx +++ b/packages/shared/src/components/profile/ProfileButton.tsx @@ -212,7 +212,7 @@ export default function ProfileButton({ streak={streak} isLoading={isLoading} compact - className="pl-4 !font-bold !text-text-primary !typo-subhead" + className="!gap-0 pl-4 !font-bold !typo-subhead" /> )} {hasCoresAccess && ( @@ -236,7 +236,7 @@ export default function ProfileButton({ tag="a" variant={ButtonVariant.Tertiary} size={ButtonSize.Small} - className="!font-bold !typo-subhead" + className="!gap-0 !font-bold !typo-subhead" > {largeNumberFormat(displayedBalance)}