Improve pricing card UX and update pro features list
Description
Improved the Pricing Card and Comparison components for better user experience:
- Added
cursor-pointerto buttons for consistency in the pricing page and Get Verified badge. - Updated the PRO features list.
Fixes #2018
Type of Change
Please delete options that are not relevant.
- [✅] 🐛 Bug fix (non-breaking change which fixes an issue)
- [✅] 🎨 UI/UX improvement
Areas Affected
Please check all that apply:
- [✅] User Interface/Experience
Testing Done
Describe the tests you've done:
- [✅] Manual testing performed
Checklist
- [✅] I have read the CONTRIBUTING document
- [✅] My code follows the project's style guidelines
- [✅] I have performed a self-review of my code
- [✅] My changes generate no new warnings
Screenshots/Recordings
Before
After (Added content accoring to the content, we get on clicking GET VERIFIED Badge)
Before
After (Did this across different cards in the pricing page and for the Get Verified Badge)
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by cubic
Improved the pricing page UX by making all CTAs clearly clickable and aligning interactions across components. Updated the Pro plan features to include priority support and access to the private Discord community.
- UI/UX
- Added cursor-pointer to pricing/comparison buttons and the NavUser “Get verified” control.
- Extended Pro features: “Priority customer support” and “Access to private Discord community.”
Summary by CodeRabbit
- New Features
- Pro plan now highlights two additional benefits on the pricing page: Priority customer support and Access to a private Discord community.
- Style
- Improved cursor feedback (pointer) on key buttons for clearer interactivity:
- Pricing: Free “Get Started,” Zero Pro “Start 7‑day free trial,” Enterprise “Contact us.”
- Navigation: “Get verified” button.
- No changes to behavior or navigation; visual/UX update only.
- Improved cursor feedback (pointer) on key buttons for clearer interactivity:
[!NOTE]
Other AI code review bot(s) detected
CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.
[!IMPORTANT]
Review skipped
Auto incremental reviews are disabled on this repository.
Please check the settings in the CodeRabbit UI or the
.coderabbit.yamlfile in this repository. To trigger a single review, invoke the@coderabbitai reviewcommand.You can disable this status message by setting the
reviews.review_statustofalsein the CodeRabbit configuration file.
Walkthrough
Adds cursor-pointer to various buttons in pricing and nav components. Updates the Pro tier feature list by adding two items. No logic or API changes.
Changes
| Cohort / File(s) | Summary |
|---|---|
Pointer cursor tweaksapps/mail/components/pricing/comparision.tsx, apps/mail/components/pricing/pricing-card.tsx, apps/mail/components/ui/nav-user.tsx |
Added cursor-pointer to Free/Pro/Enterprise pricing buttons and the “Get verified” button; no logic changes. |
Pro features list updateapps/mail/components/pricing/pricing-card.tsx |
Added two Pro features: “Priority customer support” and “Access to private Discord community.” |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| Add cursor-pointer to non-center pricing buttons [#2018] | ✅ | |
| Add missing two Pro features to list [#2018] | ✅ | |
| Fix GET VERIFIED badge interaction/state consistency [#2018] | ❓ | Only cursor style added; unclear if click behavior/state alignment was required. |
| Add strikethrough price display [#2018] | ❌ | No pricing display change present. |
Possibly related PRs
- Mail-0/Zero#1030 — Also modifies pricing-card and related pricing UI; overlapping surface area and behavior.
- Mail-0/Zero#1265 — Touches apps/mail/components/ui/nav-user.tsx with className/button changes.
- Mail-0/Zero#2009 — Similar presentation-only additions of cursor-pointer across mail components.
Suggested labels
design, content
Suggested reviewers
- MrgSub
- nizzyabi
- ahmetskilinc
Poem
Clicks now glide with pointer might,
Pro gains perks—quite out of sight.
The badge says “verify,” bold and clear,
Prices await their strikethrough gear.
Small tweaks today, starship speed tomorrow—
UI aligned, reducing user sorrow. 🚀
✨ Finishing Touches
🧪 Generate unit tests
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
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 @coderabbitai help to get the list of available commands and usage tips.
Added strikethrough price display
@ashishmohapatra240 just wanted to know is this the standard procedure to create PR even without getting the issue assigned to anyone. I wanted to contribute but wasn't sure about creating a PR directly 😢
@ashishmohapatra240 just wanted to know is this the standard procedure to create PR even without getting the issue assigned to anyone. I wanted to contribute but wasn't sure about creating a PR directly 😢
Hey! Thanks for asking, I went ahead and opened a PR directly since the issue wasn’t assigned. But yes, the usual flow is to get the issue assigned first so that there’s no duplication. For smaller fixes, creating a PR directly is usually fine. You should definitely feel free to contribute!
Hey! Thanks for asking, I went ahead and opened a PR directly since the issue wasn’t assigned. But yes, the usual flow is to get the issue assigned first so that there’s no duplication. For smaller fixes, creating a PR directly is usually fine. You should definitely feel free to contribute!
Thanks, will contribute whatever possible 👍
@ashishmohapatra240 just a suggestion instead of adding cursor-pointer for all buttons can you do this. This will fix all buttons if some others are left.