Skip to content

Improve leaderboard colors and navigation consistency#56

Open
mythri2405 wants to merge 4 commits into
codepvg:mainfrom
mythri2405:improve-navbar-and-colors
Open

Improve leaderboard colors and navigation consistency#56
mythri2405 wants to merge 4 commits into
codepvg:mainfrom
mythri2405:improve-navbar-and-colors

Conversation

@mythri2405
Copy link
Copy Markdown

Changes Made

  • Updated Easy difficulty color to cyan (#00e5ff)
  • Changed Score column and Score header to white for improved readability
  • Added external-link indicator (↗) to LeetCode profile links
  • Adjusted navbar ordering while preserving the terminal-inspired design language

Screenshots

Before Before after after

Copy link
Copy Markdown
Collaborator

@jagdish-15 jagdish-15 left a comment

Choose a reason for hiding this comment

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

Commit the suggested changes and please make sure the colour of the Score tooltip icon is updated to match the changed colour as well

Also, I noticed the external link icon is currently hidden on mobile devices. Unless there's a specific layout issue caused by it, I'd prefer keeping it visible there too

Comment thread frontend/styles/main.css Outdated
.navbar .nav-links .github-link::before {
content: "$ ";
content: '$ ';
margin-left: 16px;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
margin-left: 16px;

Let's not add the left margin here, as it causes the content to become visibly misaligned:

Image

Comment thread frontend/styles/main.css Outdated
Comment on lines +929 to +931
.easy { color: #00e5ff; }
.medium { color: #ffb000; }
.hard { color: #ff3333; }
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
.easy { color: #00e5ff; }
.medium { color: #ffb000; }
.hard { color: #ff3333; }
.easy { color: #1cbaba; }
.medium { color: #ffb700; }
.hard { color: #f63737; }

These are the colours currently used by LeetCode for Easy, Medium, and Hard questions. Since the goal of this change is to align the difficulty indicators more closely with LeetCode's design language, I'd prefer using these shades.

Comment thread frontend/styles/main.css Outdated

.navbar .nav-links li:last-child {
border-right: 1px solid var(--border);
border-right: none;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
border-right: none;
border-right: 1px solid var(--border);

Comment thread frontend/styles/main.css Outdated

.navbar .nav-links li {
border-left: 1px solid var(--border);
border-left: none;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
border-left: none;
border-left: 1px solid var(--border);

Comment thread frontend/styles/main.css Outdated
.navbar .nav-links {
display: flex;
gap: 0;
gap: 8px;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
gap: 8px;
gap: 0;

Comment thread frontend/styles/main.css
Comment on lines +938 to +939
}
.score-header {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
}
.score-header {
}
.score-header {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants