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
Improve page sidebar layout and design #3553
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks stunning! 😍 😍
I only have some minor comments on the colors 😄
font-weight: 600; | ||
width: 95%; | ||
text-align: center; | ||
border-bottom: 2px solid var(--additive-background); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel like the border color should be var(--border-gray)
so that it matches the rest of the webapp, but could you maybe instead tweak it to be lighter and better looking? I never changed it up.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome 😍
Description
Note: Since the old branch was so behind I just redid everything from scratch with typescript.
So right now the page sidenav looks hideous on the live webapp. It's one of those components that have long been overlooked and been needing a retouch for a while. In this PR I've improved both the user experience and visual aesthetics for the sidenav. I'm not quite finished yet, I still need to do mobile view improvements, but I would still like to get early feedback so this is the reason I've made this PR.
Result
before
after
Note: The lighter color is the new highlighting color