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

[joy-ui][docs] Refresh the marketing example on the Color Inversion page #41497

Merged
merged 5 commits into from
Mar 19, 2024

Conversation

cipherlogs
Copy link
Contributor

@cipherlogs cipherlogs commented Mar 14, 2024

Preview: https://deploy-preview-41497--material-ui.netlify.app/joy-ui/main-features/color-inversion/#marketing-section

I made some changes to the last example to better showcase Joy UI color inversion. Here are the key features and enhancements:

1. Soft and Dark Palette:

I introduced a new mode with softer and darker tones.

Screenshot Capture - 2024-03-14 - 19-32-52
Screenshot Capture - 2024-03-14 - 19-33-08

2 . CSS Shapes:

Instead of using images, I designed shapes using CSS so that the shape's colors can dynamically adapt to the selected palette.

Screenshot Capture - 2024-03-14 - 19-17-26

3. Enhanced Second Button:

Gentle mods.

4. Full Responsiveness:

The design is now fully responsive.

Screenshot Capture - 2024-03-14 - 19-30-37


Screenshot Capture - 2024-03-14 - 19-32-20


Screenshot Capture - 2024-03-14 - 19-32-52

@mui-bot
Copy link

mui-bot commented Mar 14, 2024

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against c884f44

@danilo-leal danilo-leal changed the title [joy-ui][docs][colorInversion] Enhance the marketing section example. [joy-ui][docs] Refresh the marketing example on the Color Inversion page Mar 14, 2024
@danilo-leal danilo-leal added docs Improvements or additions to the documentation design This is about UI or UX design, please involve a designer package: joy-ui Specific to @mui/joy labels Mar 14, 2024
@zannager zannager requested review from siriwatknp and danilo-leal and removed request for danilo-leal March 15, 2024 15:42
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.

Great changes all around! I took advantage of the PR to do some further refining here and there (and throughout other demos on the page, even though they're not fully fixed yet — the "Exceptions" demo is still a bit broken on mobile). In the marketing example specifically, though, there are still TypeScript errors, so we gotta tackle that! :)

@cipherlogs
Copy link
Contributor Author

Great work @danilo-leal, I have added the correct types and fixed all linting error. everything is passing now 👍

@danilo-leal danilo-leal changed the base branch from master to next March 19, 2024 13:50
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.

🚀

@danilo-leal danilo-leal merged commit 4e339c6 into mui:next Mar 19, 2024
19 checks passed
pluvio72 pushed a commit to pluvio72/material-ui that referenced this pull request Mar 29, 2024
…age (mui#41497)

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 docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants