Skip to content

Improve pricing card UX and update pro features list #2019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ashishmohapatra240 wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

Improve pricing card UX and update pro features list #2019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7e094b
fix: improve pricing card UX and update pro features list
ashishmohapatra240 Sep 6, 2025
d8db13a
feat: add monthly price display in strikethrough for annual pricing i…
ashishmohapatra240 Sep 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/mail/components/pricing/comparision.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot Sep 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 &quot;bg-linear-to-l&quot; with &quot;bg-gradient-to-l&quot; so the gradient renders correctly on this CTA</comment>

<file context>
@@ -164,7 +164,7 @@ export default function Comparision() {
                   }
                 }}
-                className=&quot;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&quot;
+                className=&quot;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&quot;
               &gt;
                 &lt;div className=&quot;flex items-center justify-center&quot;&gt;
</file context>
Suggested change
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"
Fix with Cubic

>
<div className="flex items-center justify-center">
<div className="justify-start text-center text-base font-semibold leading-none text-white/80">
Expand Down Expand Up @@ -276,7 +276,7 @@ export default function Comparision() {
</div>
<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">
Comment on lines 277 to 281
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

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.

Suggested change
<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.

<div className="justify-start text-center text-base font-semibold leading-none text-white/80">
Expand Down
11 changes: 9 additions & 2 deletions apps/mail/components/pricing/pricing-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const PRICING_CONSTANTS = {
'Auto labeling',
'One-click AI email writing & replies',
'Instant thread AI-generated summaries',
'Priority customer support',
'Access to private Discord community'
],
ENTERPRISE_FEATURES: [
'Unlimited email connections',
Expand Down Expand Up @@ -168,7 +170,7 @@ export default function PricingCard() {
});
}
}}
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">
Comment on lines 170 to 175
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
});
}
}}
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.

<div className="justify-start text-center font-semibold leading-none text-[#D5D5D5]">
Expand Down Expand Up @@ -216,6 +218,11 @@ export default function PricingCard() {
<div className="justify-center text-4xl font-semibold leading-10 text-white">
${isAnnual ? annualPrice : monthlyPrice}
</div>
{isAnnual && (
<div className="justify-center text-base font-medium leading-tight text-white/40 line-through ml-2">
${monthlyPrice}
</div>
)}
<div className="flex items-center justify-center gap-2.5 pb-0.5">
<div className="justify-center text-sm font-medium leading-tight text-white/40">
{isAnnual ? '/MONTH (billed annually)' : '/MONTH'}
Expand Down Expand Up @@ -286,7 +293,7 @@ export default function PricingCard() {
</div>
</div>
<button
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"
onClick={() => window.open('https://cal.com/team/0/chat', '_blank')}
>
<div className="flex items-center justify-center gap-2.5 px-1">
Expand Down
2 changes: 1 addition & 1 deletion apps/mail/components/ui/nav-user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,7 +649,7 @@ export function NavUser() {
{!isPro && (
<button
onClick={() => setPricingDialog('true')}
className="flex h-5 items-center gap-1 rounded-full border px-1 pr-1.5 hover:bg-transparent"
className="flex h-5 items-center gap-1 rounded-full border px-1 pr-1.5 hover:bg-transparent cursor-pointer"
>
<BadgeCheck className="h-4 w-4 text-white dark:text-[#141414]" fill="#1D9BF0" />
<span className="text-muted-foreground text-[10px] uppercase">Get verified</span>
Expand Down