nicer list view and grayscale and all

This commit is contained in:
talksik
2022-05-28 00:23:43 -05:00
parent 76d229debd
commit c9cd00e141
2 changed files with 62 additions and 60 deletions
+47 -60
View File
@@ -11,6 +11,7 @@ import {
List, List,
ListItem, ListItem,
ListItemAvatar, ListItemAvatar,
ListItemButton,
ListItemText, ListItemText,
ListSubheader, ListSubheader,
Stack, Stack,
@@ -97,53 +98,31 @@ export default function Terminal() {
} }
> >
<ListItem> <ListItem>
<ListItemAvatar> <ListItemButton>
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" /> <ListItemAvatar>
</ListItemAvatar> <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
</ListItemAvatar>
<ListItemText <ListItemText primary="Viet" />
primary="Viet"
secondary={ <Typography variant={'caption'}>20 sec</Typography>
<React.Fragment> </ListItemButton>
<Typography
sx={{ display: 'inline' }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemButton>
<NirvanaAvatar <ListItemAvatar>
avatars={[ <NirvanaAvatar
{ alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' }, avatars={[
]} { alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
/> ]}
</ListItemAvatar> />
</ListItemAvatar>
<ListItemText <ListItemText primary="Agnes" />
primary="Agnes"
secondary={ <Typography variant={'caption'}>34 min ago</Typography>
<React.Fragment> </ListItemButton>
<Typography
sx={{ display: 'inline' }}
component="span"
variant="body2"
color="text.primary"
>
to Scott, Alex, Jennifer
</Typography>
{" — Wish I could come, but I'm out of town this…"}
</React.Fragment>
}
/>
</ListItem> </ListItem>
</List> </List>
@@ -161,31 +140,39 @@ export default function Terminal() {
} }
> >
<ListItem> <ListItem>
<ListItemAvatar> <ListItemButton sx={{ opacity: 0.5 }}>
<Avatar <ListItemAvatar>
sx={{ height: 25, width: 25 }} <Avatar
alt={'Arjun Patel'} sx={{
src="https://mui.com/static/images/avatar/5.jpg" filter: `grayscale(1)`,
/> }}
</ListItemAvatar> alt={'Arjun Patel'}
src="https://mui.com/static/images/avatar/5.jpg"
/>
</ListItemAvatar>
<ListItemText primary="James Lin" /> <ListItemText secondary="Jeremy Leon" sx={{ color: blueGrey[300] }} />
<Badge color="primary" badgeContent=" " variant="dot"></Badge> <Badge color="primary" badgeContent=" " variant="dot"></Badge>
</ListItemButton>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemButton sx={{ opacity: 0.5 }}>
<Avatar <ListItemAvatar>
sx={{ height: 25, width: 25 }} <Avatar
alt={'Arjun Patel'} sx={{
src="https://mui.com/static/images/avatar/4.jpg" filter: `grayscale(1)`,
/> }}
</ListItemAvatar> alt={'Arjun Patel'}
src="https://mui.com/static/images/avatar/4.jpg"
/>
</ListItemAvatar>
<ListItemText primary="Janet" /> <ListItemText secondary="James Lin" sx={{ color: blueGrey[300] }} />
<Typography variant={'caption'}>2 hours ago</Typography> <Typography variant={'caption'}>2 hours ago</Typography>
</ListItemButton>
</ListItem> </ListItem>
</List> </List>
</Stack> </Stack>
+15
View File
@@ -44,6 +44,21 @@ export const NirvanaTheme = createTheme({
}, },
}, },
MuiListItem: {
defaultProps: {
disableGutters: true,
disablePadding: true,
},
},
MuiListItemButton: {
styleOverrides: {
root: {
borderRadius: 5,
},
},
},
MuiListSubheader: { MuiListSubheader: {
styleOverrides: { styleOverrides: {
root: { root: {