Add opacity to icons and fix separator colors in mail context menu#1296
Add opacity to icons and fix separator colors in mail context menu#1296MrgSub merged 2 commits intoMail-0:stagingfrom
Conversation
WalkthroughThis update applies consistent visual styling to UI elements in the mail application's thread context menu and filter bar. Icon components within the context menu now have a uniform opacity, separators have updated colors for light and dark themes, and the filter "Clear" button is vertically centered. No logic or control flow is changed. Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/mail/components/context/thread-context.tsx (1)
456-460: Ensure consistent className formattingThere’s a trailing space in
className="dark:bg-panelDark w-56 overflow-y-auto bg-white "and mixed quote usage in theExclamationCircleicon (className='…'). Consider removing the extra space and unifying on double quotes for className values.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/mail/components/context/thread-context.tsx(8 hunks)apps/mail/components/mail/mail.tsx(1 hunks)
🔇 Additional comments (5)
apps/mail/components/context/thread-context.tsx (4)
256-274: Standardize icon opacity in primary actionsThe
opacity-60class is correctly applied to Reply, ReplyAll, and Forward icons for a consistent muted look.
299-334: Apply consistent icon styling in conditional actionsAll branch-specific actions (spam, bin, archive, sent, default) now uniformly include
opacity-60. This ensures visual coherence across context menu items.
400-424: Uniform icon styling in other actionsRead/unread, important, and favorite icons all leverage
opacity-60, aligning with the rest of the menu.
448-454: Consistent separator themingSeparators now use
bg-[#E7E7E7]in light mode and preserve the dark mode color. This matches the design spec for light/dark themes.Also applies to: 466-466, 470-470
apps/mail/components/mail/mail.tsx (1)
559-563: Vertically center the clear buttonThe
my-autoutility correctly centers the "Clear" button within its flex container, improving alignment consistency with sibling elements.
MrgSub
changed the title
2 participants
Description
Improved the visual appearance of the thread context menu by adding opacity to icons for a more subtle look. Updated the separator colors in the context menu to use a lighter color (#E7E7E7) in light mode while keeping the dark mode color (#252525) consistent. Also fixed the vertical alignment of the search bar clear button by adding the
my-autoclass.Type of Change
Areas Affected
Testing Done
Checklist
Screenshots/Recordings
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit