Improve button UX with consistent hover states and pointer cursor#2005
Improve button UX with consistent hover states and pointer cursor#2005ahmetskilinc merged 4 commits intoMail-0:stagingfrom
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 hover, dark-mode hover, transition-colors, and pointer-cursor styles across compose, mail display, and shared UI primitives; removes some cursor-default usages. No control-flow, logic, or API changes. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 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/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 18
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (17)
apps/mail/components/create/schedule-send-picker.tsx (1)
21-26: Fix UTC/local time serialization in ScheduleSendPickerWe just confirmed that ScheduleSendPicker is calling
toISOString(), which converts your local‐chosen date into UTC before slicing or emitting – that will display the wrong local time in the picker and schedule at the wrong instant server‐side.Files to update:
apps/mail/components/create/schedule-send-picker.tsx
- Line 18:
return local.toISOString().slice(0, 16);- Line 74:
onChange(maybeDate.toISOString());What to do:
- Replace both
toISOString()calls with a formatter that preserves the local datetime for<input type="datetime-local">. For example, build a “YYYY-MM-DDThh:mm” string from the Date’s local fields:// before- return local.toISOString().slice(0, 16);
- // build a local-only ISO string (no offset) for datetime-local
- const pad = (n: number) => String(n).padStart(2, "0");
- return [
- local.getFullYear(),
- pad(local.getMonth() + 1),
- pad(local.getDate()),
- ].join("-")
- "T"
- [pad(local.getHours()), pad(local.getMinutes())].join(":");
// before
- onChange(maybeDate.toISOString());
- // emit the same local-only string so the backend parses it as local time
- onChange(formatLocalDatetime(maybeDate));
- Ensure the server’s `Date.parse(scheduleAt)` now interprets the string in the user’s local timezone as intended. Let’s ship this – we can’t warp-drive time yet. </blockquote></details> <details> <summary>apps/mail/components/mail/mail-display.tsx (2)</summary><blockquote> `1347-1360`: **Add button type + aria-label + focus-visible ring on the Details trigger** Nice hover/transition additions. For accessibility and safety: - type="button" - aria-label for icon/text mix that reads as an action - focus-visible ring for keyboard parity ```diff - <button - className="hover:bg-iconLight/10 dark:hover:bg-iconDark/20 flex items-center gap-2 rounded-md p-2 cursor-pointer" + <button + type="button" + aria-label="Show email details" + className="hover:bg-iconLight/10 dark:hover:bg-iconDark/20 flex items-center gap-2 rounded-md p-2 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background"
1489-1496: Icon-only menu trigger: add type + aria-labelRemoving ambiguity increases usability. Also retains your new hover/transition styles.
- <button + <button + type="button" + aria-label="More actions" onClick={(e) => { e.stopPropagation(); e.preventDefault(); }} className="inline-flex h-7 w-7 items-center justify-center gap-1 overflow-hidden rounded-md bg-white hover:bg-gray-100 focus:outline-none focus:ring-0 dark:bg-[#313131] dark:hover:bg-[#3d3d3d] cursor-pointer transition-colors" >apps/mail/components/ui/button.tsx (1)
63-71: Set default type="button" on Button to eliminate footguns across the appThis prevents accidental submits when Button is used inside forms without an explicit type. Safe for asChild since props pass through.
Outside the changed hunk, update the render to set a sane default:
<Comp className={cn(buttonVariants({ variant, size }), className)} + // Default to non-submitting buttons unless explicitly overridden. + type={asChild ? (props as any)?.type : ((props as React.ButtonHTMLAttributes<HTMLButtonElement>)?.type ?? 'button')} disabled={isLoading || props.disabled} aria-busy={isLoading} aria-disabled={props.disabled} ref={ref} {...props} >Optionally, we can codify this via a lint rule repo-wide, but the above change is the rocket-boost.
apps/mail/components/create/create-email.tsx (2)
212-218: Fix a11y/lint: add type="button" to the close buttonBiome flagged this. Prevents accidental submits if this ever sits inside a form. Add focus-visible ring for parity while you’re here.
- <DialogClose asChild className="flex"> - <button className="dark:bg-panelDark flex items-center gap-1 rounded-lg bg-[#F0F0F0] px-2 py-1 hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer"> + <DialogClose asChild className="flex"> + <button + type="button" + aria-label="Close compose" + className="dark:bg-panelDark flex items-center gap-1 rounded-lg bg-[#F0F0F0] px-2 py-1 hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background" + >
1-300: Add explicittypeto all<button>tags
Defaulting to a submit button can trigger unintended form submissions. I found ~30 files underapps/with<button>elements missing an explicittype:
- apps/mail/components/magicui/file-tree.tsx
- apps/mail/components/theme/theme-toggle.tsx
- apps/mail/components/ui/app-sidebar.tsx
- apps/mail/components/ui/sidebar.tsx
- apps/mail/components/ui/recipient-autosuggest.tsx
- apps/mail/components/ui/pricing-dialog.tsx
- apps/mail/components/ui/nav-user.tsx
- apps/mail/components/pricing/pricing-card.tsx
- apps/mail/components/pricing/comparision.tsx
- apps/mail/components/labels/label-dialog.tsx
- apps/mail/components/mail/render-labels.tsx
- apps/mail/components/mail/mail-content.tsx
- apps/mail/components/mail/thread-display.tsx
- apps/mail/components/mail/mail-list.tsx
- apps/mail/components/mail/mail-display.tsx
- apps/mail/components/create/schedule-send-picker.tsx
- apps/mail/components/create/create-email.tsx
- apps/mail/components/create/template-button.tsx
- apps/mail/components/create/email-composer.tsx
- apps/mail/components/create/editor-buttons.tsx
- apps/mail/components/create/ai-chat.tsx
- apps/mail/components/context/command-palette-context.tsx
- apps/mail/app/(full-width)/terms.tsx
- apps/mail/app/(full-width)/privacy.tsx
- apps/mail/app/(routes)/settings/privacy/page.tsx
- apps/mail/app/(routes)/settings/categories/page.tsx
- apps/mail/app/(auth)/login/login-client.tsx
Action items:
- For non‐submit actions, add
type="button".- For actual form submits, add
type="submit".Let’s ship this fix and avoid surprises.
apps/mail/components/mail/thread-display.tsx (7)
735-747: Add type="button" to empty-state buttons (prevents accidental form submits).Default type is submit—surprising behavior if these ever sit in a form. Let’s be explicit.
- <button + <button type="button" onClick={toggleAISidebar} className="inline-flex h-7 items-center justify-center gap-0.5 overflow-hidden rounded-lg border bg-white px-2 dark:border-none dark:bg-[#313131] hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer" > ... - <button + <button type="button" onClick={() => setIsComposeOpen('true')} className="inline-flex h-7 items-center justify-center gap-0.5 overflow-hidden rounded-lg border bg-white px-2 dark:border-none dark:bg-[#313131] hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer" >
805-813: Reply All button: add type="button".Small change, big win in predictability.
- <button + <button type="button" onClick={(e) => { e.stopPropagation(); setMode('replyAll'); setActiveReplyId(emailData?.latest?.id ?? ''); }} className="inline-flex h-7 items-center justify-center gap-1 overflow-hidden rounded-lg border bg-white px-1.5 dark:border-none dark:bg-[#313131] hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer" >
820-830: Star toggle: add type + ARIA for assistive tech.Expose state via aria-pressed and label the control. Feels more “rocket grade”.
- <button - onClick={handleToggleStar} - className="inline-flex h-7 w-7 items-center justify-center gap-1 overflow-hidden rounded-lg bg-white dark:bg-[#313131] hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer" - > + <button + type="button" + onClick={handleToggleStar} + aria-pressed={isStarred} + aria-label={isStarred ? 'Unstar thread' : 'Star thread'} + className="inline-flex h-7 w-7 items-center justify-center gap-1 overflow-hidden rounded-lg bg-white dark:bg-[#313131] hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer" + >
844-849: Archive icon button: add type and ARIA label.Make intent explicit; avoids accidental submits; improves SR experience.
- <button - onClick={() => moveThreadTo('archive')} + <button + type="button" + aria-label="Archive thread" + onClick={() => moveThreadTo('archive')} className="inline-flex h-7 w-7 items-center justify-center gap-1 overflow-hidden rounded-lg bg-white dark:bg-[#313131] hover:bg-gray-100 dark:hover:bg-[#404040] transition-colors cursor-pointer" >
861-866: Move to Bin: add type and ARIA label.Same rationale as Archive. Let’s make it bulletproof.
- <button - onClick={() => moveThreadTo('bin')} + <button + type="button" + aria-label="Move thread to Bin" + onClick={() => moveThreadTo('bin')} className="inline-flex h-7 w-7 items-center justify-center gap-1 overflow-hidden rounded-lg border border-[#FCCDD5] bg-[#FDE4E9] hover:bg-[#fccdd5]/70 dark:border-[#6E2532] dark:bg-[#411D23] dark:hover:bg-[#6E2532]/70 cursor-pointer transition-colors" >
733-877: Optional: centralize repeated icon-button styles.These inline-flex 7x7 icon buttons appear multiple times. Extract a shared class (e.g., iconButtonClasses) to keep things consistent and reduce drift. Less code, fewer bugs—first principles.
If desired, I can factor this into a small utility and update all call sites in this file.
799-806: Add explicittype="button"to all<button>s & update Tailwind v4 outline-none usagesWe ran a repo-wide scan and discovered dozens of
<button>elements missing an explicittype, which defaults tosubmitand risks unintended form submissions. We also found legacyoutline-none/focus:outline-noneclasses that should be replaced per Tailwind v4.• In thread-display.tsx (and other components), add
type="button"to every raw<button>
– apps/mail/components/mail/thread-display.tsx: lines 733, 744, 779, 799, 818, 843, 860, 876
– apps/mail/components/mail/mail-display.tsx: lines 292, 353, 1347, 1488, 1662, 1674
– apps/mail/components/ui/app-sidebar.tsx, pricing-card.tsx, comparision.tsx, recipient-autosuggest.tsx, file-tree.tsx, editor-buttons.tsx, create-email-composer.tsx, nav-user.tsx, and many more as surfaced by the scan• Replace all Tailwind’s
outline-none,focus:outline-none,focus-visible:outline-nonewith the v4 equivalent (e.g.outline-hidden,focus:outline-hidden)
– apps/mail/hooks/use-compose-editor.ts:273
– apps/mail/app/(routes)/settings/general/page.tsx: 92
– apps/mail/components/create/ai-textarea.tsx:13
– plus any other locations surfaced by the second scanLet’s refactor these now to prevent “rogue submits” and maintain focus-ring accessibility under Tailwind v4.
apps/mail/components/create/email-composer.tsx (4)
654-657: Close button: same treatment—type and rounded-sm.Predictable behavior + v4 naming.
- <button - tabIndex={-1} - className="flex h-full items-center gap-2 text-sm font-medium text-[#8C8C8C] hover:text-[#A8A8A8] hover:bg-gray-50 dark:hover:bg-[#404040] transition-colors cursor-pointer rounded px-1 py-0.5" + <button + type="button" + className="flex h-full items-center gap-2 text-sm font-medium text-[#8C8C8C] hover:text-[#A8A8A8] hover:bg-gray-50 dark:hover:bg-[#404040] transition-colors cursor-pointer rounded-sm px-1 py-0.5" onClick={handleClose} >
706-719: Generate Subject: add type and Tailwind v4 rounded-sm.Small ergonomics upgrade; avoids any accidental form submit scenario.
- <button + <button + type="button" onClick={handleGenerateSubject} disabled={isLoading || isGeneratingSubject || messageLength < 1} - className="hover:bg-gray-50 dark:hover:bg-[#404040] transition-colors cursor-pointer rounded p-1" + className="hover:bg-gray-50 dark:hover:bg-[#404040] transition-colors cursor-pointer rounded-sm p-1" >
823-829: Attachments popover trigger: add type and outline-hidden (v4).Biome would flag this sooner or later. Let’s get ahead of it.
- <button - className="focus-visible:ring-ring flex items-center gap-1.5 rounded-md border border-[#E7E7E7] bg-white/5 px-2 py-1 text-sm hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:border-[#2B2B2B] cursor-pointer" + <button + type="button" + className="focus-visible:ring-ring flex items-center gap-1.5 rounded-md border border-[#E7E7E7] bg-white/5 px-2 py-1 text-sm hover:bg-white/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 dark:border-[#2B2B2B] cursor-pointer" aria-label={`View ${attachments.length} attached ${pluralize('file', attachments.length)}`} >
1143-1150: ContentPreview actions: add type="button".Prevent accidental form submits and match the rest of this PR’s hardening.
- <button + <button type="button" className="flex h-7 items-center gap-0.5 overflow-hidden rounded-md border bg-red-700 px-1.5 text-sm shadow-sm hover:bg-red-800 dark:border-none cursor-pointer transition-colors" onClick={async () => { if (onReject) { await onReject(); } }} > ... - <button + <button type="button" className="flex h-7 items-center gap-0.5 overflow-hidden rounded-md border bg-green-700 px-1.5 text-sm shadow-sm hover:bg-green-800 dark:border-none cursor-pointer transition-colors" onClick={async () => { if (onAccept) { await onAccept(content); } }} >Also applies to: 1156-1163
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (13)
apps/mail/components/create/create-email.tsx(1 hunks)apps/mail/components/create/email-composer.tsx(12 hunks)apps/mail/components/create/schedule-send-picker.tsx(1 hunks)apps/mail/components/create/template-button.tsx(1 hunks)apps/mail/components/mail/mail-display.tsx(3 hunks)apps/mail/components/mail/mail.tsx(1 hunks)apps/mail/components/mail/thread-display.tsx(7 hunks)apps/mail/components/ui/app-sidebar.tsx(1 hunks)apps/mail/components/ui/button.tsx(1 hunks)apps/mail/components/ui/command.tsx(1 hunks)apps/mail/components/ui/context-menu.tsx(4 hunks)apps/mail/components/ui/dropdown-menu.tsx(4 hunks)apps/mail/components/ui/select.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/ui/dropdown-menu.tsxapps/mail/components/mail/mail.tsxapps/mail/components/create/template-button.tsxapps/mail/components/ui/command.tsxapps/mail/components/ui/button.tsxapps/mail/components/ui/context-menu.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/mail-display.tsxapps/mail/components/ui/select.tsxapps/mail/components/create/schedule-send-picker.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/create/email-composer.tsxapps/mail/components/create/create-email.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/dropdown-menu.tsxapps/mail/components/mail/mail.tsxapps/mail/components/create/template-button.tsxapps/mail/components/ui/command.tsxapps/mail/components/ui/button.tsxapps/mail/components/ui/context-menu.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/mail-display.tsxapps/mail/components/ui/select.tsxapps/mail/components/create/schedule-send-picker.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/create/email-composer.tsxapps/mail/components/create/create-email.tsx
**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENT.md)
Use Prettier with sort-imports and Tailwind plugins
Files:
apps/mail/components/ui/dropdown-menu.tsxapps/mail/components/mail/mail.tsxapps/mail/components/create/template-button.tsxapps/mail/components/ui/command.tsxapps/mail/components/ui/button.tsxapps/mail/components/ui/context-menu.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/mail-display.tsxapps/mail/components/ui/select.tsxapps/mail/components/create/schedule-send-picker.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/create/email-composer.tsxapps/mail/components/create/create-email.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENT.md)
Enable TypeScript strict mode
Files:
apps/mail/components/ui/dropdown-menu.tsxapps/mail/components/mail/mail.tsxapps/mail/components/create/template-button.tsxapps/mail/components/ui/command.tsxapps/mail/components/ui/button.tsxapps/mail/components/ui/context-menu.tsxapps/mail/components/ui/app-sidebar.tsxapps/mail/components/mail/mail-display.tsxapps/mail/components/ui/select.tsxapps/mail/components/create/schedule-send-picker.tsxapps/mail/components/mail/thread-display.tsxapps/mail/components/create/email-composer.tsxapps/mail/components/create/create-email.tsx
🧠 Learnings (3)
📓 Common 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 default styles: border color is `currentColor`, ring width is 1px, placeholder text uses current color at 50% opacity, and hover styles only apply on devices that support hover.
📚 Learning: 2025-08-03T20:42:04.207Z
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 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`.
Applied to files:
apps/mail/components/ui/context-menu.tsx
📚 Learning: 2025-06-28T03:56:09.376Z
Learnt from: retrogtx
PR: Mail-0/Zero#1468
File: apps/server/src/trpc/routes/mail.ts:331-331
Timestamp: 2025-06-28T03:56:09.376Z
Learning: In apps/server/src/trpc/routes/mail.ts, the user indicated they are not using ISO format for the scheduleAt parameter, despite the frontend code showing toISOString() usage in the ScheduleSendPicker component.
Applied to files:
apps/mail/components/create/schedule-send-picker.tsx
🧬 Code graph analysis (1)
apps/mail/components/ui/select.tsx (1)
apps/mail/lib/utils.ts (1)
cn(56-56)
🪛 Biome (2.1.2)
apps/mail/components/ui/app-sidebar.tsx
[error] 203-203: 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)
apps/mail/components/mail/thread-display.tsx
[error] 876-876: 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)
apps/mail/components/create/email-composer.tsx
[error] 643-647: 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)
[error] 1143-1150: 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)
[error] 1156-1163: 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)
apps/mail/components/create/create-email.tsx
[error] 212-212: 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)
⏰ 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 (7)
apps/mail/components/ui/button.tsx (1)
21-21: Removal of cursor-default on dropdownItem aligns with base cursor-pointerBase variant already enforces cursor-pointer; removing cursor-default avoids contradictory signals. Looks good.
apps/mail/components/mail/mail.tsx (2)
488-490: Hover color on refresh button is a nice touchKeeps the surface calm until intent. No functional risk.
490-491: Dropping cursor on the icon is correctPointer state should be owned by the interactive container (Button), not the child icon. Cleaner semantics.
apps/mail/components/ui/select.tsx (2)
36-38: Good call: scroll-up button now signals interactivity.cursor-pointer aligns with user expectations here. Ship it.
50-52: LGTM on scroll-down button pointer.Consistent with the UX pass; nothing else to change.
apps/mail/components/create/email-composer.tsx (2)
980-989: AI Generate button: looks good.Pointer and border align with the PR goals; state handling is solid.
1017-1022: Dialog footer Buttons: UX polish is aligned.Cursor-pointer addition is fine; no action needed.
Also applies to: 1051-1053
|
hey @suraj719 could you please check the coderabbit comments please, some are important for tailwind v4 |
Hi @ahmetskilinc I’ve applied the Tailwind v4 related fixes. Please have a look 🙌 |
2 participants
Description
This PR unifies button interactions across the UI by adding consistent
cursor-pointerand hover feedback styles.Previously, some buttons had no hover state or inconsistent cursor behavior, which made them feel non-interactive.
Now, all interactive buttons provide clear visual feedback in both light and dark themes.
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
Screenshots/Recordings
Before:
cursor: defaulton certain interactive buttonsbtns-before.mp4
After:
cursor-pointeron all interactive buttonstransition-colorsfeedbackbtns-after.mp4
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by cubic
Standardized button and menu item interactions by adding consistent hover states and pointer cursors across the app. Improves affordance and consistency in both light and dark themes.
Summary by CodeRabbit