From 5f1a0df43e7389bbfd74dc8525303f0a68bc55a2 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 28 May 2022 18:05:33 -0500
Subject: [PATCH] opacity if they aren't here?

---
 packages/desktop/src/components/Terminal.tsx | 42 ++++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx
index 577eb8f..77461e0 100644
--- a/packages/desktop/src/components/Terminal.tsx
+++ b/packages/desktop/src/components/Terminal.tsx
@@ -555,25 +555,33 @@ function ConversationDetails() {
         alignItems={'center'}
         justifyContent={'flex-start'}
       >
-        <Stack spacing={2} direction={'row'} alignItems={'center'}>
-          <AvatarGroup variant={'rounded'}>
-            {conversationUsers.map((conversationUser, index) => (
-              <Avatar
-                key={`${selectedConversation.id}-${conversationUser.uid}-convoIcon`}
-                alt={conversationUser?.displayName}
-                src={conversationUser?.photoUrl}
-                sx={{ width: 30, height: 30 }}
-              />
-            ))}
-          </AvatarGroup>
+        <IconButton color="primary" size="small">
+          <FiSun />
+        </IconButton>
 
-          <Typography sx={{ color: 'GrayText' }} variant={'overline'}>
-            {selectedConversation.name ??
-              conversationUsers.map((conversationUser) => conversationUser.displayName).join(', ')}
-          </Typography>
-        </Stack>
+        <Typography sx={{ color: 'GrayText' }} variant={'overline'}>
+          {selectedConversation.name ??
+            conversationUsers.map((conversationUser) => conversationUser.displayName).join(', ')}
+        </Typography>
 
-        <Box sx={{ ml: 'auto' }}>
+        <AvatarGroup variant={'rounded'} sx={{ ml: 'auto' }}>
+          {conversationUsers.map((conversationUser, index) => (
+            <Avatar
+              key={`${selectedConversation.id}-${conversationUser.uid}-convoIcon`}
+              alt={conversationUser?.displayName}
+              src={conversationUser?.photoUrl}
+              sx={{
+                width: 30,
+                height: 30,
+                opacity: selectedConversation.membersInRoom.includes(conversationUser.uid)
+                  ? '100%'
+                  : '20%',
+              }}
+            />
+          ))}
+        </AvatarGroup>
+
+        <Box>
           <IconButton size="small">
             <FiMoreVertical />
           </IconButton>