From 322969daa78558e55143315897a9cdb4c1cb5b19 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Mon, 12 Jul 2021 18:55:28 +0200
Subject: [PATCH] Improve page appearance

---
 src/ui/routes/ComunicUserRoute.tsx | 75 ++++++++++++++++++------------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/ui/routes/ComunicUserRoute.tsx b/src/ui/routes/ComunicUserRoute.tsx
index de1520b..80797ed 100644
--- a/src/ui/routes/ComunicUserRoute.tsx
+++ b/src/ui/routes/ComunicUserRoute.tsx
@@ -102,6 +102,30 @@ export class ComunicUserRoute extends React.Component<
 	}
 
 	build() {
+		const properties = this.userProperties.map((p) => {
+			return (
+				<TableRow key={p.name} hover>
+					<TableCell
+						style={{
+							fontWeight: "bold",
+						}}
+					>
+						{p.name}
+					</TableCell>
+					<TableCell>
+						{p.child != null
+							? p.child
+							: p.bool != null
+							? p.bool
+								? "Yes"
+								: "No"
+							: p.value == null
+							? "Undefined"
+							: p.value}
+					</TableCell>
+				</TableRow>
+			);
+		});
 		return (
 			<>
 				<PageTitle
@@ -109,36 +133,29 @@ export class ComunicUserRoute extends React.Component<
 				/>
 
 				<Grid container spacing={3}>
-					<Grid item xs={6}>
+					<Grid item xs={12}>
 						<CustomCard title="General information">
-							<Table>
-								<TableBody>
-									{this.userProperties.map((p) => {
-										return (
-											<TableRow key={p.name}>
-												<TableCell
-													style={{
-														fontWeight: "bold",
-													}}
-												>
-													{p.name}
-												</TableCell>
-												<TableCell>
-													{p.child != null
-														? p.child
-														: p.bool != null
-														? p.bool
-															? "Yes"
-															: "No"
-														: p.value == null
-														? "Undefined"
-														: p.value}
-												</TableCell>
-											</TableRow>
-										);
-									})}
-								</TableBody>
-							</Table>
+							<Grid container>
+								<Grid item xs={6}>
+									<Table>
+										<TableBody>
+											{properties.slice(
+												0,
+												properties.length / 2
+											)}
+										</TableBody>
+									</Table>
+								</Grid>
+								<Grid item xs={6}>
+									<Table>
+										<TableBody>
+											{properties.slice(
+												properties.length / 2
+											)}
+										</TableBody>
+									</Table>
+								</Grid>
+							</Grid>
 						</CustomCard>
 					</Grid>
 				</Grid>