refactor(manualaccountmenu): changing manual account menu to use MUI … - #373
refactor(manualaccountmenu): changing manual account menu to use MUI …#373wesrisenmay-mx wants to merge 3 commits into
Conversation
|
Before: (This is on sand which has an old widget version, so the changes include other changes that have been made) After: 
|
|
Is design fine with not having a divider between account types anymore? Also, the icon color now looking greyish? |
ash-wright123
left a comment
ash-wright123
left a comment
There was a problem hiding this comment.
LGTM, however I think we will need a ticket to remove the overrides when we move to mxui v2
| }, | ||
| }, | ||
| }, | ||
| MuiList: { |
There was a problem hiding this comment.
Do we need all these overrides? Why can’t we just use raw MUI components?
There was a problem hiding this comment.
VerifyExistingMember looks like it also uses the List component and seems to be affected by this override.
There was a problem hiding this comment.
Good call out.
The negative margin, button padding, and border radius are planned to be across the board connect widget specific changes. This allows us to keep the margins for the rest of the content, but bleed the mui list button padding into the margins, and line up the icon of the button with the rest of the text above it. If design changes their mind on this, then we'll have to revisit in the future.
The avatar changes are because MXUI only supports 1 specific size of avatar without configurability. I had to unset a bunch of stuff on the avatar as well as set a specific margin right. All the lists that are currently planned for the connect widget are using this same marginRight. All the lists that use MuiListItemAvatar in the connect widget have variable avatar sizes, so they shouldn't be specific like MXUI has it.
There was a problem hiding this comment.
I'm still thinking this through
Yes I worked with design to get where we are, and confirmed with Jen with the screenshot |
| <List dense={true}> | ||
| {typeList?.map((account_type) => ( | ||
| <Fragment key={account_type}> | ||
| <ListItem disableGutters={true}> |
There was a problem hiding this comment.
The disableGlutters prop is already set up in MXUI.
| marginRight: 12, | ||
| minWidth: 'unset', | ||
| width: undefined, | ||
| '& .MuiAvatar-root': { |
There was a problem hiding this comment.
I can't find anywhere an Avatar child is used that requires this override.
3 participants
…list instead of kyper