feat(MaintainerCard): apply badge style to contributor and consultant roles#803
Conversation
✅ Deploy Preview for tanstack ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughUpdated the default Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/MaintainerCard.tsx (1)
45-49: LGTM! Badge styling applied consistently.The change successfully applies a pill-shaped badge style to Contributor and Consultant roles, matching the visual pattern of Creator and Maintainer badges while using a distinct gray color scheme. The removal of the dark mode text variant is appropriate since the other role badges also use fixed background colors that work in both themes.
Optional: Verify color contrast for accessibility.
While
bg-gray-500(#6B7280) withtext-whiteshould provide adequate contrast (approximately 5.7:1), you may want to verify it meets WCAG AA standards for small text.🎨 Optional: Verify WCAG contrast
Run the following script to check the color contrast ratio:
#!/bin/bash # Description: Calculate WCAG contrast ratio for gray-500 background with white text python3 << 'EOF' def relative_luminance(rgb): """Calculate relative luminance for RGB color""" rgb_norm = [c / 255.0 for c in rgb] rgb_linear = [ c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4 for c in rgb_norm ] return 0.2126 * rgb_linear[0] + 0.7152 * rgb_linear[1] + 0.0722 * rgb_linear[2] def contrast_ratio(rgb1, rgb2): """Calculate WCAG contrast ratio between two RGB colors""" l1 = relative_luminance(rgb1) l2 = relative_luminance(rgb2) lighter = max(l1, l2) darker = min(l1, l2) return (lighter + 0.05) / (darker + 0.05) # Tailwind gray-500: `#6B7280`, white: `#FFFFFF` gray_500 = (107, 114, 128) white = (255, 255, 255) ratio = contrast_ratio(gray_500, white) print(f"Contrast ratio: {ratio:.2f}:1") print(f"WCAG AA (normal text ≥4.5:1): {'✓ Pass' if ratio >= 4.5 else '✗ Fail'}") print(f"WCAG AA (large text ≥3:1): {'✓ Pass' if ratio >= 3.0 else '✗ Fail'}") print(f"WCAG AAA (normal text ≥7:1): {'✓ Pass' if ratio >= 7.0 else '✗ Fail'}") EOFExpected result: The contrast ratio should be ≥4.5:1 for WCAG AA compliance.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/MaintainerCard.tsx` around lines 45 - 49, The badge styling in MaintainerCard (the span rendering {role} with className on the <span> in the MaintainerCard component) is fine, but verify the bg-gray-500/text-white contrast for small text meets WCAG AA (≥4.5:1) by running the provided contrast check; if it falls short, update the className used in MaintainerCard (and any other role badges using bg-gray-500) to a darker gray utility (e.g., bg-gray-600 or bg-gray-700) so the contrast ratio reaches ≥4.5:1, keeping the pill shape and text-white intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/MaintainerCard.tsx`:
- Around line 45-49: The badge styling in MaintainerCard (the span rendering
{role} with className on the <span> in the MaintainerCard component) is fine,
but verify the bg-gray-500/text-white contrast for small text meets WCAG AA
(≥4.5:1) by running the provided contrast check; if it falls short, update the
className used in MaintainerCard (and any other role badges using bg-gray-500)
to a darker gray utility (e.g., bg-gray-600 or bg-gray-700) so the contrast
ratio reaches ≥4.5:1, keeping the pill shape and text-white intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ab7ee7b0-3e09-45dd-9f56-9b8fcb30bdad
📒 Files selected for processing (1)
src/components/MaintainerCard.tsx
2 participants
Summary
bg-gray-500 text-white) to Contributor and Consultant role labels inRoleBadgecomponentbg-blue-500 text-white) with a gray color schemeTest plan
Summary by CodeRabbit