ref(sidebar): change sidebar to light color in light mode #68177
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
|
Love this change @JonasBa 🤩 |
|
Great stuff! Would be neat to maintain a slight gradient on the side bar, both for the light and dark theme. |
anonrig
approved these changes
Apr 3, 2024
| )} | ||
| <SidebarSection> | ||
| {HookStore.get('sidebar:bottom-items').length > 0 && | ||
| HookStore.get('sidebar:bottom-items')[0]({ |
There was a problem hiding this comment.
Nit:
This line can be simplified and we dont need the if statement prior to this
Suggested change
| HookStore.get('sidebar:bottom-items')[0]({ | |
| HookStore.get('sidebar:bottom-items')?.at(0)?.({ |
|
I'm really into this look. Let's get this on @ckj and @vuluongj20's desks |
|
I forgot to add it, but if this lands, we'd need to sync and ensure we update the screenshots in our docs. |
|
This pull request has gone three weeks without activity. In another week, I will close it. But! If you comment or otherwise update it, I will reset the clock, and if you add the label "A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have punted the idea of removing the sidebar contrast on Slack a few times, but never got to opening the actual PR. I'm opening this PR so we can have an open discussion that wont ultimately get lost in slack (if not for anything else, it can serve as a future reference)
The PR changes the colors of our in-app sidebar in light mode, to no longer be the contrasting with the colors of the main page - note that this is already the case in dark mode (there is only a slight change in dark mode as we align to the theme background color used everywhere else)
The motivation is to take away the heaviness of the sidebar and have the user focus on what is in the middle of the screen. We have a lot of screens that are color heavy, especially when we are displaying a lot of charts - this would take some pressure off the reader and allow them to focus on the content.
A minor benefit here is also that our beta, alpha and whats new badges in our navigation and header cta buttons (see metrics example) stand out better as they have a higher contrast on this light colored background, bringing more attention and hopefully reducing some of the banner blindness we've been hearing about.
Feedback and opinions are very much appreciated. If you are lazy, feel free to just 👍 or 👎 the PR.
P.S. I've included a few examples of other pages from our demo app in the details below
P.P.S. I asked this question twitter a while back about what folks think of this and seems like @mitsuhiko had a hack to do this at some point :)
Light mode before
Light mode after
Dark mode before
Dark mode after
**Web vitals** (click to expand)
before
after
**Metrics** (click to expand)
before
after
