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.

[mwodahl]

Talked offline, but the error report print should include RSUs in the error state. Otherwise this looks great!

This has been updated and now includes RSUs that are in an error state

[jacob6838]

The green success text on the RSU reboot menu is very difficult to read in dark mode:

[jacob6838]

The WZDx dialog overflows a bit:

[jacob6838]

I noticed some transparent gaps in the map menu as well:

[mwodahl]

@jacob6838 I've updated the RSU reboot menu success color, fixed the WZDx popup overflow, and fixed the transparent divider issue

[jacob6838]

Ok, last 2 comments:

1. The RSU update menu error text is hard to read:

2. The RSU configuration menu hover outline isn't quite in the right spot, and the items are a little close together (top left index is really close to the other entry, and delete button is very low)

[mwodahl]

Ok, last 2 comments:

1. The RSU update menu error text is hard to read:

2. The RSU configuration menu hover outline isn't quite in the right spot, and the items are a little close together (top left index is really close to the other entry, and delete button is very low)

I've updated the RSU update menu error/success text to use the light variants, which makes the text much easier to read. I've also removed the set height from the configuration menu items, which fixes the hover issue and adds more space between items.

[jacob6838]

Great work, this looks really good!