Update theme colors and images

pkalita-lbl commented 6 months ago

Fixes #71 Fixes #15

In src/theme/variables.css I've swapped the primary and secondary colors so that NMDC's blue color becomes the primary color for the app, as requested here.
Added a ThemedToolbar component (src/components/ThemedToolbar/ThemedToolbar.tsx) which is just a thin wrapper around IonToolbar, but uses its CSS Custom Properties to set a background image (src/components/ThemedToolbar/ThemedToolbar.module.css)
In various page components, IonToolbar is swapped out with ThemedToolbar. Unfortunately having a background image does not work well with the condensed header that was used on the home page. So I've removed that in favor of a plain header.
The WelcomePage component has been updated so that its IonContent component gets a background image (via one of its CSS Shadow Parts).
To make the logo text more legible in dark mode on the Welcome screen I used a filter to invert and lighten the image.

eecavanna commented 6 months ago

I'm reviewing this now.

pkalita-lbl commented 6 months ago

🟦

microbiomedata / nmdc-field-notes