From 1e44a1ec18a3c07a508b0b57f1efcff9308530ef Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Sun, 17 Nov 2024 19:01:27 -0500
Subject: [PATCH] feat: adding scrollbar styling

---
 Client/src/Pages/Infrastructure/index.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index cf8b86b23..c2bef32d4 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -135,7 +135,19 @@ function Infrastructure() {
 				</Stack>
 				<TableContainer
 					component={Paper}
-					sx={{ maxHeight: "55vh" }}
+					sx={{
+						maxHeight: "55vh",
+						"&::-webkit-scrollbar": {
+							width: ".75rem",
+						},
+						"&::-webkit-scrollbar-track": {
+							backgroundColor: theme.palette.secondary.light,
+						},
+						"&::-webkit-scrollbar-thumb": {
+							backgroundColor: theme.palette.secondary.contrastText,
+							outline: `1px solid ${theme.palette.secondary.contrastText}`,
+						},
+					}}
 				>
 					<Table stickyHeader>
 						<TableHead sx={{ backgroundColor: theme.palette.background.accent }}>
@@ -144,8 +156,9 @@ function Infrastructure() {
 									<TableCell
 										key={index}
 										align={index === 0 ? "left" : "center"}
-										/* TODO I don't understand why it was needed to pass this to override some #ffffff color from MUI here, but that wasn't needed in other pages.  */
-										sx={{ backgroundColor: "transparent" }}
+										sx={{
+											backgroundColor: theme.palette.background.accent,
+										}}
 									>
 										{column.label}
 									</TableCell>