extract strings

client/src/Components/v2/common/controls/HeaderTimeRange.tsx

@@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography";
 import { ToggleButtonGroup, ToggleButton } from "@/Components/v2/inputs";
 import { useTheme } from "@mui/material/styles";
 import CircularProgress from "@mui/material/CircularProgress";
+import { useTranslation } from "react-i18next";
 import Box from "@mui/material/Box";
 
 interface MonitorTimeFrameHeaderProps {
@@ -19,7 +20,7 @@ export const HeaderTimeRange = ({
 	setDateRange,
 }: MonitorTimeFrameHeaderProps) => {
 	const theme = useTheme();
-
+	const { t } = useTranslation();
 	const handleChange = (
 		_event: React.MouseEvent<HTMLElement>,
 		newValue: string | null
@@ -39,29 +40,17 @@ export const HeaderTimeRange = ({
 				onChange={handleChange}
 				size="small"
 			>
-				<ToggleButton
-					disabled={isLoading}
-					value="recent"
-				>
-					Recent
+				<ToggleButton value="recent">
+					{t("components.headerTimeRange.labels.recent")}
 				</ToggleButton>
-				<ToggleButton
-					disabled={isLoading}
-					value="day"
-				>
-					Day
+				<ToggleButton value="day">
+					{t("components.headerTimeRange.labels.day")}
 				</ToggleButton>
-				<ToggleButton
-					disabled={isLoading}
-					value="week"
-				>
-					Week
+				<ToggleButton value="week">
+					{t("components.headerTimeRange.labels.week")}
 				</ToggleButton>
-				<ToggleButton
-					disabled={isLoading}
-					value="month"
-				>
-					Month
+				<ToggleButton value="month">
+					{t("components.headerTimeRange.labels.month")}
 				</ToggleButton>
 			</ToggleButtonGroup>
 		);
@@ -74,19 +63,9 @@ export const HeaderTimeRange = ({
 			alignItems="center"
 			gap={theme.spacing(4)}
 		>
-			<Box sx={{ width: 20, height: 20, display: "flex", alignItems: "center", justifyContent: "center" }}>
-				{isLoading && <CircularProgress size={16} />}
-			</Box>
+			{isLoading && <CircularProgress size={16} />}
 			<Typography variant="body2">
-				Showing statistics for past{" "}
-				{dateRange === "recent"
-					? "2 hours"
-					: dateRange === "day"
-						? "24 hours"
-						: dateRange === "week"
-							? "7 days"
-							: "30 days"}
-				.
+				{t(`components.headerTimeRange.description.${dateRange}`)}
 			</Typography>
 			{timeFramePicker}
 		</Stack>

client/src/Components/v2/design-elements/StatusBox.tsx

@@ -113,9 +113,6 @@ export const TotalChecksBox = ({ n }: { n: number }) => {
 			label={t("pages.common.monitors.status.total")}
 			n={n}
 			color={theme.palette.primary.light}
-			sx={{
-				maxWidth: "300px",
-			}}
 		/>
 	);
 };
@@ -127,9 +124,6 @@ export const DownChecksBox = ({ n }: { n: number }) => {
 			label={t("pages.common.monitors.status.down")}
 			n={n}
 			color={theme.palette.error.light}
-			sx={{
-				maxWidth: "300px",
-			}}
 		/>
 	);
 };
@@ -141,9 +135,6 @@ export const UpChecksBox = ({ n }: { n: number }) => {
 			label={t("pages.common.monitors.status.up")}
 			n={n}
 			color={theme.palette.success.light}
-			sx={{
-				maxWidth: "300px",
-			}}
 		/>
 	);
 };