From b8b16d8e41144a25beb76f357f5bcb3949801871 Mon Sep 17 00:00:00 2001
From: Adrien Vannson <adrien.vannson@protonmail.com>
Date: Wed, 1 Mar 2023 11:46:51 +0100
Subject: [PATCH] Design

---
 src/App.js | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5538124..b6886af 100644
--- a/src/App.js
+++ b/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>