RADFish Boilerplate - Bug: Header drop down css readability issue

[theangchen]

Bug Description

From email:

Hello Josh and Jesse,

I scaffolded a new app based on a template (with npx @nmfs-radfish/create-radfish-app my-app) and added a drop-down menu (NavDropDownButton and Menu imported from @trussworks/react-uswds) to PrimaryNav. It works, but the contrast between the text and the header is very poor when the menu is not selected/expanded, because react-uswd expects the header background to be white, while the RADFish template went for blue. I tried forcing the font color to white, but it doesn't work very well (e.g. the SVG picture representing the "down arrow" remains black).

You can see the issue on the attached screen capture, and the version with the white font here: https://dev-apps-st.fisheries.noaa.gov/merit
This is how the react-uswds menu is supposed to look like: https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.sites.pages.cloud.gov/preview/uswds/uswds/develop/iframe.html?id=components-header--default&args=&viewMode=story

• If you encountered this issue before, do you have a fix for it?
• Is it ok to change the menu background to white, or do you want all RADFish apps to have this exact look and feel?

Also, I found documentation for a RADFish module named Navigation (https://main--65de4951379b5e4412b4ffbd.chromatic.com/?path=/docs/radfish-navigation-beta--docs), but I don't find it in the RADFish npm (https://www.npmjs.com/package/@nmfs-radfish/react-radfish?activeTab=code). Am I missing something?

Thank you!

Steps to Reproduce

Expected Behavior

Text should be readable. Please advise on how to override css var

Screenshots

No response

System Information

No response

Additional Information

No response