From bc9d8f0b3cde4aa59242b7cb2efe973be7412aa8 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Wed, 15 Jan 2025 19:34:49 -0500
Subject: [PATCH] feat: fix INfrastructure counter

---
 .../Components/TabPanels/Account/TeamPanel.jsx    |  2 +-
 Client/src/Pages/Infrastructure/index.jsx         | 15 ++++++++++-----
 .../Pages/Uptime/Home/UptimeDataTable/index.jsx   |  4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 6b4389f24..59e19cfc2 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -290,7 +290,7 @@ const TeamPanel = () => {
 					<LoadingButton
 						loading={isSendingInvite}
 						variant="text"
-						color="info"
+						color="error"
 						onClick={closeInviteModal}
 					>
 						Cancel
diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index dd5a75be3..08636a05e 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -234,14 +234,19 @@ function Infrastructure() {
 							}}
 						>
 							<Heading component="h2">Infrastructure monitors</Heading>
-							{/* TODO Correct the class current-monitors-counter, there are some unnecessary things there	 */}
+							{/* TODO Same as the one in UptimaDataTable. Create component */}
 							<Box
 								component="span"
-								className="current-monitors-counter"
-								color={theme.palette.primary.contrastText}
-								border={1}
-								borderColor={theme.palette.primary.lowContrast}
+								color={theme.palette.tertiary.contrastText}
+								border={2}
+								borderColor={theme.palette.accent.main}
 								backgroundColor={theme.palette.tertiary.main}
+								sx={{
+									padding: ".25em .75em",
+									borderRadius: "50%",
+									fontSize: "12px",
+									fontWeight: 500,
+								}}
 							>
 								{summary?.totalMonitors ?? 0}
 							</Box>
diff --git a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx
index bd4b73aa4..6961c6d5c 100644
--- a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx
+++ b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx
@@ -225,9 +225,9 @@ const UptimeDataTable = ({
 				gap={theme.spacing(2)}
 			>
 				<Heading component="h2">Uptime monitors</Heading>
-
+				{/* TODO Same as the one in Infrastructure. Create component */}
 				<Box
-					className="current-monitors-counter"
+					component="span"
 					color={theme.palette.tertiary.contrastText}
 					border={2}
 					borderColor={theme.palette.accent.main}