Design

src/App.js

@@ -140,16 +140,27 @@ function RoomInformation({ roomId, setIsEditDialogOpen }) {
     <Typography component="h2" variant="h5" gutterBottom>
       Salle sélectionnée
     </Typography>
-    <ul>
-      <li>{
-        names.length === 0 ? <em>Aucun nom défini</em> : names.join(', ')
-      }</li>
-      <li>{
-        users.length === 0
-          ? <em>Aucun utilisateur défini</em>
-          : 'Utilisée par ' + users.join(', ')
-      }</li>
-    </ul>
+
+    <Typography component="h3" variant="h6" gutterBottom>Noms</Typography>
+    {
+      names.length === 0
+        ? <em>Aucun nom défini</em>
+        : names.map(name => {
+            return <><Chip label={name} variant="outlined" /><br/></>
+          })
+    }
+
+    <Typography component="h3" variant="h6" gutterBottom>Utilisateurs</Typography>
+    <div>
+    {
+      users.length === 0
+        ? <em>Aucun utilisateur défini</em>
+        : users.map(name => {
+            return <><Chip label={name} variant="outlined" /><br/></>
+          })
+    }
+    </div>
+
     <Button startIcon={<EditIcon />} onClick={() => { setIsEditDialogOpen(true) }}>
       Modifier
     </Button>