refactor i18n

client/src/Pages/Settings/SettingsURL.jsx

@@ -22,7 +22,7 @@ const SettingsURL = ({ HEADING_SX, handleChange, showURL }) => {
 				<Select
 					name="showURL"
 					label={t("settingsURLSelectTitle")}
-					value={showURL}
+					value={showURL || ""}
 					onChange={handleChange}
 					items={[
 						{ _id: true, name: t("settingsURLEnabled") },

client/src/Pages/Settings/index.jsx

@@ -93,7 +93,6 @@ const Settings = () => {
 
 		if (name === "language") {
 			dispatch(setLanguage(value));
-			i18n.changeLanguage(value);
 		}
 
 		if (name === "deleteStats") {

client/src/Pages/Uptime/Monitors/Components/StatusBoxes/index.jsx

@@ -17,14 +17,17 @@ const StatusBoxes = ({ shouldRender, monitorsSummary }) => {
 		>
 			<StatusBox
 				title={t("monitorStatus.up")}
+				status="up"
 				value={monitorsSummary?.upMonitors ?? 0}
 			/>
 			<StatusBox
 				title={t("monitorStatus.down")}
+				status="down"
 				value={monitorsSummary?.downMonitors ?? 0}
 			/>
 			<StatusBox
 				title={t("monitorStatus.paused")}
+				status="paused"
 				value={monitorsSummary?.pausedMonitors ?? 0}
 			/>
 		</Stack>

client/src/Pages/Uptime/Monitors/Components/StatusBoxes/statusBox.jsx

@@ -5,9 +5,8 @@ import Arrow from "../../../../../assets/icons/top-right-arrow.svg?react";
 import Background from "../../../../../assets/Images/background-grid.svg?react";
 import ClockSnooze from "../../../../../assets/icons/clock-snooze.svg?react";
 
-const StatusBox = ({ title, value }) => {
+const StatusBox = ({ title, value, status }) => {
 	const theme = useTheme();
-
 	let sharedStyles = {
 		position: "absolute",
 		right: 8,
@@ -17,21 +16,21 @@ const StatusBox = ({ title, value }) => {
 
 	let color;
 	let icon;
-	if (title === "up") {
+	if (status === "up") {
 		color = theme.palette.success.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: 8 }}>
 				<Arrow />
 			</Box>
 		);
-	} else if (title === "down") {
+	} else if (status === "down") {
 		color = theme.palette.error.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
 				<Arrow />
 			</Box>
 		);
-	} else if (title === "paused") {
+	} else if (status === "paused") {
 		color = theme.palette.warning.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: 12, right: 12 }}>
@@ -100,8 +99,9 @@ const StatusBox = ({ title, value }) => {
 };
 
 StatusBox.propTypes = {
-	title: PropTypes.oneOf(["up", "down", "paused"]).isRequired,
+	title: PropTypes.string,
 	value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+	status: PropTypes.string,
 };
 
 export default StatusBox;