From 25c2cd5966b74ce4f3d91a7199a86d67e684d661 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 28 May 2022 01:16:51 -0500
Subject: [PATCH] nice elevation simple playback history

getting faster and faster at this mui thing
---
 packages/desktop/src/components/Terminal.tsx | 99 +++++++++++++++++++-
 1 file changed, 96 insertions(+), 3 deletions(-)

diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx
index ffac62d..96cd523 100644
--- a/packages/desktop/src/components/Terminal.tsx
+++ b/packages/desktop/src/components/Terminal.tsx
@@ -16,12 +16,13 @@ import {
   ListItemButton,
   ListItemText,
   ListSubheader,
+  Paper,
   Stack,
   Typography,
 } from '@mui/material';
 import NirvanaLogo from './NirvanaLogo';
 import { blueGrey } from '@mui/material/colors';
-import { FiActivity, FiInbox, FiMoreVertical, FiSearch, FiSun } from 'react-icons/fi';
+import { FiActivity, FiInbox, FiMoreVertical, FiPlay, FiSearch, FiSun } from 'react-icons/fi';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { useSnackbar } from 'notistack';
 import { useKey } from 'react-use';
@@ -208,9 +209,101 @@ export default function Terminal() {
         </Stack>
 
         <Container maxWidth={false} sx={{ position: 'relative', flex: 1 }}>
-          <Container maxWidth="sm">
-            <Stack justifyContent={'flex-start'} alignItems={'center'}>
+          <Container maxWidth="xs">
+            <Stack
+              justifyContent={'flex-start'}
+              alignItems={'center'}
+              sx={{
+                pt: 2,
+              }}
+            >
               <Typography variant="caption">yesterday</Typography>
+
+              <Paper elevation={1} sx={{ p: 1, width: '100%' }}>
+                <Stack direction={'row'} alignItems="center">
+                  <Stack spacing={2} direction={'row'} alignItems={'center'}>
+                    <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+
+                    <Typography color={'GrayText'} variant="overline">
+                      {'Viet Phan'}
+                    </Typography>
+                  </Stack>
+
+                  <Box
+                    sx={{
+                      ml: 'auto',
+                      color: 'GrayText',
+                    }}
+                  >
+                    <FiPlay />
+                  </Box>
+                </Stack>
+              </Paper>
+            </Stack>
+
+            <Stack
+              justifyContent={'flex-start'}
+              alignItems={'center'}
+              sx={{
+                pt: 2,
+              }}
+            >
+              <Typography variant="caption">today</Typography>
+
+              <Paper elevation={8} sx={{ p: 1, width: '100%' }}>
+                <Stack direction={'row'} alignItems="center">
+                  <Stack spacing={2} direction={'row'} alignItems={'center'}>
+                    <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+
+                    <Typography color={'GrayText'} variant="overline">
+                      {'Viet Phan'}
+                    </Typography>
+                  </Stack>
+
+                  <Box
+                    sx={{
+                      ml: 'auto',
+                      color: 'GrayText',
+                    }}
+                  >
+                    <FiPlay />
+                  </Box>
+                </Stack>
+              </Paper>
+            </Stack>
+
+            <Stack
+              justifyContent={'flex-start'}
+              alignItems={'center'}
+              sx={{
+                pt: 2,
+              }}
+            >
+              <Typography variant="caption">right now</Typography>
+
+              <Paper elevation={24} sx={{ p: 1, width: '100%' }}>
+                <Stack direction={'row'} alignItems="center">
+                  <Stack spacing={2} direction={'row'} alignItems={'center'}>
+                    <Avatar
+                      alt={'Arjun Patel'}
+                      src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
+                    />
+
+                    <Typography color={'GrayText'} variant="overline">
+                      {'Arjun Patel'}
+                    </Typography>
+                  </Stack>
+
+                  <Box
+                    sx={{
+                      ml: 'auto',
+                      color: 'GrayText',
+                    }}
+                  >
+                    <FiPlay />
+                  </Box>
+                </Stack>
+              </Paper>
             </Stack>
           </Container>