feat: fix INfrastructure counter

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

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>

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}