Add cursor-pointer to CTA buttons and navigation items for better UX#1974
Add cursor-pointer to CTA buttons and navigation items for better UX#1974MrgSub merged 2 commits intoMail-0:stagingfrom
Conversation
…and in navigation items
|
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 WalkthroughThis update adds the Changes
Sequence Diagram(s)No sequence diagram generated, as changes are purely stylistic with no control flow or logic modifications. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
cubic analysis
No issues found across 2 files. Review in cubic
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (2)
apps/mail/components/navigation.tsx (2)
164-170: Same fix: remove anchor-wrapping-button and scope the cursor properlyRepeat the semantic cleanup for Privacy. Don’t show pointer on the non-clickable container; ensure the actual control owns the cursor style.
-<NavigationMenuItem className="bg-transparent text-white cursor-pointer"> - <a href="/privacy"> - <Button variant="ghost" className="ml-1 h-9 bg-transparent"> - Privacy - </Button> - </a> -</NavigationMenuItem> +<NavigationMenuItem className="bg-transparent text-white"> + <Button asChild variant="ghost" className="ml-1 h-9 bg-transparent cursor-pointer"> + <a href="/privacy">Privacy</a> + </Button> +</NavigationMenuItem>
194-211: Nice UX polish; add disabled cursor variant for completenessGet Started button looks good. Add disabled:cursor-not-allowed to align user feedback with state. Tiny change, big clarity.
-<Button - className="h-8 bg-white text-black hover:bg-white hover:text-black cursor-pointer" +<Button + className="h-8 bg-white text-black hover:bg-white hover:text-black cursor-pointer disabled:cursor-not-allowed"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
apps/mail/components/home/footer.tsx(1 hunks)apps/mail/components/navigation.tsx(4 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/home/footer.tsxapps/mail/components/navigation.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/home/footer.tsxapps/mail/components/navigation.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit Inference Engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/home/footer.tsxapps/mail/components/navigation.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/home/footer.tsxapps/mail/components/navigation.tsx
🧠 Learnings (1)
📓 Common learnings
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).
⏰ 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
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
Description
This PR adds the cursor: pointer style to CTA buttons (e.g., "Get Started") and navigation items to improve user experience by providing visual feedback on hover, making interactive elements feel more responsive.
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:
Security Considerations
For changes involving data or authentication:
Checklist
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by cubic
Added cursor-pointer to all CTA buttons and navigation items to give clear visual feedback when hovering over interactive elements.
Summary by CodeRabbit