WV-3226 Look and Feel Changes

[christof-wittreich]

Description

This update changes the style and look of some things on the WV landing screen, including font, color, icons, and the tour story boxes. See the design here. Note the eye icons in the design are intentionally being ignored in favor of our current eye icons.

How To Test

1. git checkout wv-3226-look-and-feel
2. npm ci
3. npm run watch
4. Open a fresh instance of Worldview
5. Confirm that many things on the front page matches the designs
6. Confirm that functionality of basic features still works

[Tomcariello]

The add layers button is not rendering correctly.

[Tomcariello]

Are the timeline icons updating as well? The icons in the mockup (bottom in this pic) look thinner than what is in WV currently.

[Tomcariello]

The font & checkboxes in the layer picker have changed. Was this intentional?

[Tomcariello]

The "Select Entire Globe", "Shorten Link", etc. checkboxes used to be orange. Was this change intended?

[christof-wittreich]

Fonts and checkboxes are meant to be changed site-wide, yes

[Tomcariello]

Everything I mentioned previously looks good. The only thing I see if that the checkboxes in the RECENT tab of the layer picker fill solid blue without the white checkmark. It looks like the SVG element is not being loaded.

[christof-wittreich]

@Tomcariello This should be fixed now too

[minniewong]

It's looking good! Could you also change the font thickness to match the other thickness for the body of the "About" section, and the hover text for the Tour Story modal?

[minniewong]

These checkboxes aren't center aligned in Chrome and Firefox. (the ones reported earlier are correctly centered now)

And the checkboxes in the settings options for layers with more than one checkbox is not aligned correctly.

[minniewong]

Looks like the arrow backgrounds need to be made a bit more transparent?

[minniewong]

Another really small nit - I think because the "Layer Coverage" text went onto a new line (it used to be all on one line), the whole Layer availability panel got pushed down into the timeline. Maybe just move the "i" and toggle elements over a bit to the right so that "Layer Coverage" can remain on one line?

[minniewong]

When you minimize the layer list, there is some overlap that is not present in Prod. I'm guessing because the title is bigger now. We should replicate prod and have a tiny space between the title/logo and the layer list Prod: