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>{
+    <Typography component="h3" variant="h6" gutterBottom>Noms</Typography>
-        names.length === 0 ? <em>Aucun nom défini</em> : names.join(', ')
+    {
-      }</li>
+      names.length === 0
-      <li>{
+        ? <em>Aucun nom défini</em>
-        users.length === 0
+        : names.map(name => {
-          ? <em>Aucun utilisateur défini</em>
+            return <><Chip label={name} variant="outlined" /><br/></>
-          : 'Utilisée par ' + users.join(', ')
+          })
-      }</li>
+    }
-    </ul>
+
+    <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>