Hot Map Styling Fixes 🗺️

[dilanurbayraktar]

Hot Map Styling Fixes 🗺️

Summary 💻

Hello helloooo!! Welcome back to another semester with Beantown 🤩

This ticket focuses on styling fixes for the hot map. Specifically, we want to address a few things that might be annoying or confusing for users when interacting with the map.

Issues to Fix

1. Pop-up box overflow on the map

The screenshot below shows what happens when you click on Boston on the map. Because there are many partner organizations, the pop-up box covers the entire height of the map.

We’d like you to play around with the partner organization list inside the pop-up boxes to improve usability.

Things to try:

• Remove the partner names
• Make the logos smaller
• Match the styling more closely to what our designer created in Figma (see below)

Waitlisted organizations

• Add a title under the active partner logos called “Waitlisted Partner Information”
• Display the waitlisted partner logos under this title
• Styling for waitlisted logos should match the active partner logos

2. Timeline slider issues (Monthly + Yearly)

When the switch is set to Monthly, the months on the timeline slider get squished together toward the end, which hurts readability.

Additionally:

• The label shown while dragging the slider displays 1, 2, 3, ..., which is unnecessary
• Since the selected month already appears at the top-left of the slider, we should:
  • Remove the month labels under the slider
  • Remove the drag labels (1, 2, 3, …)

👉 The same changes should be applied to the Yearly view of the map as well.

Technical Notes 🛠️

This is all Mantine, so you’ll need to dig through the documentation:
https://mantine.dev/core/slider/

Deliverables 🚀

• Schedule at least two meetings as a pair
• Create a new branch using the “create a branch” button
• Make the partner logos smaller in the pop-up boxes, following the Figma
• Remove the labels on the timeline slider (Monthly and Yearly views)
• Open a PR and request review from @coopergolemme

Wireframe 🎨

Here’s the wireframe for the pop-up boxes.

Tips for success 📈

Where to get help!

Reach out to @dilanurbayraktar and @coopergolemme .