pop that shit

packages/desktop/src/subcomponents/ConversationLabel.tsx

@@ -5,7 +5,7 @@ import { User } from '@nirvana/core/src/models/user.model';
 import { Typography } from '@mui/material';
 import useAuth from '../providers/AuthProvider';
 
-type IConversationLabel =
+type IConversationLabel = (
   | {
       conversationName?: string;
       users: User[];
@@ -13,18 +13,28 @@ type IConversationLabel =
   | {
       conversationName: string;
       users?: User[];
-    };
+    }
+) & { isSelected?: boolean };
 
 /**
  * if there is a name in the conversation, then return that
  * if not, then return first three names
  */
-export default function ConversationLabel({ conversationName, users }: IConversationLabel) {
+export default function ConversationLabel({
+  conversationName,
+  users,
+  isSelected = false,
+}: IConversationLabel) {
   const { user } = useAuth();
 
   if (conversationName) {
     return (
-      <Typography noWrap variant="overline">
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
         {conversationName}
       </Typography>
     );
@@ -36,7 +46,12 @@ export default function ConversationLabel({ conversationName, users }: IConversa
     const firstName = filteredUsers[0].displayName.split(' ')[0];
 
     return (
-      <Typography noWrap variant="overline">
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
         {firstName}
       </Typography>
     );
@@ -48,7 +63,12 @@ export default function ConversationLabel({ conversationName, users }: IConversa
     const formattedFirstnames = firstNames.slice(0, -1).join(',') + ' and ' + firstNames.slice(-1);
 
     return (
-      <Typography noWrap variant="overline">
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
         {formattedFirstnames}
       </Typography>
     );