nicer list view and grayscale and all
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user