Active state of global header item

[fcoveram]

As per this comment shared on #657, I worked on an improved version of active state's style of global header items.

Here you can see a section where all variants are placed in both desktop and mobile views. The rest of elements in the same page were updated to reflect the latest changes.

[fcoveram]

Note to @ryelle: It was easier for me adding the specs in Figma's dev mode, and I think it's also more clear. I hope this works for you. If not, let me know so I can move all those notes to this ticket.

[ryelle]

Note to @ryelle: It was easier for me adding the specs in Figma's dev mode, and I think it's also more clear. I hope this works for you. If not, let me know so I can move all those notes to this ticket.

That still requires me to try to spot the difference for what changed, for example you've highlighted the focus state, but the focus state already looks like that. The height of 44px is highlighted, but items are already 44px tall. Is the only change the new left border for current menu item?

[fcoveram]

I understand. Sorry for not being clear.

Active state style

The active state just involves showing a border in both desktop and mobile views. Here are the specs:

• Width: 1.5px
• Height: 44px
• Color: blueberry-1 in when theme is white, blueberry-2 when theme is dark

Menu spacings

I also applied a spacing tweak on mobile between the border and the menu item label

Menu items area

The left and right paddings where menu items are (image above) changes from 10px to 5px

Menu item

The left and right paddings of menu item (image above) changes from 10px to 15px

Expected result

The outcome should look like this

View with spacing notes	User view

---

I hope the above is clear