GHG design updates October

[j08lue]

From stakeholder feedback, we got a few small suggestions for design changes.

1. Make highlighted layer more clear (contrast to panel background gray)

2. Remove trailing "Overview" from dataset titles

3. https://github.com/NASA-IMPACT/veda-config-ghg/issues/207

Acceptance criteria

• [ ] Responded to the points above, either directly or in the context of a larger design update

[deborahUAH]

I am suggesting to either do something like this: Overview of Gridded Anthropogenic Methane Emissions Inventory

or like this Gridded Anthropogenic Methane Emissions Inventory Overview

[deborahUAH]

or we can just omit Overview from the title completely

[j08lue]

Ahh, now I get it. It's not about the menu on the right but about the word added to the titles... Thanks for the clarification.

[faustoperez]

Hi, here's the updated design to make the Overview + Exploration and layer selection more clear.

These are the changes:

• Remove the white separator on the header
• Style the Overview + Exploration as tabs
• On the layers panel, use the link color as a background for the active layer state, and change the text color to white
• Set text weight to Regular
• Add a 1px gray line at the bottom to separate items
• Make the layer title wrap to the next line (do not truncate)
• Show information icon only on hover / active to reduce clutter
• On hover, change background to light gray (same as now)

[j08lue]

If this styling change is quick enough to implement, I think we should do that, despite the ongoing work to replace the complete feature, because it would improve the current user experience while we build and test the new.

Let us estimate and decide this during our next backlog refinement - or if you can do this async, @hanbyul-here and @faustoperez, that would be great, too.

[faustoperez]

If it helps the estimation, the 2 CSS changes are:

• Navigation tabs
• Sidebar layer list elements.

[j08lue]

Does the change of logo order

• https://github.com/NASA-IMPACT/veda-config-ghg/issues/210

require design guidance?

[faustoperez]

Does the change of logo order require design guidance?

I don't think it does 🙂