fix: improve calendar picker icon visibility in Dark Mode

[jikrana1]

Addressed Issues

Fixes #144

Changes

• Improved the visibility of the calendar picker icon in Dark Mode.
• Applied theme-specific styling so the icon remains clearly visible in both Light and Dark themes.

Checklist

• My code follows the project's code style and conventions.
• My changes generate no new warnings or errors.
• I have read the Contributing Guidelines.

Screenshots

Before

Dark Mode

Light Mode

---

After

Dark Mode

Light Mode

Summary by CodeRabbit

• Style
  • Improved date picker calendar icons with clearer pointer interaction.
  • Added smooth visual transitions and theme-aware coloring for dark and light modes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 1c28441c-26b2-43e1-89fe-1f89e358a703

📥 Commits

Reviewing files that changed from the base of the PR and between fc7e7ab and 04d777e.

📒 Files selected for processing (1)

• src/styles/global.css

---

Walkthrough

Global CSS now styles date input calendar indicators. The indicators use pointer and filter transition styles. Dark themes invert the indicator colors. Light themes remove the filter.

Changes

Date picker styling

Layer / File(s)	Summary
Indicator theme styles src/styles/global.css	Date picker indicators use a pointer cursor and filter transition. Dark themes invert the indicator colors. Light themes reset the filter.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: rahul-vyas-dev, zaibamachhaliya

Poem

A rabbit brightens the calendar light,
Dark mode now shows the icon right.
The pointer hops with a smooth transition,
Light mode keeps its clear condition.
“Pick your dates!” says the bunny in flight.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the calendar picker icon visibility fix for Dark Mode.
Linked Issues check	✅ Passed	The CSS changes address issue #144 by improving date input calendar icon visibility in Dark Mode and preserving Light Mode behavior.
Out of Scope Changes check	✅ Passed	The changes are limited to date input calendar icon styling and align with the linked issue objectives.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.6)

src/styles/global.css

File contains syntax errors that prevent linting: Line 81: expected } but instead the file ends

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/styles/global.css`:
- Around line 66-79: Scope the date-picker rules around the shared .date-input
class instead of the global input[type="date"] selector, including the cursor,
transition, and both theme-specific indicator rules in global.css. Add the same
class to both date inputs in ContributorProfilePage.jsx, using the existing
naming convention and preserving the current light/dark behavior.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 518224a3-fd9f-456c-9831-db262ee90857

📥 Commits

Reviewing files that changed from the base of the PR and between e3fa862 and fc7e7ab.

📒 Files selected for processing (1)

• src/styles/global.css

[coderabbitai]

📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Scope the date-picker styles to the intended controls.

If only the contributor profile date inputs need this behavior, replace the global input[type="date"] selector with a shared class such as .date-input. The current selector changes every date input in the application and can affect unrelated forms.

Proposed scope change

-input[type="date"]::-webkit-calendar-picker-indicator {
+.date-input::-webkit-calendar-picker-indicator {
   cursor: pointer;
   transition: filter 0.2s ease;
 }

 :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }

 [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
   filter: none;
 }

Apply the same .date-input selector to the two date inputs in src/pages/ContributorProfilePage.jsx.

As per path instructions, review CSS against Google CSS style guidance and use consistent class and ID naming conventions.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/global.css` around lines 66 - 79, Scope the date-picker rules
around the shared .date-input class instead of the global input[type="date"]
selector, including the cursor, transition, and both theme-specific indicator
rules in global.css. Add the same class to both date inputs in
ContributorProfilePage.jsx, using the existing naming convention and preserving
the current light/dark behavior.

Source: Path instructions

[gitcordapp]

Link your account with Gitcord

Thanks for opening this PR, @jikrana1!

To receive Discord notifications and contributor tracking for this organization:

1. Join Discord: https://discord.gg/hjUhu33uAn
2. In Discord, run /link jikrana1
3. Paste the verification code into your GitHub bio (or a public gist)
4. Click Verify in Discord (or run /verify-link jikrana1)

Once linked, Gitcord can notify you about reviews, merges, and more.

— Posted by Gitcord

[github-actions]

⚠️ This PR has merge conflicts.

Please resolve the merge conflicts before review.

Your PR will only be reviewed by a maintainer after all conflicts have been resolved.

📺 Watch this video to understand why conflicts occur and how to resolve them:
https://www.youtube.com/watch?v=Sqsz1-o7nXk

[Ri1tik]

Good Catch & Nice Work!! Please resolve the merge conflict!