Implement dark mode for leaflet components

[fityannugroho]

PR Checklist

Please check if your PR fulfills the following requirements:

Put [x] to check

• I have read the documentation.
• I have read and followed the Contributing Guidelines.
• I have included a pull request description of my changes.
• I have included the necessary changes to the documentation.
• I have added tests to cover my changes.

PR Type

What kind of change does this PR introduce?

Please check any kind of changes that applies to this PR using [x]

• Bug fix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes

What is the current behavior?

Please describe the current behavior that you are modifying, or link to a relevant issue.

Issue Number: N/A

Map components styles like popup and zoom control weren't changes when dark mode active. Some components like the number of the island marker also less visible in dark mode.

What is the new behavior?

This pull request includes changes to the app/globals.css and components/map-dashboard.tsx files to improve the styling of map elements and update the text styling for better consistency.

Styling improvements:

• app/globals.css: Added custom styles to override default Leaflet styles, including popups, markers, and controls.

Text styling updates:

• components/map-dashboard.tsx: Removed the text-primary class from the island name to use the default text color.
• components/map-dashboard.tsx: Updated the text color of the "Populated" and "Outermost Small Island" labels to use text-popover and changed the font weight to font-semibold.

Other information

None

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
idn-area-map	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 3:04pm