From c9cd00e141867e8971679b7987696c9c2dc7658f Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 28 May 2022 00:23:43 -0500
Subject: [PATCH] nicer list view and grayscale and all

---
 packages/desktop/src/components/Terminal.tsx | 107 ++++++++-----------
 packages/desktop/src/mui/NirvanaTheme.ts     |  15 +++
 2 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx
index 5c95013..4ab7f9c 100644
--- a/packages/desktop/src/components/Terminal.tsx
+++ b/packages/desktop/src/components/Terminal.tsx
@@ -11,6 +11,7 @@ import {
   List,
   ListItem,
   ListItemAvatar,
+  ListItemButton,
   ListItemText,
   ListSubheader,
   Stack,
@@ -97,53 +98,31 @@ export default function Terminal() {
             }
           >
             <ListItem>
-              <ListItemAvatar>
-                <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
-              </ListItemAvatar>
+              <ListItemButton>
+                <ListItemAvatar>
+                  <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+                </ListItemAvatar>
 
-              <ListItemText
-                primary="Viet"
-                secondary={
-                  <React.Fragment>
-                    <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>
-                }
-              />
+                <ListItemText primary="Viet" />
+
+                <Typography variant={'caption'}>20 sec</Typography>
+              </ListItemButton>
             </ListItem>
 
             <ListItem>
-              <ListItemAvatar>
-                <NirvanaAvatar
-                  avatars={[
-                    { alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
-                  ]}
-                />
-              </ListItemAvatar>
+              <ListItemButton>
+                <ListItemAvatar>
+                  <NirvanaAvatar
+                    avatars={[
+                      { alt: 'Arjun Patel', src: 'https://mui.com/static/images/avatar/3.jpg' },
+                    ]}
+                  />
+                </ListItemAvatar>
 
-              <ListItemText
-                primary="Agnes"
-                secondary={
-                  <React.Fragment>
-                    <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>
-                }
-              />
+                <ListItemText primary="Agnes" />
+
+                <Typography variant={'caption'}>34 min ago</Typography>
+              </ListItemButton>
             </ListItem>
           </List>
 
@@ -161,31 +140,39 @@ export default function Terminal() {
             }
           >
             <ListItem>
-              <ListItemAvatar>
-                <Avatar
-                  sx={{ height: 25, width: 25 }}
-                  alt={'Arjun Patel'}
-                  src="https://mui.com/static/images/avatar/5.jpg"
-                />
-              </ListItemAvatar>
+              <ListItemButton sx={{ opacity: 0.5 }}>
+                <ListItemAvatar>
+                  <Avatar
+                    sx={{
+                      filter: `grayscale(1)`,
+                    }}
+                    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>
-              <ListItemAvatar>
-                <Avatar
-                  sx={{ height: 25, width: 25 }}
-                  alt={'Arjun Patel'}
-                  src="https://mui.com/static/images/avatar/4.jpg"
-                />
-              </ListItemAvatar>
+              <ListItemButton sx={{ opacity: 0.5 }}>
+                <ListItemAvatar>
+                  <Avatar
+                    sx={{
+                      filter: `grayscale(1)`,
+                    }}
+                    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>
           </List>
         </Stack>
diff --git a/packages/desktop/src/mui/NirvanaTheme.ts b/packages/desktop/src/mui/NirvanaTheme.ts
index ac576f1..ff23b0f 100644
--- a/packages/desktop/src/mui/NirvanaTheme.ts
+++ b/packages/desktop/src/mui/NirvanaTheme.ts
@@ -44,6 +44,21 @@ export const NirvanaTheme = createTheme({
       },
     },
 
+    MuiListItem: {
+      defaultProps: {
+        disableGutters: true,
+        disablePadding: true,
+      },
+    },
+
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 5,
+        },
+      },
+    },
+
     MuiListSubheader: {
       styleOverrides: {
         root: {