fix: align Pro badge styling with theme

[reneaaron]

Summary

• Replace hardcoded amber gradient with theme-aware colors (bg-primary/15, border-primary/30, text-primary)
• Pro badge now adapts to all themes instead of always showing a bright amber pill

Test plan

• Verify Pro badge is visible and readable in Alby dark theme
• Check badge appearance in other themes (Bitcoin, default)
• Confirm badge still stands out next to the username in the sidebar

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Updated badge appearance to use the app's primary theme colors and foreground token instead of the previous amber gradient and black text; shadow removed. Layout, icon and label remain unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2f96c5c0-be6c-40c7-9321-098178db562c

📥 Commits

Reviewing files that changed from the base of the PR and between 7b9bd69 and 71d5385.

📒 Files selected for processing (1)

• frontend/src/components/ProBadge.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/ProBadge.tsx

---

📝 Walkthrough

Walkthrough

ProBadge styling changed from an amber left-to-right gradient with black text and shadow to theme-based classes: bg-primary and text-primary-foreground, removing the amber gradient, text-black, and shadow-sm; component structure and content remain unchanged.

Changes

Cohort / File(s)	Summary
ProBadge Styling Update frontend/src/components/ProBadge.tsx	Replaced amber gradient (bg-gradient-to-r from-amber-300 to-amber-500), text-black, and shadow-sm with theme classes bg-primary and text-primary-foreground. Component signature, layout, icon, and label unchanged.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A golden badge that loved to gleam,
Now wears the theme — a softened dream,
Primary hues, no shadowed veil,
The Pro hops proud along the trail 🐰✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix: align Pro badge styling with theme' accurately summarizes the main change: updating the Pro badge styling from hardcoded amber gradient to theme-aware colors.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/pro-badge-theme

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/ProBadge.tsx`:
- Line 5: Replace the custom <span> in the ProBadge component with the shared
shadcn/ui Badge primitive: import and use the Badge component (named Badge)
instead of the span and move the theme-aware classes into Badge's className or
map them to the appropriate Badge props (variant/size) so styling and behavior
come from the shared UI primitive; update the ProBadge export to render <Badge
...> with equivalent styling and remove the custom span usage.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 07e9cd9c-c42b-4fea-8d42-121f4f052644

📥 Commits

Reviewing files that changed from the base of the PR and between 17d3885 and 7b9bd69.

📒 Files selected for processing (1)

• frontend/src/components/ProBadge.tsx

[im-adithya]

It looks good but it's not that visible in some themes:

First row is bad, I'm stretching with the second row tbh but all others are even better than second row

[reneaaron]

Updated to use solid bg-primary / text-primary-foreground instead of the low-opacity tint. This ensures the badge is clearly visible across all themes since each theme already defines proper contrast pairs for these colors.