Skip to content

feat: Improve language picker UI with icons #1933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: gh-pages
Choose a base branch
from

Conversation

ShubhamOulkar
Copy link
Member

@ShubhamOulkar ShubhamOulkar commented May 30, 2025

Task

closes #1804

desktop mobile
image Screen Shot 2025-05-31 at 16 20 38

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.

@ShubhamOulkar ShubhamOulkar requested review from a team as code owners May 30, 2025 14:51
Copy link

netlify bot commented May 30, 2025

Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit 8605cd4
🔍 Latest deploy log https://app.netlify.com/projects/expressjscom-preview/deploys/684ad773b0e0e0000870d9a7
😎 Deploy Preview https://deploy-preview-1933--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ShubhamOulkar ShubhamOulkar self-assigned this May 30, 2025
@ShubhamOulkar ShubhamOulkar changed the title WIP : Enhance lang picker feat: Improve language picker UI with icons May 31, 2025
Copy link
Member Author

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ShubhamOulkar ShubhamOulkar requested a review from bjohansebas June 4, 2025 05:09
@cengizcmataraci
Copy link
Contributor

cool work, thanks for your contribution.

@ShubhamOulkar ShubhamOulkar requested a review from a team as a code owner June 12, 2025 13:20
@ShubhamOulkar ShubhamOulkar removed the request for review from a team June 12, 2025 13:24
Copy link
Member Author

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @bjohansebas, we can launch this pr. Flags rendering logic is changed in c37b3a4

LGTM 👍, I need approvals to launch these changes.

@ShubhamOulkar ShubhamOulkar added enhancement design Change, update, or fix for site UI (not content) labels Jun 12, 2025
@@ -85,7 +85,10 @@ follow the specific instructions for [How to write a blog post.](https://express
**CSS or Javascript**
- All css and js files are kept in `css` and `js` folders on the project root.

The Express JS website is built using [Jekyll](https://jekyllrb.com/) and is hosted on [Github Pages](https://pages.github.com/).
**SVG Flag Icons**
- The SVG flag icons used in this project were sourced from [Nucleo SVG Flag Icons.](https://nucleoapp.com/svg-flag-icons)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@expressjs/express-tc there's no problem referencing this, right?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Change, update, or fix for site UI (not content) enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Language picker: Add identifying feature and remove/fix duplicate nav ids
3 participants