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

[docs] Tree view color fix for dark mode in Gmail example #37051

Merged

Conversation

PunitSoniME
Copy link
Contributor

@PunitSoniME PunitSoniME commented Apr 27, 2023

resolves #36197

Old PR ( discussion ) - #36201

@mui-bot
Copy link

mui-bot commented Apr 27, 2023

Netlify deploy preview

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

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against a604896

@PunitSoniME
Copy link
Contributor Author

@mj12albert

Did you get a chance to find the better dark mode colors ?

@PunitSoniME PunitSoniME force-pushed the fix/36197-gmail-tree-view-dark-mode-fix branch from 149ece7 to 0b95952 Compare April 27, 2023 09:49
resolves #36197

build fail fixed

prettier executed
@PunitSoniME PunitSoniME force-pushed the fix/36197-gmail-tree-view-dark-mode-fix branch from 910e9f3 to 3047839 Compare April 27, 2023 09:53
@zannager zannager added docs Improvements or additions to the documentation component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Apr 27, 2023
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Jun 6, 2023

@danilo-leal @zanivan Can you provide the background-color and color for dark mode of the Gmail Clone example at this URL: https://deploy-preview-37051--material-ui.netlify.app/material-ui/react-tree-view/#gmail-clone? The pending colors is blocking the PR.

@zanivan
Copy link
Contributor

zanivan commented Jun 8, 2023

Hey @ZeeshanTamboli you can use these colors at the dark mode:

Social

  • icon: #29B6F6
  • bg-color: #071318
  • color: #B8E7FB

Updates

  • icon: #FFA726
  • bg-color: #191207
  • color: #FFE2B7

Forums

  • icon: #8F29F6
  • bg-color: #100719
  • color: #D9B8FB

Promotions

  • icon: #66BB6A
  • bg-color: #0C130D
  • color: #CCE8CD

Those colors are currently being applied on the alerts, and I believe it'd be good to use the same ones.

@PunitSoniME
Copy link
Contributor Author

Done

@zanivan thanks for your suggestion of colors.

Can someone review the code and check the changes please ?

cc - @ZeeshanTamboli

Copy link
Member

@samuelsycamore samuelsycamore left a comment

Choose a reason for hiding this comment

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

LGTM! But I'll leave it up to the designers for the final review. 🫡 Thanks @PunitSoniME !

@ZeeshanTamboli ZeeshanTamboli added the bug 🐛 Something doesn't work label Jun 15, 2023
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

Need few changes.

@ZeeshanTamboli ZeeshanTamboli changed the title [docs] Tree view color fix for dark mode [docs] Tree view color fix for dark mode in Gmail examples Jun 15, 2023
@ZeeshanTamboli ZeeshanTamboli changed the title [docs] Tree view color fix for dark mode in Gmail examples [docs] Tree view color fix for dark mode in Gmail example Jun 15, 2023
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

Also, I don't understand why this was changed from using the styled utility to the sx prop. It could have been done using the styled API, which would have been more readable and performant unless there's a specific reason for using the sx prop.

Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

I pushed the requested changes. Let's get it out in the upcoming release.

@ZeeshanTamboli ZeeshanTamboli merged commit 511a2f8 into mui:master Jun 19, 2023
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs] Tree View Gmail example
6 participants