feat: Improve language picker UI with icons - #1933
Conversation
✅ Deploy Preview for expressjscom-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ShubhamOulkar
changed the title
|
cool work, thanks for your contribution. |
There was a problem hiding this comment.
Hi @bjohansebas, we can launch this pr. Flags rendering logic is changed in c37b3a4
LGTM 👍, I need approvals to launch these changes.
ShubhamOulkar
added
enhancement
design
ctcpip
left a comment
ctcpip
left a comment
There was a problem hiding this comment.
We should not conflate languages with countries for a number of reasons (different languages spoken in the same country, people who speak a language may not identify with the country we have chosen, etc.)
While it's true that we sometimes need to choose a regional variation of a language for machine translation purposes, e.g. Brazilian Portuguese, that doesn't mean we must represent it using a Brazilian flag.
|
I agree with @ctcpip |
|
Can we leave just the icon, please? |
Actually, I want to 😃. This approach removes a lot of unnecessary files and code. We don't need mobile lang picker file as well as JS and CSS written for this. I already mentioned this in comment #1804 (comment). But didn't got reviews. Then I decide to keep as it is and just fix issues referenced in description. Also I did check history, you guys did a lot of work to bring that mobile lang picker on the website. |
|
Long story short 😃 — on small screens, we only show the i18n icon, and now we're switching desktop to use the same. So it makes sense to use a single UI component across all screen sizes. |
|
I'm going to draft this PR for now. It will be closed later as part of the i18n component simplification, as mentioned in #1933 (comment). |
|
We decided to make design simple and reusable on all screen sizes. |
4 participants
Task
closes #1804
new design applied from https://expressjsnewdesign.netlify.app/
Design
(Following design rejected)
bug: Mobile view, current language color highlighting
How SVG Icons Were Created?The SVG flag icons were sourced from Nucleo SVG Flag Icons.Each SVG file was copied and added to the repository using the VS Code editor.While there are several ways to edit SVGs in VS Code, including using extensions for live preview or advanced editing, I used the default text editor setup to make the required changes.The SVGs were customized and optimized to fit the required sizes(20x22) and design specifications for our language picker UI, so that we don't need to write CSS to customize icons.