[refactor] Consolidate hand-rolled eyebrow labels into <Eyebrow>#2815
Conversation
Render
Destroyed
|
Warning Review limit reached
Next review available in: 51 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. 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: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe shared 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
joshestein
changed the title
|
@greptile-apps review |
Greptile SummaryThis PR consolidates ~26 hand-rolled "uppercase + small + letter-spaced" label patterns across the website into the canonical
Confidence Score: 5/5Safe to merge — pure visual refactoring with designer sign-off, no behavioural or data-flow changes. All changes are CSS class consolidations onto an already-stable shared component. The No files require special attention. The auth-gated surfaces (course unit page, congratulations, facilitator-feedback) are covered by snapshot tests only; a staging click-through is noted in the PR as a recommended follow-up. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Hand-rolled eyebrow pattern
text-size-xs/xxs · font-semibold · tracking-0.05-0.18em] -->|replaced by| B[Eyebrow component
text-size-xxs · font-medium · tracking-wide 0.04em]
B --> C{Colour source}
C -->|static Tailwind class| D[className prop
e.g. text-bluedot-navy/60
text-white/70 · text-charcoal-mid]
C -->|runtime value| E[style prop
e.g. courseColors.accent
TAS.full]
C -->|default| F[text-bluedot-normal
canonical brand blue]
G[Heading-role eyebrows
CourseSchedule · courses/index · puzzles h2s] -->|keep h2 semantics| H[inline classes snapped
font-semibold → font-medium
tracking aligned]
B --> I[id prop
aria-labelledby target
MyBlueDotSidebar nav]
Reviews (3): Last reviewed commit: "[chore] Remove PR screenshots after embe..." | Re-trigger Greptile |
Converts 26 uppercase label call sites across 16 files to the Eyebrow component, snapping size/weight/tracking to its defaults (text-size-xxs / font-medium / tracking-wide). Colours stay as per-site className or style overrides. Eyebrow gains id + style pass-through for the aria-labelledby target in MyBlueDotSidebar and the runtime course/accent colours in HeroSection, Congratulations, and the puzzles page. CertificateCard keeps its explicit sizes (the certificate is a fixed-proportion artifact). Heading-role eyebrows (puzzles h2s, /courses Projects, CourseSchedule sidebar), badges/pills, and AnnouncementBanner are deliberately not converted. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…sites Designer sign-off: 12px only, font-medium, tracking-wide, colours limited to brand blue / navy-60 / charcoal (certificates) / white-70 / dynamic accent. Collapses the navy/40-50 scatter to navy/60, normalises the newsletter label to text-white/70, drops CertificateCard's size and leading exceptions, and snaps the heading-role eyebrows (puzzles pages, /courses Projects, CourseSchedule sidebar) to the same voice inline while keeping their h2 semantics. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
fd5e470 to
0d7e580
Compare
Render
Destroyed
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
@greptile-apps review |
Render
Destroyed
|
@claude review |
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/website/src/components/certificate/CertificateCTA.tsx (1)
42-44: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPass the dynamic accent through
styleinstead of an arbitrary colour utility.
text-[var(--cta-accent)]is an arbitrary colour class. Usestyle={{ color: accentColor }}here now thatEyebrowexplicitly forwardsstyle; the CSS variable can remain for the CTA button and background.As per coding guidelines, website TSX should use named BlueDot colour utilities rather than arbitrary colour classes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/website/src/components/certificate/CertificateCTA.tsx` around lines 42 - 44, Update the Eyebrow rendering in CertificateCTA to remove the arbitrary text-[var(--cta-accent)] utility and pass the dynamic accent through style={{ color: accentColor }} instead. Keep the CSS variable available for the CTA button and background, and preserve the existing Eyebrow styling otherwise.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/website/src/components/certificate/CertificateCTA.tsx`:
- Around line 42-44: Update the Eyebrow rendering in CertificateCTA to remove
the arbitrary text-[var(--cta-accent)] utility and pass the dynamic accent
through style={{ color: accentColor }} instead. Keep the CSS variable available
for the CTA button and background, and preserve the existing Eyebrow styling
otherwise.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 9a79bbd8-3578-46ca-9e43-2511da12fd4b
⛔ Files ignored due to path filters (8)
apps/website/src/__tests__/pages/__snapshots__/account.test.tsx.snapis excluded by!**/*.snapapps/website/src/__tests__/pages/__snapshots__/join-us.test.tsx.snapis excluded by!**/*.snapapps/website/src/components/certificate/__snapshots__/CertificateCTA.test.tsx.snapis excluded by!**/*.snapapps/website/src/components/certificate/__snapshots__/CertificateCard.test.tsx.snapis excluded by!**/*.snapapps/website/src/components/courses/__snapshots__/UnitLayout.test.tsx.snapis excluded by!**/*.snapapps/website/src/components/lander/__snapshots__/AgiStrategyLander.test.tsx.snapis excluded by!**/*.snapapps/website/src/components/lander/components/__snapshots__/HeroSection.test.tsx.snapis excluded by!**/*.snapapps/website/src/components/lander/components/__snapshots__/PersonasSection.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (21)
apps/website/src/components/alumni/RecentAlumniList.tsxapps/website/src/components/certificate/CertificateCTA.tsxapps/website/src/components/certificate/CertificateCard.tsxapps/website/src/components/courses/Congratulations.tsxapps/website/src/components/courses/CourseSchedule.tsxapps/website/src/components/courses/UnitLayout.tsxapps/website/src/components/grants/sections/GrantStatsStrip.tsxapps/website/src/components/homepage/EventsSection.tsxapps/website/src/components/homepage/MergedLadder.tsxapps/website/src/components/homepage/NewsletterBanner.tsxapps/website/src/components/lander/components/HeroSection.tsxapps/website/src/components/lander/components/PersonasSection.tsxapps/website/src/components/my-bluedot/MyBlueDotSidebar.tsxapps/website/src/components/my-courses/CourseListRow.tsxapps/website/src/components/rapid-grants/HowItWorksSection.tsxapps/website/src/pages/courses/index.tsxapps/website/src/pages/facilitator-feedback/[meetPersonId].tsxapps/website/src/pages/puzzles/technical-ai-safety.tsxapps/website/src/pages/puzzles/technical-ai-safety/submitted.tsxlibraries/ui/src/Eyebrow.stories.tsxlibraries/ui/src/Eyebrow.tsx
Matches the other dynamic-accent Eyebrow call sites; the --cta-accent CSS variable remains for the CTA button background. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Render
Destroyed
Render
Destroyed
2 participants
Closes #2795.
What changed
The "uppercase + small + letter-spaced" label recipe was hand-rolled at ~26 call sites with drifting tracking (0.05–0.18em), weight (medium/semibold), and size (12–16px). This PR:
<Eyebrow>from@bluedot/ui, snapped to navy/40 and /50 → /60;text-white opacity-70→text-white/70; rapid-grantstext-bluedot-dark→ default blue.Eyebrowgainsid+stylepass-through:idfor thearia-labelledbytarget inMyBlueDotSidebar;stylefor runtime colours (HeroSectioncategory labels,Congratulationscourse accent, puzzles prize accent) that Tailwind classes can't express (arbitrary-value classes must be build-time literals)./puzzles/technical-ai-safety+/submittedsection h2s,/courses"Projects" h2,CourseSchedulesidebar H2s) keep their h2 semantics — each is its section's only heading, and Eyebrow renders a<p>— but their inline classes are snapped to the same voice, so they're visually identical to the component.MutedandDynamicAccentstories.Deliberately not converted
AnnouncementBanner— non-label uppercase, out of scope per the issue.RoundGroup's inline lead-in label (mid-sentence span; a<p>would break the flow).Screenshots (after)
Puzzles page — section headings + prize labels now one voice:
Rapid grants — step labels and stats on the sanctioned palette:
Earlier round (pre designer-voice commit, layout unchanged): homepage, lander, alumni:
Testing
libraries/uitypecheck failures are pre-existing (Footer/IconButton stories, Login.test — none touch Eyebrow)🤖 Generated with Claude Code