Map Page UI Updates

[mwodahl]

PR Details

This PR updates the map page to include the UI updates found in the following Figma prototype: https://www.figma.com/proto/QG64ugNXpXMUk2vQ1wgPdZ/CV-Manager-Prototype-January-2025?page-id=2143%3A6061&node-id=2146-7749&viewport=-595%2C-659%2C0.22&t=A1CuORABoO0Qexzk-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=2146%3A6646

Description

This PR includes the following changes:

• Update menu opacity and background color
• Update RSU popup to include color-coded information and icon
• Update RSU configuration menus (single and multiple) with correct layout, button types
• Update the counts menu input display
• Update the RSU Status component to include color-coded information, location icon, and correct button variations

How Has This Been Tested?

This was tested locally using docker compose alongside the changes found in #172. Unit tests were verified to pass using npm.

Types of changes

• Defect fix (non-breaking change that fixes an issue)
• [ X ] New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that cause existing functionality to change)

Checklist:

• My changes require new environment variables:
  • I have updated the docker-compose, K8s YAML, and all dependent deployment configuration files.
• My changes require updates to the documentation:
  • I have updated the documentation accordingly.
• [ X ] My changes require updates and/or additions to the unit tests:
  • [ X ] I have modified/added tests to cover my changes.
• [ X ] All existing tests pass.

[jacob6838]

A few visual comments to start. Please excuse the use of paint, it was easier this way:

[jacob6838]

There is a lot of extra spacing in the RSU side menu. Reducing margins/padding would open up a lot more space

[jacob6838]

RSU side menu scrollbar should freeze the header and scroll only the content:

[jacob6838]

The selected RSU side menu and "Display message Counts"/"Display RSU Status" display over each other

[jacob6838]

Let's add a backlog task to convert the "Configure RSUs" menu to use the same polygon rendering as the V2X message viewer and upcoming mooveai region selector

[jacob6838]

A few high level comments upon testing - will review the code shortly!

[mwodahl]

I've updated the following:

• Map menu is expanded by default
• Removed extra spacing from RSU config menu
• RSU config menu only has scroll bar for content
• Added a backlog item to swap the RSU Config component to use the same polygon selector as the V2x message viewer