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

[website] Improve visual design app bar #35111

Merged
merged 2 commits into from Nov 15, 2022

Conversation

oliviertassinari
Copy link
Member

A visual bug that I saw on https://mui.com/blog/date-pickers-stable-v5/

Before

Screenshot 2022-11-12 at 18 49 24

After

Screenshot 2022-11-12 at 18 49 12

The dark background color leaks too much into the app bar, reducing the opacity helps, I'm not sure that I went far enough, but at least, this feels already a step forward.

@oliviertassinari oliviertassinari added design This is about UI or UX design, please involve a designer website Pages that are not documentation-related, marketing-focused. labels Nov 12, 2022
@mui-bot
Copy link

mui-bot commented Nov 12, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-35111--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 2849eb1

Signed-off-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

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

Looking fine to me⎯especially with the reduced blur!

@danilo-leal danilo-leal merged commit 6f9e110 into mui:master Nov 15, 2022
@oliviertassinari oliviertassinari deleted the fix-blur-app-bar branch November 15, 2022 12:33
@oliviertassinari
Copy link
Member Author

oliviertassinari commented Nov 15, 2022

It looks good 👍, my main concern was the broken contrast ratio when the appbar hovers a dark area in light mode.

@oliviertassinari
Copy link
Member Author

@danilo-leal Regarding

backdropFilter: 'blur(20px)',

Did you expect to update the docs as well? e.g. https://deploy-preview-35111--material-ui.netlify.app/material-ui/getting-started/overview/ is still using 20px

@danilo-leal
Copy link
Contributor

I did, yeah! There you go a PR making it consistent ☝️

the-mgi pushed a commit to the-mgi/material-ui that referenced this pull request Nov 17, 2022
Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer website Pages that are not documentation-related, marketing-focused.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants