Merge pull request #1635 from YinDongFang/feature/style

Fix some UI style/Component bugs

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -625,8 +625,7 @@ const InfrastructureDetails = () => {
 						</ButtonGroup>
 					</Stack>
 					<Stack
-						direction={"row"}
-						height={chartContainerHeight} // FE team HELP!
+						direction="row"
 						gap={theme.spacing(8)} // FE team HELP!
 						flexWrap="wrap" // //FE team HELP! Better way to do this?
 						sx={{

Client/src/Pages/Infrastructure/index.jsx

@@ -137,13 +137,11 @@ function Infrastructure() {
 			id: "actions",
 			content: "Actions",
 			render: (row) => (
-				<IconButton>
-					<InfrastructureMenu
-						monitor={row}
-						isAdmin={isAdmin}
-						updateCallback={handleActionMenuDelete}
-					/>
-				</IconButton>
+				<InfrastructureMenu
+					monitor={row}
+					isAdmin={isAdmin}
+					updateCallback={handleActionMenuDelete}
+				/>
 			),
 		},
 	];
@@ -158,14 +156,12 @@ function Infrastructure() {
 		const uptimePercentage = ((monitor?.uptimePercentage ?? 0) * 100)
 			.toFixed(2)
 			.toString();
-		const percentageColor =
-			monitor.uptimePercentage < 0.25
-				? theme.palette.error.main
-				: monitor.uptimePercentage < 0.5
-					? theme.palette.percentage.uptimeFair
-					: monitor.uptimePercentage < 0.75
-						? theme.palette.percentage.uptimeGood
-						: theme.palette.success.lowContrast;
+		const percentageColor = monitor.uptimePercentage < 0.25
+			? theme.palette.error.main
+			: monitor.uptimePercentage < 0.5
+				? theme.palette.warning.main
+				: theme.palette.success.main;
+				
 		return {
 			id: monitor._id,
 			name: monitor.name,
@@ -243,7 +239,7 @@ function Infrastructure() {
 								backgroundColor={theme.palette.tertiary.main}
 								sx={{
 									padding: ".25em .75em",
-									borderRadius: "50%",
+									borderRadius: "10000px",
 									fontSize: "12px",
 									fontWeight: 500,
 								}}

Client/src/Pages/PageSpeed/index.jsx

@@ -106,9 +106,15 @@ const PageSpeed = () => {
 							component="span"
 							className="current-monitors-counter"
 							color={theme.palette.primary.contrastText}
-							border={1}
-							borderColor={theme.palette.primary.lowContrast}
+							border={2}
+							borderColor={theme.palette.accent.main}
 							backgroundColor={theme.palette.tertiary.main}
+							sx={{
+								padding: ".25em .75em",
+								borderRadius: "10000px",
+								fontSize: "12px",
+								fontWeight: 500,
+							}}
 						>
 							{summary?.totalMonitors ?? 0}
 						</Box>

Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx

@@ -234,7 +234,7 @@ const UptimeDataTable = ({
 					backgroundColor={theme.palette.tertiary.main}
 					sx={{
 						padding: ".25em .75em",
-						borderRadius: "50%",
+						borderRadius: "10000px",
 						fontSize: "12px",
 						fontWeight: 500,
 					}}

Client/src/Pages/Uptime/Home/index.jsx

@@ -71,9 +71,7 @@ const UptimeMonitors = () => {
 					? theme.palette.error.main
 					: monitor.uptimePercentage < 0.5
 						? theme.palette.warning.main
-						: monitor.uptimePercentage < 0.75
-							? theme.palette.success.main
-							: theme.palette.success.main;
+						: theme.palette.success.main;
 		}
 
 		return {