Skip to content
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

Developed User Menu with dynamic theme switching, language dropdown w… #115

Merged

Conversation

DanielVillatoro
Copy link
Contributor

📝 Developed User Menu with dynamic theme switching, language dropdown with flags, updated icons, and improved UI consistency.

🛠️ Issue

📖 Description

  • Integrated dynamic theme switching (Light/Dark mode) using next-themes with a Switch component and dynamic Sun/Moon icons.
  • Added language dropdown with flags (en-flag.svg and es-flag.svg) for English and Spanish, displaying the selected language in the menu trigger.
  • Replaced History icon with FileDollar for the Transactions option.
  • Improved alignment, spacing, and transitions.
  • Refactored imports logic for maintainability.

✅ Changes made

  • Added dynamic theme toggle, language dropdown with flags, and updated icons.
  • action-buttons.tsx
  • user-menu.tsx

🖼️ Media (screenshots/videos)

image
image

…ith flags, updated icons, and improved UI consistency.

-Integrated dynamic theme switching (Light/Dark mode) using next-themes with a Switch component and dynamic Sun/Moon icons.
-Added language dropdown with flags (en-flag.svg and es-flag.svg) for English and Spanish, displaying the selected language in the menu trigger.
-Replaced History icon with FileDollar for the Transactions option.
-Improved alignment, spacing, and transitions.
-Refactored imports logic for maintainability.
Copy link
Contributor

@derianrddev derianrddev left a comment

Choose a reason for hiding this comment

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

@DanielVillatoro, Nice job! Just one change:
I was running the code and noticed that the language options are displayed to the side in the dropdown menu. It would be better to display the language options directly below the selected language, as shown in the image. I could use the Select component from shadcn/ui instead of Dropdown to achieve a design closer to the expected one.

image

apps/frontend/app/components/shared/header/user-menu.tsx Outdated Show resolved Hide resolved
@derianrddev derianrddev added ODBoost This issue will be available ONLY during the ODBoost frontend enhancement New feature or request labels Jan 26, 2025
@derianrddev derianrddev self-requested a review January 27, 2025 04:31
@derianrddev derianrddev requested a review from danielcdz January 27, 2025 04:31
Copy link
Member

@danielcdz danielcdz left a comment

Choose a reason for hiding this comment

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

LGTM

@danielcdz danielcdz merged commit 9e353ec into KaizeNodeLabs:main Jan 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request frontend ODBoost This issue will be available ONLY during the ODBoost
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[ENHANCEMENT]: Update User Menu
3 participants