[Enhancement]: increase contrast between menus and app background

[emilydrakesmith]

Requirements

Several of our dropdown menus use the same background color as the general background of the app body (specifically rgb(23, 29, 39) ). This causes accessibility issues because there isn't any contrast to distinguish the elements.

For both general usability and accommodation for visually-impaired users, no element with a given background color should be superimposed without interruption on top of another element with the same background color. When opening a dropdown, the user should be able to see before interacting exactly where are the bounds of that dropdown in the DOM without interacting.

We can rectify through one of several options:

1. GOOD Create a new background color which is only used as a background for dropdown menus with no other application in the codebase
2. BETTER Add a border around the dropdown menu, 2-3 px should be sufficient
3. BEST Both of the above options in concert

@miyuki-eto Please review and communicate desired fix.

Network Switcher:

Resource Links:

Figma

No response

Assumptions

No response

[miyuki-eto]

i have amended the header menu background colours (dark4) and added a border (accent1, 1px). this is in the figma and can be found here -

https://www.figma.com/file/0ItLk4nJmtj741R8sn3HYp/ambient?type=design&node-id=4438-61118&mode=design&t=GK2XcMpIXQwISxo7-4