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]

Walkthrough

Global CSS now styles date input calendar indicators. The indicators use a pointer cursor and filter transition. 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

Poem

A rabbit taps the date icon bright,
Dark mode now makes it shine just right.
A pointer hops with a gentle glide,
Light mode keeps the colors wide.
“Pick your dates!” the bunny cried.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with 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.

❤️ 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