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
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 |
Task
closes #1804
Design
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.