Merge pull request #15 from oslabs-beta/laura

Cursor color matching and multi-users in collab room

Author: Skilzsz

app/src/components/left/RoomsContainer.tsx

@@ -162,6 +162,8 @@ const RoomsContainer = () => {
     return userName.length === 0 || roomCode.length === 0;
   }
 
+  const userColors = ['#FC00BD', '#D0FC00', '#00DBFC', '#FD98B8', '#FCAA00', '#9267FF'];
+
   return (
     <div>
       <Stack //stack styling for container
@@ -178,7 +180,7 @@ const RoomsContainer = () => {
         <Typography variant="h5" color={'#f2fbf8'}>
           Live Room: {roomCode}
         </Typography>
-        <Typography variant="h6" color={'#70d8be'}>
+        <Typography variant="h6" color={userColors[userList.indexOf(userName)]}>
           Nickname: {userName}
         </Typography>
         {/*  Set up condition rendering depends on if user joined a room then render leave button if not render join button */}
@@ -221,15 +223,16 @@ const RoomsContainer = () => {
                   <ListItem
                     key={index}
                     sx={{
-                      color: '#f2fbf8',
                       textAlign: 'center',
-                      width: '100%'
+                      width: '100%',
+                      color: '#f2fbf8'
                     }}
                   >
                     <ListItemText
                       primary={`${index + 1}. ${
                         index === 0 ? `${user} (host)` : user
                       }`}
+                      style={{color: userColors[userList.indexOf(user)]}}
                     />
                   </ListItem>
                 ))}

app/src/components/main/Canvas.tsx

@@ -240,6 +240,8 @@ function Canvas(props: {}): JSX.Element {
     currentComponent.style
   );
 
+  const userColors = ['#FC00BD', '#D0FC00', '#00DBFC', '#FD98B8', '#FCAA00', '#9267FF'];
+
   return (
     <div
       className={'componentContainer'}
@@ -262,8 +264,8 @@ function Canvas(props: {}): JSX.Element {
                 left: cursor.x + 'px',
                 top: cursor.y - 68 + 'px',
                 //cursor style
-                fontSize: '40px',
-                color: '#46c0a5'
+                fontSize: '2em',
+                color: userColors[userList.indexOf(cursor.remoteUserName)]
               }}
             >
               {<GiBoba />}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactype",
-  "version": "18.0.0 by Sonya Hu, Hadrian Chan, Nam Ha, Rick McGrath",
+  "version": "19.0.0 by Rose Jiang, Laura Forden, Lauren Leer, Sean Kil",
   "description": "Prototyping tool for React/Typescript Applications.",
   "private": true,
   "main": "app/.electron/main.js",