bunch of nice cleanup of layout

packages/desktop/src/components/ConversationList.tsx

@@ -52,9 +52,6 @@ export function ConversationList({ lookingForSomeone = false }: { lookingForSome
   return (
     <>
       <List
-        sx={{
-          pt: 2,
-        }}
         subheader={
           <ListSubheader>
             <FiActivity />

packages/desktop/src/components/Navbar.tsx

@@ -51,7 +51,7 @@ const Navbar = ({
       sx={{
         WebkitAppRegion: 'drag',
         cursor: 'pointer',
-        pb: 1,
+        p: 2,
       }}
     >
       <NirvanaLogo />

packages/desktop/src/components/Terminal.tsx

@@ -512,21 +512,18 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
             backgroundColor: blueGrey[50],
             boxShadow: 3,
             borderRight: `1px solid ${blueGrey}`,
+
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
-          <Stack
+          <Navbar
-            direction={'column'}
+            searchVal={searchVal}
-            spacing={1}
+            isSearching={searching}
-            sx={{
+            handleChangeSearchInput={handleChangeSearchInput}
-              p: 2,
+          />
-            }}
-          >
-            <Navbar
-              searchVal={searchVal}
-              isSearching={searching}
-              handleChangeSearchInput={handleChangeSearchInput}
-            />
 
+          <Box sx={{ p: 2 }}>
             {searchVal ? (
               <ListPeople people={searchUsersResults} />
             ) : (
@@ -534,110 +531,110 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
                 lookingForSomeone={selectedConversationId && !selectedConversation}
               />
             )}
+          </Box>
 
-            {/* footer controls */}
+          {/* footer controls */}
-            <Box
+          <Box
+            sx={{
+              mt: 'auto',
+
+              borderTop: '1px solid',
+              borderTopColor: blueGrey[100],
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              gap: 2,
+              width: '100%',
+            }}
+          >
+            <Stack
+              spacing={1}
+              direction={'row'}
+              alignItems={'center'}
+              justifyContent={'flex-start'}
               sx={{
-                mt: 'auto',
+                color: 'GrayText',
-
+                p: 1,
-                borderTop: '1px solid',
+                flex: 1,
-                borderTopColor: blueGrey[100],
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                gap: 2,
-                width: '100%',
               }}
             >
-              <Stack
+              <IconButton
-                spacing={1}
+                onClick={handleClick}
-                direction={'row'}
+                size="small"
-                alignItems={'center'}
+                sx={{ mr: 'auto', borderRadius: 1 }}
-                justifyContent={'flex-start'}
+                aria-controls={open ? 'account-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+              >
+                <Avatar alt={user.displayName} src={user.photoURL} />
+              </IconButton>
+
+              <Box
                 sx={{
-                  color: 'GrayText',
+                  mr: 'auto',
-                  p: 1,
-                  flex: 1,
                 }}
+                component="div"
               >
-                <IconButton
+                <Button size={'small'} color={'secondary'} variant="text">
-                  onClick={handleClick}
+                  flow
-                  size="small"
+                </Button>
-                  sx={{ mr: 'auto', borderRadius: 1 }}
+              </Box>
-                  aria-controls={open ? 'account-menu' : undefined}
+
-                  aria-haspopup="true"
+              <Tooltip title="Sound configuration">
-                  aria-expanded={open ? 'true' : undefined}
+                <IconButton color="inherit" size="small">
-                >
+                  <FiHeadphones />
-                  <Avatar alt={user.displayName} src={user.photoURL} />
                 </IconButton>
+              </Tooltip>
+              <Tooltip title="Desktop modes">
+                <IconButton color="inherit" size="small">
+                  <FiMonitor />
+                </IconButton>
+              </Tooltip>
+            </Stack>
 
-                <Box
+            <Menu
-                  sx={{
+              anchorEl={anchorEl}
-                    mr: 'auto',
+              id="account-menu"
-                  }}
+              open={open}
-                  component="div"
+              onClose={handleClose}
-                >
+              onClick={handleClose}
-                  <Button size={'small'} color={'secondary'} variant="text">
+              PaperProps={{
-                    flow
+                elevation: 0,
-                  </Button>
+                sx: {
-                </Box>
+                  overflow: 'visible',
-
+                  filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                <Tooltip title="Sound configuration">
+                  mt: 1.5,
-                  <IconButton color="inherit" size="small">
+                  '& .MuiAvatar-root': {
-                    <FiHeadphones />
+                    width: 32,
-                  </IconButton>
+                    height: 32,
-                </Tooltip>
+                    ml: -0.5,
-                <Tooltip title="Desktop modes">
+                    mr: 1,
-                  <IconButton color="inherit" size="small">
-                    <FiMonitor />
-                  </IconButton>
-                </Tooltip>
-              </Stack>
-
-              <Menu
-                anchorEl={anchorEl}
-                id="account-menu"
-                open={open}
-                onClose={handleClose}
-                onClick={handleClose}
-                PaperProps={{
-                  elevation: 0,
-                  sx: {
-                    overflow: 'visible',
-                    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                    mt: 1.5,
-                    '& .MuiAvatar-root': {
-                      width: 32,
-                      height: 32,
-                      ml: -0.5,
-                      mr: 1,
-                    },
-                    '&:before': {
-                      content: '""',
-                      display: 'block',
-                      position: 'absolute',
-                      top: 0,
-                      right: 14,
-                      width: 10,
-                      height: 10,
-                      bgcolor: 'background.paper',
-                      transform: 'translateY(-50%) rotate(45deg)',
-                      zIndex: 0,
-                    },
                   },
-                }}
+                  '&:before': {
-                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                    content: '""',
-                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                    display: 'block',
-              >
+                    position: 'absolute',
-                <MenuItem onClick={logout}>
+                    top: 0,
-                  <ListItemIcon>
+                    right: 14,
-                    <FiLogOut />
+                    width: 10,
-                  </ListItemIcon>
+                    height: 10,
-                  <Typography color="warning">Logout</Typography>
+                    bgcolor: 'background.paper',
-                </MenuItem>
+                    transform: 'translateY(-50%) rotate(45deg)',
-              </Menu>
+                    zIndex: 0,
-            </Box>
+                  },
-          </Stack>
+                },
+              }}
+              transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+              anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+            >
+              <MenuItem onClick={logout}>
+                <ListItemIcon>
+                  <FiLogOut />
+                </ListItemIcon>
+                <Typography color="warning">Logout</Typography>
+              </MenuItem>
+            </Menu>
+          </Box>
         </Grid>
 
         <MainPanel />