From d097501c3d5806c9e57b94a6e26286e6cf7240f9 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 25 Jun 2022 16:56:06 -0500
Subject: [PATCH] shifting things around so that convo header is cleaner and
 have footer for displaying videos

---
 packages/desktop/src/tree/MainPanel.tsx | 69 ++++++++++++++-----------
 packages/desktop/src/tree/Terminal.tsx  |  2 +-
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/packages/desktop/src/tree/MainPanel.tsx b/packages/desktop/src/tree/MainPanel.tsx
index 2cf4820..521ae2a 100644
--- a/packages/desktop/src/tree/MainPanel.tsx
+++ b/packages/desktop/src/tree/MainPanel.tsx
@@ -79,10 +79,17 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
     <Container
       maxWidth={false}
       disableGutters
-      sx={{ maxHeight: '100vh', display: 'flex', flexDirection: 'column' }}
+      sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
     >
-      {/* conversation header details and controls */}
-      <Box className={'titlebar'} sx={{ p: 2, boxShadow: 3, zIndex: 10 }} flexDirection={'column'}>
+      {/* conversation header */}
+      <Box
+        className={'titlebar'}
+        sx={{
+          p: 1,
+          borderBottom: `1px solid`,
+          borderBottomColor: blueGrey[50],
+        }}
+      >
         <Stack direction="row" alignItems="center">
           <IconButton color="primary" size="small">
             <FiSun />
@@ -102,20 +109,6 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
             }}
             spacing={1}
           >
-            <Tooltip title="Paste image or link!">
-              <IconButton size="small">
-                <FiLink />
-              </IconButton>
-            </Tooltip>
-
-            <Tooltip title="Share screen!">
-              <IconButton size="small">
-                <FiAirplay />
-              </IconButton>
-            </Tooltip>
-
-            <Divider orientation={'vertical'} flexItem />
-
             <Tooltip title="Add people to the conversation">
               <IconButton size="small">
                 <FiUserPlus />
@@ -123,19 +116,6 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
             </Tooltip>
           </Stack>
         </Stack>
-
-        {/* live video and screenshares */}
-        <Stack direction="row" alignItems={'center'}>
-          {masterConversation.room &&
-            Object.entries(masterConversation.room).map(([userId, userPeerContents]) => {
-              return (
-                <Video
-                  key={`userPeerRenderConvoDetails-${userId}`}
-                  stream={userPeerContents.stream}
-                />
-              );
-            })}
-        </Stack>
       </Box>
 
       <Stack direction={'column'} sx={{ flex: 1, overflowY: 'auto' }}>
@@ -325,6 +305,35 @@ function ConversationDetails({ masterConversation }: { masterConversation: Maste
           </Stack>
         </Container>
       </Stack>
+
+      <Box sx={{ p: 2, boxShadow: 3, zIndex: 10 }} flexDirection={'column'} mt={'auto'}>
+        {/* live video and screenshares */}
+        <Stack direction="row" alignItems={'center'}>
+          {masterConversation.room &&
+            Object.entries(masterConversation.room).map(([userId, userPeerContents]) => {
+              return (
+                <Video
+                  key={`userPeerRenderConvoDetails-${userId}`}
+                  stream={userPeerContents.stream}
+                />
+              );
+            })}
+        </Stack>
+
+        <Stack direction="row" alignItems="center" justifyContent={'flex-end'}>
+          <Tooltip title="Paste image or link!">
+            <IconButton size="small">
+              <FiLink />
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="Share screen!">
+            <IconButton size="small">
+              <FiAirplay />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+      </Box>
     </Container>
   );
 }
diff --git a/packages/desktop/src/tree/Terminal.tsx b/packages/desktop/src/tree/Terminal.tsx
index f2c81b3..4cd14b4 100644
--- a/packages/desktop/src/tree/Terminal.tsx
+++ b/packages/desktop/src/tree/Terminal.tsx
@@ -39,7 +39,7 @@ export default function Terminal() {
               item
               xs={4}
               sx={{
-                zIndex: 2,
+                zIndex: 10,
                 backgroundColor: blueGrey[50],
                 boxShadow: 3,
                 borderRight: `1px solid ${blueGrey}`,