feat: create a coordinate picker modal to edit area lat lon form (#1129)

[clintonlunn]

---

name: Pull request about: Create a pull request title: '' labels: '' assignees: ''

---

What type of PR is this?(check all applicable)

• [ ] refactor
• [x] feature
• [ ] bug fix
• [ ] documentation
• [ ] optimization
• [ ] other

Description

• [x] add modal with map embedded into it
• [x] update the AreaLatLngForm.tsx form when confirming
• [x] basic test
• [x] custom popup

Related Issues

Issue #1129

What this PR achieves

This pr is to add a coordinate picker within a modal that updates the Area Lat Lon form.

Screenshots, recordings

https://github.com/OpenBeta/open-tacos/assets/24685932/b86edbe9-8af4-40f5-8cb7-be74e91066eb

Notes

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
open-tacos	✅ Ready (Inspect)	Visit Preview	Jun 1, 2024 3:23am

[vnugent]

@clintonlunn thanks for this. I'll merge it as it. Some suggestions which we can do in a follow up PR

• show existing coordinates
• show new location. Maybe with a different icon (crosshair?)

• reuse confirm dialog

[clintonlunn]

@vnugent thanks for the suggestions, and I definitely agree. I'll create some issues and would definitely like to take on those tasks.

In addition, I'd like to modify how the dialog title is styled because the title can overflow onto the X button. I think using instead of hard coding the position, using flex box would be a better approach. i have some changes to the global.css file that i made to address this, but thought it was a little out of scope of this issue.