Updating logo nav component in header #476
Labels
🕹 aspect: interface
Concerns end-users' experience with the software
design: ready
Issue with a mockup ready for implementation
✨ goal: improvement
Improvement to an existing user-facing feature
🟨 priority: medium
Not blocking but should be addressed soon
🧱 stack: frontend
Related to the Nuxt frontend
🏁 status: ready for work
Ready for work
Projects
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
andVLogoLoader
do not relate to each other. See the following screenshots from staging environment.Header
Header internal
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
, andLoading
. The last one is forSmall
andMedium
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
The text was updated successfully, but these errors were encountered: