bug fix in userList

Author: Eliza612

app/src/components/left/RoomsContainer.tsx

@@ -386,7 +386,10 @@ const RoomsContainer = () => {
         </Typography>
         {userJoined ? (
           <>
-            <Typography variant="h6" color="#898a8b">
+            <Typography
+              variant="h6"
+              color={userColors[userList.indexOf(userName)]}
+            >
               Nickname: {userName}
             </Typography>
             <Typography
@@ -429,7 +432,7 @@ const RoomsContainer = () => {
                   >
                     <ListItemText
                       primary={`${index + 1}. ${
-                        index === 0 ? `${user.userName} (host)` : user.userName
+                        index === 0 ? `${user} (host)` : user
                       }`}
                       style={{ color: userColors[userList.indexOf(user)] }}
                     />

server/server.ts

@@ -159,10 +159,13 @@ io.on('connection', (client) => {
 
           if (newClientResponse[0].status === 'confirmed') {
             client.join(roomCode); //client joining a room
+            const usernNames = Object.values(roomLists[roomCode]).map(
+              (el) => el['userName']
+            );
             io.to(roomCode).emit(
               'updateUserList',
               {
-                userList: Object.values(roomLists[roomCode])
+                userList: usernNames
               } // send updated userList to all users in room
             );
             io.to(roomCode).emit('new chat message', {
@@ -197,8 +200,11 @@ io.on('connection', (client) => {
       delete roomLists[roomCode];
     } else {
       //else emit updated user list
+      const usernNames = Object.values(roomLists[roomCode]).map(
+        (el) => el['userName']
+      );
       io.to(roomCode).emit('updateUserList', {
-        userList: Object.values(roomLists[roomCode])
+        userList: usernNames
       });
       io.to(roomCode).emit('new chat message', {
         userName,