Zero icon indicating copy to clipboard operation
Zero copied to clipboard

fix(button): remove wrong hover classes to restore default hover behaviour

Open FurquanAnwer opened this issue 4 months ago • 3 comments

Description

This PR removes the buggy hover class to add the default hover behaviour to make it consistent with the other "Get Started" button in the landing page. The cursor pointer class was already there. "hover:bg-white hover:text-black" class was there which makes no sense since the default background color and text color were white and black respectively.

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:

  • [ ] Email Integration (Gmail, IMAP, etc.)
  • [ ] User Interface/Experience
  • [ ] Authentication/Authorization
  • [ ] Data Storage/Management
  • [ ] API Endpoints
  • [ ] Documentation
  • [ ] Testing Infrastructure
  • [ ] Development Workflow
  • [ ] Deployment/Infrastructure

Testing Done

Describe the tests you've done:

  • [ ] Unit tests added/updated
  • [ ] Integration tests added/updated
  • [ ] Manual testing performed
  • [ ] Cross-browser testing (if UI changes)
  • [ ] Mobile responsiveness verified (if UI changes)

Security Considerations

For changes involving data or authentication:

  • [ ] No sensitive data is exposed
  • [ ] Authentication checks are in place
  • [ ] Input validation is implemented
  • [ ] Rate limiting is considered (if applicable)

Checklist

  • [ ] I have read the CONTRIBUTING document
  • [ ] My code follows the project's style guidelines
  • [ ] I have performed a self-review of my code
  • [ ] I have commented my code, particularly in complex areas
  • [ ] I have updated the documentation
  • [ ] My changes generate no new warnings
  • [ ] I have added tests that prove my fix/feature works
  • [ ] All tests pass locally
  • [ ] Any dependent changes are merged and published

Screenshots/Recordings

https://github.com/user-attachments/assets/89705957-5844-4a86-b33a-62defc90f85f


Summary by cubic

Removed incorrect hover classes from the “Get Started” button to restore default hover behavior and match the landing page button. Keeps the pointer cursor and removes redundant bg/text overrides.

Summary by CodeRabbit

  • Style
    • Refined “Get Started” button styling in the navigation by removing hover color changes, keeping a consistent white background and black text.
    • No functional changes: clicking still opens Inbox for signed-in users or starts the sign-in flow if not.
    • Improves visual consistency and reduces distracting hover flicker.

FurquanAnwer avatar Sep 25 '25 09:09 FurquanAnwer

Walkthrough

Adjusted the Get Started button styling in apps/mail/components/navigation.tsx by removing hover color classes from its className. No logic or control-flow changes; click behavior remains unchanged.

Changes

Cohort / File(s) Summary
Navigation UI tweak
apps/mail/components/navigation.tsx
Removed hover-related classes from the Get Started button (hover:bg-white hover:text-black), retaining h-8 bg-white text-black cursor-pointer. No changes to click handling or sign-in/inbox routing.

Sequence Diagram(s)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

  • Mail-0/Zero#1974 — Also modifies the Navigation Get Started button classes, focusing on cursor styling.
  • Mail-0/Zero#1516 — Alters or removes the same button and relocates its logic within navigation.
  • Mail-0/Zero#1488 — Changes label, click behavior, and styling of the same Get Started/Sign in button.

Suggested labels

design

Suggested reviewers

  • MrgSub
  • nizzyabi

Poem

Tiny tweak, no drama, no fright,
Hover fades into the night.
Button stays sharp, clicks still ignite—
Inbox warp speed, engines light.
Minimal change, maximum right. 🚀

Pre-merge checks and finishing touches

❌ 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%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed Like a rocket, the title captures the essence of this UI tweak by specifying the removal of faulty hover classes to reestablish default hover behaviour on the button, directly reflecting the core change in the PR.
✨ Finishing touches
  • [ ] 📝 Generate Docstrings
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 64c5480c341750578da0746f2db9ad84da686334 and 43c527318fa22b586070d19819a78b6bfd4d6057.

📒 Files selected for processing (1)
  • apps/mail/components/navigation.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 as starting, not-*, inert, nth-*, in-*, open (for :popover-open), and ** for all descendants. Do not use deprecated utilities like bg-opacity-*, text-opacity-*, border-opacity-*, and divide-opacity-*; use the new syntax (e.g., bg-black/50). Use renamed utilities: shadow-sm is now shadow-xs, shadow is now shadow-sm, drop-shadow-sm is now drop-shadow-xs, drop-shadow is now drop-shadow-sm, blur-sm is now blur-xs, blur is now blur-sm, rounded-sm is now rounded-xs, rounded is now rounded-sm, outline-none is now outline-hidden. Use bg-(--brand-color) syntax for CSS variables in arbitrary values instead of bg-[--brand-color]. Stacked variants now apply left-to-right instead of right-to-left.

Files:

  • apps/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/navigation.tsx
**/*.{js,jsx,ts,tsx,css}

📄 CodeRabbit inference engine (AGENT.md)

Use Prettier with sort-imports and Tailwind plugins

Files:

  • apps/mail/components/navigation.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENT.md)

Enable TypeScript strict mode

Files:

  • apps/mail/components/navigation.tsx
🔇 Additional comments (1)
apps/mail/components/navigation.tsx (1)

192-200: Consistent hover behavior secured

Line 192: Removing those redundant hover classes lets the base Button styling breathe and keeps this CTA aligned with its twin. Elegant simplification—exactly how we ship faster.


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

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

coderabbitai[bot] avatar Sep 25 '25 09:09 coderabbitai[bot]

closes #2033

FurquanAnwer avatar Sep 25 '25 09:09 FurquanAnwer

closes #2033

@FurquanAnwer I don't see any appropriate changes closing the issue, you might wanna add isPending state to the get started button and set it to disabled while the login form is still being loaded..

nhdfr avatar Sep 26 '25 06:09 nhdfr