Improve pricing card UX and update pro features list #2019
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit 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 skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds 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
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
apps/mail/components/pricing/comparision.tsx (1)
281-285: Copy nit: “7‑day” needs a hyphen.Micro, but polish matters.
- Start 7 day free trial + Start 7-day free trialapps/mail/components/pricing/pricing-card.tsx (3)
286-293: Rename deprecated shadow utility (Enterprise CTA).Mirror the same change here.
- className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer" + className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow-sm shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer"
246-250: Copy nit: hyphenate “7‑day”.Same polish as comparison table.
- Start 7 day free trial + Start 7-day free trial
216-225: Slash through original monthly price in annual mode
In apps/mail/components/pricing/pricing-card.tsx (lines 216–225), render<span className="text-white/40 line-through">${monthlyPrice}</span>immediately before the discounted${annualPrice}whenisAnnualis true, matching the design brief and Issue #2018.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
apps/mail/components/pricing/comparision.tsx(2 hunks)apps/mail/components/pricing/pricing-card.tsx(3 hunks)apps/mail/components/ui/nav-user.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{css,js,ts,jsx,tsx,mdx}
📄 CodeRabbit inference engine (.cursor/rules/tailwind-css-v4.mdc)
**/*.{css,js,ts,jsx,tsx,mdx}: Chain variants together for composable variants (e.g.,group-has-data-potato:opacity-100).
Use new variants such asstarting,not-*,inert,nth-*,in-*,open(for:popover-open), and**for all descendants.
Do not use deprecated utilities likebg-opacity-*,text-opacity-*,border-opacity-*, anddivide-opacity-*; use the new syntax (e.g.,bg-black/50).
Use renamed utilities:shadow-smis nowshadow-xs,shadowis nowshadow-sm,drop-shadow-smis nowdrop-shadow-xs,drop-shadowis nowdrop-shadow-sm,blur-smis nowblur-xs,bluris nowblur-sm,rounded-smis nowrounded-xs,roundedis nowrounded-sm,outline-noneis nowoutline-hidden.
Usebg-(--brand-color)syntax for CSS variables in arbitrary values instead ofbg-[--brand-color].
Stacked variants now apply left-to-right instead of right-to-left.
Files:
apps/mail/components/ui/nav-user.tsxapps/mail/components/pricing/comparision.tsxapps/mail/components/pricing/pricing-card.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters
Semicolons are required
Files:
apps/mail/components/ui/nav-user.tsxapps/mail/components/pricing/comparision.tsxapps/mail/components/pricing/pricing-card.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/ui/nav-user.tsxapps/mail/components/pricing/comparision.tsxapps/mail/components/pricing/pricing-card.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/ui/nav-user.tsxapps/mail/components/pricing/comparision.tsxapps/mail/components/pricing/pricing-card.tsx
🧠 Learnings (1)
📚 Learning: 2025-05-07T16:55:46.513Z
Learnt from: danteissaias
PR: Mail-0/Zero#902
File: apps/mail/components/connection/add.tsx:77-77
Timestamp: 2025-05-07T16:55:46.513Z
Learning: For the "Upgrade" link in AddConnectionDialog, using a proper <button> element instead of a <span> with onClick is recognized as an accessibility improvement but was deferred as out of scope in PR #902 (CSS variables PR).
Applied to files:
apps/mail/components/pricing/comparision.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🔇 Additional comments (3)
apps/mail/components/ui/nav-user.tsx (1)
650-656: Pointer affordance on “Get verified” — solid.Matches the UX brief; clickable looks clickable. No further changes needed here.
apps/mail/components/pricing/comparision.tsx (1)
164-170: Fix gradient utility: use bg-gradient-to-l (Tailwind).
bg-linear-to-lisn’t a Tailwind class; gradient won’t render. Swap tobg-gradient-to-l.Apply this diff:
- className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" + className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-gradient-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer"⛔ Skipped due to learnings
Learnt from: CR PR: Mail-0/Zero#0 File: .cursor/rules/tailwind-css-v4.mdc:0-0 Timestamp: 2025-08-03T20:42:04.207Z Learning: Applies to **/*.css : Use new gradient utilities like `bg-linear-45`, `bg-conic`, and `bg-radial-[at_25%_25%]` in CSS.Learnt from: CR PR: Mail-0/Zero#0 File: .cursor/rules/tailwind-css-v4.mdc:0-0 Timestamp: 2025-08-03T20:42:04.207Z Learning: Applies to **/*.{css,js,ts,jsx,tsx,mdx} : Do not use deprecated utilities like `bg-opacity-*`, `text-opacity-*`, `border-opacity-*`, and `divide-opacity-*`; use the new syntax (e.g., `bg-black/50`).Learnt from: CR PR: Mail-0/Zero#0 File: .cursor/rules/tailwind-css-v4.mdc:0-0 Timestamp: 2025-08-03T20:42:04.207Z Learning: Applies to **/*.css : Use native CSS `layer` instead of Tailwind's custom implementation.Learnt from: CR PR: Mail-0/Zero#0 File: .cursor/rules/tailwind-css-v4.mdc:0-0 Timestamp: 2025-08-03T20:42:04.207Z Learning: Applies to **/*.{css,js,ts,jsx,tsx,mdx} : Use `bg-(--brand-color)` syntax for CSS variables in arbitrary values instead of `bg-[--brand-color]`.apps/mail/components/pricing/pricing-card.tsx (1)
24-26: PRO features additions — good alignment with issue #2018.The two missing items are now present. Looks right.
| <button | ||
| onClick={handleUpgrade} | ||
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10" | ||
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" | ||
| > | ||
| <div className="flex items-center justify-center"> |
There was a problem hiding this comment.
Same gradient bug on Pro CTA.
Repeat the fix for consistency.
- className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer"
+ className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-gradient-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| onClick={handleUpgrade} | |
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10" | |
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" | |
| > | |
| <div className="flex items-center justify-center"> | |
| <button | |
| onClick={handleUpgrade} | |
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-gradient-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" | |
| > | |
| <div className="flex items-center justify-center"> |
🧰 Tools
🪛 Biome (2.1.2)
[error] 277-280: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🤖 Prompt for AI Agents
In apps/mail/components/pricing/comparision.tsx around lines 277 to 281, the Pro
CTA button uses the incorrect gradient class "bg-linear-to-l"; update the button
to use the same correct Tailwind gradient class as the other CTAs (e.g.,
"bg-gradient-to-l from-white/0 to-white/10") so the visual gradient matches the
fix applied elsewhere, and ensure any related outline/padding classes remain
unchanged for consistent appearance.
| }); | ||
| } | ||
| }} | ||
| className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343]" | ||
| className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer" | ||
| > | ||
| <div className="flex items-center justify-center gap-2.5 px-1"> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Rename deprecated shadow utility per guidelines.
shadow → shadow-sm (old → new). Keeps us future-proof.
- className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer"
+ className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow-sm shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| }); | |
| } | |
| }} | |
| className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343]" | |
| className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer" | |
| > | |
| <div className="flex items-center justify-center gap-2.5 px-1"> | |
| }); | |
| } | |
| }} | |
| className="z-30 mt-auto inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow-sm shadow-black/30 outline outline-1 -outline-offset-1 outline-[#434343] cursor-pointer" | |
| > | |
| <div className="flex items-center justify-center gap-2.5 px-1"> |
🧰 Tools
🪛 Biome (2.1.2)
[error] 162-175: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🤖 Prompt for AI Agents
In apps/mail/components/pricing/pricing-card.tsx around lines 170 to 175, the
className uses the deprecated Tailwind utility "shadow"; replace it with
"shadow-sm" to follow the new guideline and keep the rest of the classes (e.g.,
shadow-black/30) intact. Update the className string so it reads "... shadow-sm
shadow-black/30 outline ..." ensuring spacing and order remain valid.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 3 files
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Ask questions if you need clarification on any suggestion
React with 👍 or 👎 to teach cubic. You can also tag @cubic-dev-ai to give feedback, ask questions, or re-run the review.
| } | ||
| }} | ||
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10" | ||
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" |
There was a problem hiding this comment.
Replace the invalid Tailwind class "bg-linear-to-l" with "bg-gradient-to-l" so the gradient renders correctly on this CTA
Prompt for AI agents
Address the following comment on apps/mail/components/pricing/comparision.tsx at line 167:
<comment>Replace the invalid Tailwind class "bg-linear-to-l" with "bg-gradient-to-l" so the gradient renders correctly on this CTA</comment>
<file context>
@@ -164,7 +164,7 @@ export default function Comparision() {
}
}}
- className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10"
+ className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer"
>
<div className="flex items-center justify-center">
</file context>
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-linear-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" | |
| className="inline-flex h-[40px] items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-gradient-to-l from-white/0 to-white/10 p-[3.5px] outline outline-1 -outline-offset-1 outline-white/10 cursor-pointer" |
|
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 😢 |
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. |
2 participants
Description
Improved the Pricing Card and Comparison components for better user experience:
cursor-pointerto buttons for consistency in the pricing page and Get Verified badge.Fixes #2018
Type of Change
Please delete options that are not relevant.
Areas Affected
Please check all that apply:
Testing Done
Describe the tests you've done:
Checklist
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.
Summary by CodeRabbit