Skip to content

fix: invite dialog colors #732#733

Merged
ahmetskilinc merged 3 commits intoMail-0:mainfrom
ayushk-1801:fix/invite-dialog-colors
Apr 20, 2025
Merged

fix: invite dialog colors #732#733
ahmetskilinc merged 3 commits intoMail-0:mainfrom
ayushk-1801:fix/invite-dialog-colors

Conversation

@ayushk-1801
Copy link
Copy Markdown
Contributor

@ayushk-1801 ayushk-1801 commented Apr 20, 2025 •
edited by coderabbitai bot
Loading

Description

Please provide a clear description of your changes.

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

Additional Notes

Add any other context about the pull request here.

Screenshots/Recordings

Add screenshots or recordings here if applicable.
Earlier:
image

Now:
image

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.

Summary by CodeRabbit

Summary by CodeRabbit

  • Style
    • Improved icon and input placeholder appearance in the Golden Ticket Modal for better visibility and theme consistency across light and dark modes.
    • Updated multiple icons and logos throughout the app to display distinct images for light and dark themes, enhancing visual clarity without relying on CSS filters.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 20, 2025

@ayushk-1801 is attempting to deploy a commit to the Zero Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 20, 2025 •
edited
Loading

Walkthrough

The changes enhance theme-based visual rendering across multiple UI components in the mail application by replacing single images using CSS color inversion with pairs of images explicitly toggled by dark and light modes. This pattern is applied consistently in the GoldenTicketModal, login client, home hero, and navbar components. Additionally, input placeholder opacity is adjusted dynamically based on the theme. No logic, control flow, or exported/public entity declarations are altered.

Changes

File(s) Change Summary
apps/mail/components/golden.tsx Replaced single icon image with two theme-specific images; updated input placeholder opacity to vary by theme.
apps/mail/app/(auth)/login/login-client.tsx Replaced single provider and logo images using CSS invert with pairs of images toggled by dark/light mode visibility.
apps/mail/components/home/hero.tsx Replaced single icon image with two images explicitly shown in dark or light mode instead of CSS inversion.
apps/mail/components/home/navbar.tsx Replaced single images using CSS invert with pairs of images toggled by dark/light mode for logo and navigation header; adjusted sizing classes.

Suggested reviewers

  • ahmetskilinc

Poem

🐇✨
Two images dance in dark and light,
Swapping hues to charm the sight.
Placeholders glow with gentle grace,
Each theme now finds its perfect place.
Icons twinkle, styles align,
A seamless shift, by design!
🌙☀️

Tip

⚡💬 Agentic Chat (Pro Plan, General Availability)
  • We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.
📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3974b24 and bf332da.

📒 Files selected for processing (4)
  • apps/mail/app/(auth)/login/login-client.tsx (2 hunks)
  • apps/mail/components/golden.tsx (2 hunks)
  • apps/mail/components/home/hero.tsx (1 hunks)
  • apps/mail/components/home/navbar.tsx (2 hunks)
✅ Files skipped from review due to trivial changes (2)
  • apps/mail/components/golden.tsx
  • apps/mail/app/(auth)/login/login-client.tsx
🔇 Additional comments (3)
apps/mail/components/home/hero.tsx (1)

120-132: Improved theme handling by using separate images instead of CSS inversion

This change enhances the theme-based icon rendering by replacing a single image with CSS inversion with two distinct images that toggle visibility based on the theme. Using separate images for dark and light modes provides better visual results than CSS filters.

apps/mail/components/home/navbar.tsx (2)

72-84: Improved theme handling for the logo with explicit images

Using separate images with theme-specific visibility classes is a better approach than relying on CSS inversion filters. This ensures proper visual rendering in both light and dark themes.

103-116: Improved theme handling and modernized CSS in mobile navigation

Good improvements:

  1. Replaced CSS inversion with explicit theme-specific images
  2. Updated from h-6 w-6 to the more modern size-6 utility class for sizing
✨ Finishing Touches
  • 📝 Generate Docstrings

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot]
coderabbitai bot reviewed Apr 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
apps/mail/components/golden.tsx (1)

100-100: Logo color inversion only in light mode
The invert dark:invert-0 classes correctly invert the white SVG icon in light mode and reset it in dark mode, matching the intended design across themes. Consider improving accessibility by specifying the alt text more descriptively (e.g., alt="Zero logo") or marking this image as decorative (alt="") if it’s purely decorative.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e265e1d and 3974b24.

📒 Files selected for processing (1)
  • apps/mail/components/golden.tsx (2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/mail/components/golden.tsx (1)
apps/mail/components/ui/input.tsx (1)
  • Input (31-31)
🔇 Additional comments (1)
apps/mail/components/golden.tsx (1)

118-118: Dynamic placeholder opacity per theme
Switching from a static low-opacity placeholder to placeholder:opacity-60 dark:placeholder:opacity-20 ensures better readability in light mode while maintaining subtlety in dark mode. Please verify that these opacity levels meet your WCAG contrast requirements for placeholder text and adjust if needed.

ahmetskilinc
ahmetskilinc approved these changes Apr 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@ahmetskilinc ahmetskilinc left a comment

Choose a reason for hiding this comment

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

lgtm, nice work

@ahmetskilinc ahmetskilinc merged commit 2c0e7f0 into Mail-0:main Apr 20, 2025
1 of 2 checks passed
@ahmetskilinc ahmetskilinc mentioned this pull request Apr 21, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

+1 more reviewer

@ahmetskilinc ahmetskilinc ahmetskilinc approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ayushk-1801 @ahmetskilinc