Improve language toggle

[inesdgomes]

This is a sub-ticket of #823 & #1302

Hi @beatrizmartinmartins We've been receiving feedback saying that the language toggle is not visible or easy enough to use. A few things I think we could improve:

• I think we're missing an downward arrow after the language name. At the moment it's not clear that you can find more language options when clicking on the language
• Do you think we can increase the font size of the language label or just make it bold? The same change would need to be applied to the link next to the language label (Main ILO website).
• Since we're making these changes, I think we should also remove the arrow that shows before 'Main ILO website'. It's misleading as this is just a hyperlink, it does not actually take users back anywhere.

https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=1433-3563&t=f7Y3EMocyjiNUGro-0

[beatrizmartinmartins]

@inesdgomes

• Honestly, I think the Link that says (Main ILO Website) doesn't look like a link because there's no separation between the language and that hyperlink. Maybe we should include a line between the Main ILO Website and the language so the user knows that they are two different things?
• On the live website, I'm seeing we don't actually have the Main ILO Website hyperlink anywhere. Is it something we are going to add?

Made the changes you asked for here

[inesdgomes]

Thanks @beatrizmartinmartins The changes you made look good.

• Agreed on adding a line or some other way of making a clearer distinction between the two items. Could you please try that?
• The 'Main ILO website' link doesn't show on the live website because you're already on the main ILO website. That links is meant to be shown only on sub-sites that are separate from the main ILO website. It will eventually be implemented on sites like voices.ilo.org/ or ilo.org/infostories.

[beatrizmartinmartins]

@inesdgomes Made that change on the designs. You can check it on the component. On the templates is not shown.

[inesdgomes]

Great, thanks @beatrizmartinmartins. @justintemps Here are the changes that were done to 'languagelabel' and 'mainlink' in the desktop navigation:

• Added a downward arrow to indicate there are more languages
• Font size / weight changed
• Removed arrow that showed before 'mainlink'
• Added a vertical line separating 'mainlink' and 'languagelabel0

Changes can be seen in the component library: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=6198-11143&t=BcrzzTsjGNg4AHmh-1

[beatrizmartinmartins]

@justintemps Basically we added a line of 16px between the menu items so it looked different and users understood the difference between one and another. This line basically separates the language from the link. CC @inesdgomes

[inesdgomes]

@justintemps This can move to development. Repeating this comment so it's clear what are the changes that were done to 'languagelabel' and 'mainlink' in the desktop navigation:

• Added a downward arrow to indicate there are more languages
• Font size / weight changed
• Removed arrow that showed before 'mainlink'
• Added a vertical line separating 'mainlink' and 'languagelabel0

Changes can be seen in the component library: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=6198-11143&t=BcrzzTsjGNg4AHmh-1

[justintemps]

@Shashika6 Here's a link to the component. See @inesdgomes's instructions above. When you make the PR, please ask her to review it.

https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=6198-11143&t=I4GVpdv2cirpfs3x-1