feat: update map overlay to "Unlock map" with hover effect

[swankystark]

Proposed change

Related to #2839

This PR updates the map interaction overlay to specific "Unlock map" actions with visual improvements, addressing feedback from the previous PR.

Changes:

• Changed overlay text from 'Click to interact with map' to 'Unlock map'.
• Added unlock icon (faLockOpen) from FontAwesome before the text.
• Added hover effect: Button now scales up (hover:scale-105) and brightens on hover for clearer interactivity.
• Updated aria-label to "Unlock map" for better accessibility.
• Updated all related unit tests in ChapterMap.test.tsx to match the new text.

Verification:

• Validated visually on local development server.
• Ran make check-test in WSL environment and all checks passed (including linting and unit tests).

Checklist

• I read and followed the contributing guidelines
• I ran make check-test locally and all tests passed
• I used AI for code, documentation, or tests in this PR

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• Improvements
  • Enhanced the interactive map unlock button with improved visual design and updated labeling for clearer user guidance.
  • Added smooth hover effects and visual transitions to the unlock button for better feedback during map interaction.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

This PR updates the ChapterMap component's overlay button to display "Unlock map" with a lock-open icon instead of "Click to interact with map". The component now imports FontAwesome icons, adds flex layout styling to the button label, and updates the aria-label accordingly. Corresponding test assertions are updated to match the new text and UI changes.

Changes

Cohort / File(s)	Summary
Component Update frontend/src/components/ChapterMap.tsx	Adds FontAwesome icon imports, replaces button text with "Unlock map", adds lock-open icon to button content, introduces flex layout and styling effects (gap, hover/transition) to the button label, and updates aria-label from "Click to interact with map" to "Unlock map".
Test Updates frontend/__tests__/unit/components/ChapterMap.test.tsx	Updates all test assertions for the Interactive Overlay tests to reflect the new button text "Unlock map", including getByText lookups, aria-label checks, and text presence validations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Review FontAwesome import additions and icon placement in the button structure
• Verify flex layout and styling changes work as expected
• Confirm all test assertions accurately reflect the new button text and aria-label

Possibly related PRs

• Fix: Prevent Accidental Map Zooming While Scrolling on Landing Page #2508: Updates the same ChapterMap overlay button UI elements and corresponding test assertions.
• test: add comprehensive unit tests for ChapterMap component #1874: Modifies the ChapterMap component and unit tests for the same interactive overlay feature.
• Add precise location sharing option for chapter map #2644: Modifies the ChapterMap component's interaction button label and UI payload.

Suggested labels

frontend, frontend-tests

Suggested reviewers

• arkid15r
• kasya

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2ffb2c2 and 0a2181e.

📒 Files selected for processing (2)

• frontend/__tests__/unit/components/ChapterMap.test.tsx (4 hunks)
• frontend/src/components/ChapterMap.tsx (2 hunks)

---

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 and usage tips.}

[github-actions]

The linked issue must be assigned to the PR author.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud