From 30b2f3c3fa442eddb74fbefd2d6c772c290e7653 Mon Sep 17 00:00:00 2001
From: Benjamin Arias <benjamin.j.arias@gmail.com>
Date: Wed, 15 Mar 2023 14:11:40 +0100
Subject: [PATCH] feat: utilise liste

---
 site/source/design-system/popover/Popover.tsx |  1 -
 .../statistiques/DemandesUtilisateurs.tsx     | 56 ++++++++++++-------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx
index 17b34910a..36ad38b61 100644
--- a/site/source/design-system/popover/Popover.tsx
+++ b/site/source/design-system/popover/Popover.tsx
@@ -72,7 +72,6 @@ export default function Popover(
 	if (offsetTop === undefined) {
 		return null
 	}
-	console.log({ title, titleProps })
 
 	return (
 		<OverlayContainer aria-modal={true}>
diff --git a/site/source/pages/statistiques/DemandesUtilisateurs.tsx b/site/source/pages/statistiques/DemandesUtilisateurs.tsx
index 900d31cab..8b0f5c24e 100644
--- a/site/source/pages/statistiques/DemandesUtilisateurs.tsx
+++ b/site/source/pages/statistiques/DemandesUtilisateurs.tsx
@@ -65,14 +65,15 @@ function Pagination({ items }: PaginationProps) {
 			</Ul>
 			<Pager>
 				{[...Array(Math.ceil(items.length / 10)).keys()].map((i) => (
-					<PagerButton
-						onClick={() => setCurrentPage(i)}
-						currentPage={currentPage === i}
-						aria-selected={currentPage === i ? true : undefined}
-						key={i}
-					>
-						{i + 1}
-					</PagerButton>
+					<li key={i}>
+						<PagerButton
+							onClick={() => setCurrentPage(i)}
+							currentPage={currentPage === i}
+							aria-selected={currentPage === i ? true : undefined}
+						>
+							{i + 1}
+						</PagerButton>
+					</li>
 				))}
 			</Pager>
 		</>
@@ -116,7 +117,6 @@ const PagerButton = styled.button<PagerButtonProps>`
 		currentPage
 			? `2px solid ${theme.colors.bases.primary[500]}`
 			: `1px solid ${theme.colors.extended.grey[300]}`};
-	margin-right: 0.25rem;
 	background-color: ${({ theme, currentPage }) =>
 		currentPage
 			? theme.colors.bases.primary[100]
@@ -125,21 +125,35 @@ const PagerButton = styled.button<PagerButtonProps>`
 	&:hover {
 		background-color: ${({ theme }) => theme.colors.bases.primary[100]};
 	}
-
-	&:first-child {
-		border-top-left-radius: 0.25rem;
-		border-bottom-left-radius: 0.25rem;
-	}
-
-	&:last-child {
-		border-top-right-radius: 0.25rem;
-		border-bottom-right-radius: 0.25rem;
-		margin-right: 0;
-	}
 `
 
-const Pager = styled.div`
+const Pager = styled.ul`
 	font-family: ${({ theme }) => theme.fonts.main};
 	text-align: center;
 	margin: auto;
+
+	& li {
+		list-style: none;
+		display: inline-block;
+		margin-right: 0.25rem;
+	}
+
+	& li:first-child {
+		button {
+			border-top-left-radius: 0.25rem;
+			border-top-right-radius: 0;
+			border-bottom-left-radius: 0.25rem;
+			border-bottom-right-radius: 0;
+		}
+	}
+
+	& li:last-child {
+		button {
+			border-top-right-radius: 0.25rem;
+			border-bottom-right-radius: 0.25rem;
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			margin-right: 0;
+		}
+	}
 `