Improve navbar structure and enhance leaderboard UI consistency

[mythri2405]

Description

The current UI of the leaderboard can be improved to provide a cleaner
and more intuitive user experience.

Proposed Changes

• Reorganize the top navigation bar structure
• Improve navbar spacing and alignment
• Separate navigation links and action buttons for better hierarchy
• Keep the navigation tabs as:
  • Home
  • Leaderboard
  • About
• Keep Register and GitHub as action buttons
• Improve active tab highlighting
• Use LeetCode-inspired difficulty colors:
  • Easy → Blue
  • Medium → Yellow
  • Hard → Red
• Improve leaderboard readability and visual consistency

Expected Outcome

A cleaner and more modern UI inspired by LeetCode's design language,
with improved navigation and better visual hierarchy.

I would like to work on this issue under GSSoC'26.

[jagdish-15]

At the moment, this proposal is quite broad and mostly focuses on subjective design changes.

If you'd like to pursue this further, could you provide screenshots/mockups and explain what specific problems the proposed changes solve in the current UI? As it stands right now, the proposal is quite vague and subjective.

Otherwise, feel free to close the issue.

[mythri2405]

Thank you for the feedback.

I’ve attached a revised mockup to better clarify the proposed UI changes while keeping the existing theme and design language intact.

Problems in Current UI

• The navbar currently treats navigation links and actions (Register/GitHub) with the same visual hierarchy, which makes navigation feel slightly cluttered.
• GitHub is an external project link but visually appears like a normal navigation tab.
• Difficulty colors are inconsistent with the familiar LeetCode color scheme, reducing quick readability.
• The score column currently blends with the colored difficulty columns, making important ranking information less distinguishable.

Proposed Improvements

• Keep the existing Matrix/terminal-inspired UI unchanged.

• Reorganize the navbar into:

  • Navigation tabs: Home, Leaderboard, About
  • Action buttons: Register, GitHub

• Improve spacing and active tab visibility in the navbar.

• Use LeetCode-inspired colors:

  • Easy → light blue
  • Medium → yellow
  • Hard → red

• Keep LeetCode ID and Score columns white/light for better readability and visual balance.

Expected UX Improvements

• Better navigation hierarchy
• Cleaner separation between navigation and actions
• Improved readability of leaderboard statistics
• More familiar difficulty visualization inspired by LeetCode

I’d be happy to further narrow the scope if needed.

[jagdish-15]

The color used by LeetCode for Easy questions isn't technically blue, it's more of a cyan/blue mix. I've attached a reference image below. If we're going to change the colour, I'd prefer using something closer to that shade.

Also, I like the updated external link icons for the LeetCode ID column.

I'm still a bit hesitant about the navbar changes, as moving toward a more modern navbar could make the platform lose some of its terminal-themed personality. That said, I can see the reasoning behind the proposed hierarchy improvements.
Could you try to make the navbar a bit more consistent with the footer and the rest of the terminal-inspired theme? If you can preserve more of the existing design language while implementing these improvements, I'd be happy to move forward with it.

I've assigned the issue to you. Looking forward to the implementation!

[jagdish-15]

Closed by #56