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] Fix Toggle Button styles in the homepage demos #40744

Merged
merged 2 commits into from Jan 23, 2024

Conversation

mohamedsaiedd
Copy link
Contributor

@mohamedsaiedd mohamedsaiedd commented Jan 22, 2024

This PR fixes the MuiToggleButton for selected button right border overlap issue by adding z-index property as higher layer for "Mui-selected" class and "MuiToggleButton" class lower z-index.

Closes #40727

Before After
Screenshot from 2024-01-23 03-27-36 Screenshot from 2024-01-23 03-28-11

@mui-bot
Copy link

mui-bot commented Jan 22, 2024

Netlify deploy preview

https://deploy-preview-40744--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 1d1fccc

@mohamedsaiedd mohamedsaiedd changed the title Fix bug in Mui-selected btn in landing page Fix bug in Mui-selected btn in homepage Jan 23, 2024
@danilo-leal danilo-leal changed the title Fix bug in Mui-selected btn in homepage [website] Fix Toggle Button styles in the homepage demos Jan 23, 2024
@danilo-leal danilo-leal added the website Pages that are not documentation-related, marketing-focused. label Jan 23, 2024
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.

Heya @mohamedsaiedd, thanks for opening the PR!

We can actually fix this problem without adding any z-index treatment. If you delete everything that's being passed through the sx prop in the src/components/showcase/ThemeToggleButton.tsx file, the problem should be solved.

@mohamedsaiedd
Copy link
Contributor Author

Thank you @danilo-leal for the clarification i tried to play with the gray border color which was the main issue for the nonselected elements and it works so fine in the dark and light themes ,if we delete all the CSS properties the design might be totally different.

Dark Light
Screenshot from 2024-01-23 23-38-59 Screenshot from 2024-01-23 23-38-54

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.

Okay — looks great; thanks for working on it! 🤙

@danilo-leal danilo-leal merged commit 1330924 into mui:master Jan 23, 2024
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
website Pages that are not documentation-related, marketing-focused.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[website] Toggle button's border not correct in the homepage
3 participants