nice little border to select a conversation

packages/desktop/src/tree/FooterControls.tsx

@@ -72,7 +72,6 @@ export default function FooterControls() {
     <Box
       sx={{
         maxWidth: 100,
-
         zIndex: 10,
         boxShadow: 10,
 
@@ -92,7 +91,16 @@ export default function FooterControls() {
         }}
       >
         {selectedConversation && (
-          <Stack direction={'column'} spacing={1}>
+          <Stack
+            direction={'column'}
+            spacing={1}
+            sx={{
+              bgcolor: blueGrey[200],
+              p: 1,
+              borderRadius: 2,
+            }}
+            alignItems={'center'}
+          >
             <AvatarGroup
               variant={'rounded'}
               sx={{
@@ -122,10 +130,7 @@ export default function FooterControls() {
                 />
               ))}
             </AvatarGroup>
-          </Stack>
-        )}
 
-        <Stack sx={{ mt: 'auto' }} spacing={1} direction={'column'} alignItems={'center'}>
             <Divider orientation="horizontal" flexItem />
 
             <Tooltip title="Show video!">
@@ -150,6 +155,11 @@ export default function FooterControls() {
                 <FiSun />
               </IconButton>
             </Tooltip>
+          </Stack>
+        )}
+
+        <Stack sx={{ mt: 'auto' }} spacing={1} direction={'column'} alignItems={'center'}>
+          <Divider orientation="horizontal" flexItem />
 
           <Divider orientation="horizontal" flexItem />