Updating logo nav component in header

[fcoveram]

Problem

In staging, Openverse logo and symbol are used in the Header component, but there are inconsistent sizes and focus styles. I think this happens because the root component is not the same, as VBrand and VLogoLoader do not relate to each other. See the following screenshots from staging environment.

Header

Resting	Focus

Header internal

Resting	Focus

Now that we started working on the homepage redesign (#1433) it seems worth improving this key nav element.

Edited version: This update does not affect the Footer component as it uses VBrand for the logo.

Description

Upon the homepage redesign, Logo nav component was updated in Figma to simplify the versions used across the site. Including the homepage and the full-screen menu.

The component has three sizes:

• Small for the header's small breakpoints where Openverse symbol lives inside the search bar.
• Medium for the header's large breakpoints where Openverse symbol lives outside the search bar.
• Large for the header and footer versions where Openverse logo is displayed completely.

And three states: Resting, Hover, Focus, and Loading. The last one is for Small and Medium sizes as those sizes are used in the search flow.

Additional context

This request impacts the subsequent work coming from WordPress/openverse-frontend#1433 as

• Use popover for pages menu on screens betweween md and lg openverse-frontend#2051
• Add the component for the homepage grid openverse-frontend#2060

[dhruvkb]

Linking the PR WordPress/openverse-frontend#2067 here for focus styles.

[fcoveram]

The initial ticket mentioned updating the Footer component (done in WordPress/openverse-frontend#2015), but it was a mistake. The request was updated.

[zackkrida]

Here are the current focus states:

Note the full logo is thicker.

[obulat]

The internal header's logo nav component is fixed in #2136.

The search header's component still needs to be fixed. Here's @fcoveram's comment from #2136 describing the changes required:

is this discrepancy present in Figma? Does it matter to fix this?

As in the example shared, it's not present in Figma. If you go to the Logo nav component in the Design Library, you will see the following

Row 1 (size: small) is the logo for the content header in small breakpoints when it's part of the search bar. Row 2 (size: medium) is for the content header in bigger breakpoints. And Row 3 (size: large) is for the internal header in all breakpoints.

Row 2 and 3 share the same size for the symbol, but the latter adds the word "openverse" and has a 16px padding on left and right sides.

---

So going back to your questions from the video:

• Is this discrepancy present in Figma? The symbol size discrepancy is wrong. The only difference is the padding in row 3 (size: large)
• Does it matter to fix this? It does. Especially in header content where logo looks bigger than mockups in all breakpoints. See the image below where I compared both headers in their two main variants.

[fcoveram]

The logo nav update was successfully applied in Header internal in #2136, but the changes described above for Header desktop remain pending.

Can we address this in the next weekly meeting?