Repository: bluewave-labs/Checkmate
Pull request #1889: Feat: Migrate Hardcoded Strings in Auth and About
Author: login: Br0wnHammer
Created: 2025-03-07T19:13:09Z | Merged: 2025-03-10T14:06:55Z

## Describe your changes

This PR migrates hardcoded strings to i18n to support localization, ensuring better adaptability for different languages. The changes enhance the application's flexibility.

- Added the following new translation keys:
```
"authCheckEmailOpenEmailButton": "Open email app",
"authNewPasswordConfirmed": "Your password has been successfully reset. Click below to log in magically.",
"passwordreset": "Password Reset",
"aboutus": "About Us"
```

## Issue number

#1873 

## Please ensure all items are checked off before requesting a review. "Checked off" means you need to add an "x" character between brackets so they turn into checkmarks.

- [x] (Do not skip this or your PR will be closed) I deployed the application locally.
- [x] (Do not skip this or your PR will be closed) I have performed a self-review and testing of my code.
- [x] I have included the issue # in the PR.
- [x] I have labelled the PR correctly.
- [x] The issue I am working on is assigned to me.
- [x] I didn't use any hardcoded values (otherwise it will not scale, and will make it difficult to maintain consistency across the application).
- [x] I made sure font sizes, color choices etc are all referenced from the theme. I have no hardcoded dimensions.
- [x] My PR is granular and targeted to one specific feature.
- [x] I took a screenshot or a video and attached to this PR if there is a UI change.



Diff:
diff --git a/src/Pages/About/index.jsx b/src/Pages/About/index.jsx
index 84b90af553..dcb9d3f433 100644
--- a/src/Pages/About/index.jsx
+++ b/src/Pages/About/index.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import AppBar from '../../Components/Common/AppBar';
 import Footer from '../../Components/Common/Footer';
+import { useTranslation } from "react-i18next";
 
 const AboutUs = () => {
+	const { t } = useTranslation();
+
 	return (
 		<div>
 			<AppBar />
-			<h1>About Us</h1>
+			<h1>{t("aboutus")}</h1>
 			<Footer />
 		</div>
 	);
diff --git a/src/Pages/Auth/CheckEmail.jsx b/src/Pages/Auth/CheckEmail.jsx
index 7d7a6af641..695be62b0f 100644
--- a/src/Pages/Auth/CheckEmail.jsx
+++ b/src/Pages/Auth/CheckEmail.jsx
@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import { createToast } from "../../Utils/toastUtils";
 import { forgotPassword } from "../../Features/Auth/authSlice";
+import { useTranslation } from "react-i18next";
 import Background from "../../assets/Images/background-grid.svg?react";
 import EmailIcon from "../../assets/icons/email.svg?react";
 import Logo from "../../assets/icons/checkmate-icon.svg?react";
@@ -15,6 +16,7 @@ const CheckEmail = () => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
+	const { t } = useTranslation();
 
 	const [email, setEmail] = useState();
 	const [disabled, setDisabled] = useState(false);
@@ -161,9 +163,9 @@ const CheckEmail = () => {
 								<EmailIcon alt="email icon" />
 							</IconBox>
 						</Stack>
-						<Typography component="h1">Check your email</Typography>
+						<Typography component="h1">{t("authCheckEmailTitle")}</Typography>
 						<Typography>
-							We sent a password reset link to{" "}
+							{t("authCheckEmailDescription")}{" "}
 							<Typography
 								className="email-sent-to"
 								component="span"
@@ -181,22 +183,22 @@ const CheckEmail = () => {
 							maxWidth: 400,
 						}}
 					>
-						Open email app
+						{t("authCheckEmailOpenEmailButton")}
 					</Button>
 					<Typography sx={{ alignSelf: "center", mt: theme.spacing(6) }}>
-						Didn&apos;t receive the email?{" "}
+						{t("authCheckEmailDidntReceiveEmail")}{" "}
 						<Typography
 							component="span"
 							onClick={resendToken}
 							sx={{
-								color: theme.palette.primary.main,
+								color: theme.palette.accent.main,
 								userSelect: "none",
 								pointerEvents: disabled ? "none" : "auto",
 								cursor: disabled ? "default" : "pointer",
 								opacity: disabled ? 0.5 : 1,
 							}}
 						>
-							Click to resend
+							{t("authCheckEmailClickToResend")}
 						</Typography>
 					</Typography>
 				</Stack>
@@ -205,15 +207,15 @@ const CheckEmail = () => {
 				textAlign="center"
 				p={theme.spacing(12)}
 			>
-				<Typography display="inline-block">Go back to —</Typography>
+				<Typography display="inline-block">{t("goBackTo")}</Typography>
 				<Typography
 					component="span"
 					ml={theme.spacing(2)}
-					color={theme.palette.primary.main}
+					color={theme.palette.accent.main}
 					onClick={handleNavigate}
 					sx={{ userSelect: "none" }}
 				>
-					Log In
+					{t("authLoginTitle")}
 				</Typography>
 			</Box>
 		</Stack>
diff --git a/src/Pages/Auth/ForgotPassword.jsx b/src/Pages/Auth/ForgotPassword.jsx
index 61234db732..a67f67c148 100644
--- a/src/Pages/Auth/ForgotPassword.jsx
+++ b/src/Pages/Auth/ForgotPassword.jsx
@@ -11,6 +11,7 @@ import Logo from "../../assets/icons/checkmate-icon.svg?react";
 import Key from "../../assets/icons/key.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
 import IconBox from "../../Components/IconBox";
+import { useTranslation } from "react-i18next";
 import "./index.css";
 
 const ForgotPassword = () => {
@@ -29,6 +30,8 @@ const ForgotPassword = () => {
 		email && setForm({ email: sessionStorage.getItem("email") });
 	}, []);
 
+	const { t } = useTranslation();
+
 	const handleSubmit = async (event) => {
 		event.preventDefault();
 
@@ -162,7 +165,7 @@ const ForgotPassword = () => {
 								<Key alt="password key icon" />
 							</IconBox>
 						</Stack>
-						<Typography component="h1">Forgot password?</Typography>
+						<Typography component="h1">{t("authForgotPasswordTitle")}</Typography>
 						<Typography>No worries, we&apos;ll send you reset instructions.</Typography>
 					</Box>
 					<Box
@@ -195,7 +198,7 @@ const ForgotPassword = () => {
 								mt: theme.spacing(15),
 							}}
 						>
-							Send instructions
+							{t("continue")}
 						</Button>
 					</Box>
 				</Stack>
@@ -204,15 +207,15 @@ const ForgotPassword = () => {
 				textAlign="center"
 				p={theme.spacing(12)}
 			>
-				<Typography display="inline-block">Go back to —</Typography>
+				<Typography display="inline-block">{t("goBackTo")}</Typography>
 				<Typography
 					component="span"
-					color={theme.palette.primary.main}
+					color={theme.palette.accent.main}
 					ml={theme.spacing(2)}
 					onClick={handleNavigate}
 					sx={{ userSelect: "none" }}
 				>
-					Log In
+					{t("authLoginTitle")}
 				</Typography>
 			</Box>
 		</Stack>
diff --git a/src/Pages/Auth/NewPasswordConfirmed.jsx b/src/Pages/Auth/NewPasswordConfirmed.jsx
index 6258e0fa5b..9c7734083c 100644
--- a/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -8,12 +8,14 @@ import Background from "../../assets/Images/background-grid.svg?react";
 import ConfirmIcon from "../../assets/icons/check-outlined.svg?react";
 import Logo from "../../assets/icons/checkmate-icon.svg?react";
 import IconBox from "../../Components/IconBox";
+import { useTranslation } from "react-i18next";
 import "./index.css";
 
 const NewPasswordConfirmed = () => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
+	const { t } = useTranslation();
 
 	const handleNavigate = () => {
 		dispatch(clearAuthState());
@@ -97,9 +99,9 @@ const NewPasswordConfirmed = () => {
 								<ConfirmIcon alt="password confirm icon" />
 							</IconBox>
 						</Stack>
-						<Typography component="h1">Password reset</Typography>
+						<Typography component="h1">{t("passwordreset")}</Typography>
 						<Typography mb={theme.spacing(2)}>
-							Your password has been successfully reset. Click below to log in magically.
+							{t("authNewPasswordConfirmed")}
 						</Typography>
 					</Box>
 					<Button
@@ -110,7 +112,7 @@ const NewPasswordConfirmed = () => {
 							maxWidth: 400,
 						}}
 					>
-						Continue
+						{t("continue")}
 					</Button>
 				</Stack>
 			</Stack>
@@ -118,15 +120,15 @@ const NewPasswordConfirmed = () => {
 				textAlign="center"
 				p={theme.spacing(12)}
 			>
-				<Typography display="inline-block">Go back to —</Typography>
+				<Typography display="inline-block">{t("goBackTo")}</Typography>
 				<Typography
 					component="span"
-					color={theme.palette.primary.main}
+					color={theme.palette.accent.main}
 					ml={theme.spacing(2)}
 					onClick={handleNavigate}
 					sx={{ userSelect: "none" }}
 				>
-					Log In
+					{t("authLoginTitle")}
 				</Typography>
 			</Box>
 		</Stack>
diff --git a/src/Pages/Auth/Register/Register.jsx b/src/Pages/Auth/Register/Register.jsx
index 9f93cc8215..b3dfd214b8 100644
--- a/src/Pages/Auth/Register/Register.jsx
+++ b/src/Pages/Auth/Register/Register.jsx
@@ -35,7 +35,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
 				textAlign="center"
 			>
 				<Box>
-					<Typography component="h1">Sign Up</Typography>
+					<Typography component="h1">{t("signUP")}</Typography>
 					<Typography>
 						{isSuperAdmin
 							? t("authRegisterCreateSuperAdminAccount")
@@ -67,7 +67,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
 				</Box>
 				<Box maxWidth={400}>
 					<Typography className="tos-p">
-						{t("authRegisterBySigningUp")}
+						{t("authRegisterBySigningUp")}{" "}
 						<Typography
 							component="span"
 							onClick={() => {
diff --git a/src/Pages/Auth/Register/StepOne/index.jsx b/src/Pages/Auth/Register/StepOne/index.jsx
index 42e547b627..248f57f691 100644
--- a/src/Pages/Auth/Register/StepOne/index.jsx
+++ b/src/Pages/Auth/Register/StepOne/index.jsx
@@ -4,6 +4,7 @@ import { useTheme } from "@emotion/react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import TextInput from "../../../../Components/Inputs/TextInput";
+import { useTranslation } from "react-i18next";
 
 StepOne.propTypes = {
 	form: PropTypes.object,
@@ -28,6 +29,7 @@ StepOne.propTypes = {
 function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 	const theme = useTheme();
 	const inputRef = useRef(null);
+	const { t } = useTranslation();
 
 	useEffect(() => {
 		if (inputRef.current) {
@@ -43,8 +45,8 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 				textAlign="center"
 			>
 				<Box>
-					<Typography component="h1">Sign Up</Typography>
-					<Typography>Enter your personal details</Typography>
+					<Typography component="h1">{t("signUp")}</Typography>
+					<Typography>{t("authRegisterStepOnePersonalDetails")}</Typography>
 				</Box>
 
 				<Box
@@ -107,7 +109,7 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 							}}
 						>
 							<ArrowBackRoundedIcon />
-							Back
+							{t("commonBack")}
 						</Button>
 						<Button
 							variant="contained"
@@ -123,7 +125,7 @@ function StepOne({ form, errors, onSubmit, onChange, onBack }) {
 								},
 							}}
 						>
-							Continue
+							{t("continue")}
 						</Button>
 					</Stack>
 				</Box>
diff --git a/src/Pages/DistributedUptime/Create/index.jsx b/src/Pages/DistributedUptime/Create/index.jsx
index 57160d2ab6..458aa011fb 100644
--- a/src/Pages/DistributedUptime/Create/index.jsx
+++ b/src/Pages/DistributedUptime/Create/index.jsx
@@ -19,6 +19,7 @@ import { monitorValidation } from "../../../Validation/validation";
 import { useParams } from "react-router-dom";
 import { useCreateDistributedUptimeMonitor } from "./Hooks/useCreateDistributedUptimeMonitor";
 import { useMonitorFetch } from "./Hooks/useMonitorFetch";
+import { useTranslation } from "react-i18next";
 
 // Constants
 const MS_PER_MINUTE = 60000;
@@ -41,6 +42,7 @@ const parseUrl = (url) => {
 const CreateDistributedUptime = () => {
 	const { monitorId } = useParams();
 	const isCreate = typeof monitorId === "undefined";
+	const { t } = useTranslation();
 
 	let BREADCRUMBS = [
 		{ name: `distributed uptime`, path: "/distributed-uptime" },
@@ -191,14 +193,14 @@ const CreateDistributedUptime = () => {
 						fontSize="inherit"
 						fontWeight="inherit"
 					>
-						monitor
+						{t("monitor")}
 					</Typography>
 				</Typography>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">General settings</Typography>
+						<Typography component="h2">{t("settingsGeneralSettings")}</Typography>
 						<Typography component="p">
-							Here you can select the URL of the host, together with the type of monitor.
+							{t("distributedUptimeCreateSelectURL")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
@@ -232,9 +234,9 @@ const CreateDistributedUptime = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">Checks to perform</Typography>
+						<Typography component="h2">{t("distributedUptimeCreateChecks")}</Typography>
 						<Typography component="p">
-							You can always add or remove checks after adding your site.
+							{t("distributedUptimeCreateChecksDescription")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(12)}>
@@ -259,14 +261,14 @@ const CreateDistributedUptime = () => {
 										filled={https.toString()}
 										onClick={() => setHttps(true)}
 									>
-										HTTPS
+										{t("https")}
 									</Button>
 									<Button
 										variant="group"
 										filled={(!https).toString()}
 										onClick={() => setHttps(false)}
 									>
-										HTTP
+										{t("http")}
 									</Button>
 								</ButtonGroup>
 							) : (
@@ -291,9 +293,9 @@ const CreateDistributedUptime = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">Incident notifications</Typography>
+						<Typography component="h2">{t("distributedUptimeCreateIncidentNotification")}</Typography>
 						<Typography component="p">
-							When there is an incident, notify users.
+							{t("distributedUptimeCreateIncidentDescription")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
@@ -310,7 +312,7 @@ const CreateDistributedUptime = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">Advanced settings</Typography>
+						<Typography component="h2">{t("distributedUptimeCreateAdvancedSettings")}</Typography>
 					</Box>
 					<Stack gap={theme.spacing(12)}>
 						<Select
diff --git a/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx b/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx
index 00af46f6b0..899c0fcc38 100644
--- a/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx
@@ -5,6 +5,7 @@ import SmartToyIcon from "@mui/icons-material/SmartToy";
 import Dot from "../../../../../Components/Dot";
 // Utils
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
 
 const MESSAGES = [
 	"I've checked the network status, and we're seeing excellent performance across all regions.",
@@ -16,6 +17,7 @@ const MESSAGES = [
 
 const ChatBot = ({ sx }) => {
 	const theme = useTheme();
+	const { t } = useTranslation(); 
 	return (
 		<ColContainer
 			backgroundColor={theme.palette.chatbot.background}
@@ -37,7 +39,7 @@ const ChatBot = ({ sx }) => {
 					color={theme.palette.chatbot.textAccent}
 					sx={{ opacity: 0.4 }}
 				>
-					Now
+					{t("now")}
 				</Typography>
 			</Stack>
 			<Typography>{MESSAGES[Math.floor(Math.random() * MESSAGES.length)]}</Typography>
diff --git a/src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx
index 5531fc08e2..e9b42c4b99 100644
--- a/src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx
@@ -1,17 +1,18 @@
 // Components
-import { Box, Stack, Typography, Button } from "@mui/material";
+import { Box, Stack, Button } from "@mui/material";
 import Image from "../../../../../Components/Image";
 import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import { useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
+	const { t } = useTranslation(); 
 
 	return (
 		<Stack
@@ -25,7 +26,7 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
 					onClick={() => setIsDeleteOpen(!isDeleteOpen)}
 					loading={isDeleting}
 				>
-					Delete
+					{t("delete")}
 				</Button>
 			</Box>
 			<Box>
@@ -45,7 +46,7 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, monitorId }) => {
 						},
 					}}
 				>
-					<SettingsIcon /> Configure
+					<SettingsIcon /> {t("configure")}
 				</Button>
 			</Box>
 		</Stack>
diff --git a/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx b/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx
index e2e879ab52..4afba9e52e 100644
--- a/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx
@@ -6,9 +6,11 @@ import { ColContainer } from "../../../../../Components/StandardContainer";
 
 // Utils
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+
 const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 	const theme = useTheme();
-
+	const { t } = useTranslation();
 	const statusColor = {
 		up: theme.palette.success.main,
 		down: theme.palette.error.main,
@@ -44,13 +46,13 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 					<thead>
 						<tr>
 							<th style={{ textAlign: "left", paddingLeft: theme.spacing(4) }}>
-								<Typography>COUNTRY</Typography>
+								<Typography>{t("country")}</Typography>
 							</th>
 							<th style={{ textAlign: "left", paddingLeft: theme.spacing(4) }}>
-								<Typography>CITY</Typography>
+								<Typography>{t("city")}</Typography>
 							</th>
 							<th style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
-								<Typography>RESPONSE</Typography>
+								<Typography>{t("response")}</Typography>
 							</th>
 							<th style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
 								<Typography sx={{ whiteSpace: "nowrap" }}>{"UPT BURNED"}</Typography>
@@ -74,7 +76,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 										<Typography>{city}</Typography>
 									</td>
 									<td style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
-										<Typography>{Math.floor(dataPoint.responseTime)} ms</Typography>
+										<Typography>{Math.floor(dataPoint.responseTime)} {t("ms")}</Typography>
 									</td>
 									<td style={{ textAlign: "right", paddingLeft: theme.spacing(4) }}>
 										<Typography color={theme.palette.warning.main}>
diff --git a/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx b/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx
index 0646788978..737b26106b 100644
--- a/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx
@@ -4,9 +4,12 @@ import { formatDateWithTz } from "../../../../../../Utils/timeUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { useTranslation } from "react-i18next";
+
 const CustomToolTip = ({ active, payload, label }) => {
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 	const theme = useTheme();
+	const { t } = useTranslation();
 	if (active && payload && payload.length) {
 		const responseTime = payload[0]?.payload?.originalAvgResponseTime
 			? payload[0]?.payload?.originalAvgResponseTime
@@ -51,7 +54,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 						component="span"
 						sx={{ opacity: 0.8 }}
 					>
-						Response time:
+						{t("responseTime")}
 					</Typography>
 					<Typography component="span">
 						{Math.floor(responseTime)}
@@ -59,7 +62,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 							component="span"
 							sx={{ opacity: 0.8 }}
 						>
-							ms
+							{t("ms")}
 						</Typography>
 					</Typography>
 				</Stack>
diff --git a/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx b/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx
index 88beb258dc..90a7671db7 100644
--- a/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx
@@ -8,8 +8,11 @@ import ResponseTimeIcon from "../../../../../assets/icons/response-time-icon.svg
 
 // Utils
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+
 const DistributedUptimeResponseChart = ({ checks }) => {
 	const [chartType, setChartType] = useState("bar");
+	const { t } = useTranslation();
 	let Chart = null;
 	if (chartType === "area") {
 		Chart = DistributedUptimeResponseAreaChart;
@@ -23,13 +26,13 @@ const DistributedUptimeResponseChart = ({ checks }) => {
 				direction="row"
 				alignItems="center"
 			>
-				<Typography>Bar</Typography>
+				<Typography>{t("bar")}</Typography>
 				<Switch
 					color="main"
 					value={chartType}
 					onChange={(e) => setChartType(e.target.checked ? "area" : "bar")}
 				/>
-				<Typography>Area</Typography>
+				<Typography>{t("area")}</Typography>
 			</Stack>
 			<ChartBox
 				icon={<ResponseTimeIcon />}
diff --git a/src/Pages/DistributedUptime/Details/Components/Footer/index.jsx b/src/Pages/DistributedUptime/Details/Components/Footer/index.jsx
index 8032b65271..62a1f465ae 100644
--- a/src/Pages/DistributedUptime/Details/Components/Footer/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/Footer/index.jsx
@@ -1,15 +1,18 @@
 import { Stack, Typography, Box } from "@mui/material";
 import SolanaLogo from "../../../../../assets/icons/solana_logo.svg?react";
 import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
 const Footer = () => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	return (
 		<Stack
 			justifyContent="space-between"
 			alignItems="center"
 			spacing={2}
 		>
-			<Typography variant="h2">Made with ❤️ by UpRock & Bluewave Labs</Typography>
+			<Typography variant="h2">{t("distributedUptimeDetailsFooterHeading")}</Typography>
 			<Stack
 				width="100%"
 				direction="row"
@@ -17,12 +20,12 @@ const Footer = () => {
 				justifyContent="center"
 				alignItems="center"
 			>
-				<Typography variant="h2">Built on</Typography>
+				<Typography variant="h2">{t("distributedUptimeDetailsFooterBuilt")}</Typography>
 				<SolanaLogo
 					width={15}
 					height={15}
 				/>
-				<Typography variant="h2">Solana</Typography>
+				<Typography variant="h2">{t("distributedUptimeDetailsFooterSolana")}</Typography>
 			</Stack>
 		</Stack>
 	);
diff --git a/src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx
index 53f36542f3..9e2c4e87ee 100644
--- a/src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx
@@ -1,15 +1,17 @@
 import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const MonitorHeader = ({ monitor }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	return (
 		<Stack direction="row">
 			<Stack gap={theme.spacing(2)}>
 				<Typography variant="h1">{monitor.name}</Typography>
 				<Typography variant="h2">
-					Distributed Uptime Monitoring powered by DePIN
+					{t("distributedUptimeDetailsMonitorHeader")}
 				</Typography>
 			</Stack>
 		</Stack>
diff --git a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx
index 316427cec6..8f188c970b 100644
--- a/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx
+++ b/src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx
@@ -9,9 +9,11 @@ import ShareComponent from "../../../../../Components/ShareComponent";
 // Utils
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
 
 const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const COLOR_MAP = {
 		up: theme.palette.successSecondary.main,
 		down: theme.palette.error.lowContrast,
@@ -59,14 +61,14 @@ const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 								backgroundColor={theme.palette.successSecondary.lowContrast}
 								color={theme.palette.success.lowContrast}
 							>
-								Uptime: {(monitor.uptimePercentage * 100).toFixed(2)}%
+								{t("distributedUptimeDetailsStatusHeaderUptime")} {(monitor.totalUptime * 100).toFixed(2)}%
 							</Typography>
 						</Stack>
 						<Typography
 							variant="body2"
 							color={theme.palette.success.lowContrast}
 						>
-							Last updated{" "}
+							{t("distributedUptimeDetailsStatusHeaderLastUpdate")}{" "}
 							<LastUpdate
 								suffix={"seconds ago"}
 								lastUpdateTime={monitor?.timeSinceLastCheck}
diff --git a/src/Pages/DistributedUptime/Details/index.jsx b/src/Pages/DistributedUptime/Details/index.jsx
index 6e84240aac..d2011709e7 100644
--- a/src/Pages/DistributedUptime/Details/index.jsx
+++ b/src/Pages/DistributedUptime/Details/index.jsx
@@ -22,6 +22,7 @@ import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToDetails } from "./Hooks/useSubscribeToDetails";
 import { useDeleteMonitor } from "./Hooks/useDeleteMonitor";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const DistributedUptimeDetails = () => {
 	const { monitorId } = useParams();
@@ -32,6 +33,7 @@ const DistributedUptimeDetails = () => {
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
+	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] =
 		useSubscribeToDetails({ monitorId, dateRange });
@@ -55,9 +57,9 @@ const DistributedUptimeDetails = () => {
 					marginY={theme.spacing(4)}
 					color={theme.palette.primary.contrastTextTertiary}
 				>
-					Network error
+					{t("networkError")}
 				</Typography>
-				<Typography>Please check your connection</Typography>
+				<Typography>{t("checkConnection")}</Typography>
 			</GenericFallback>
 		);
 	}
@@ -70,7 +72,7 @@ const DistributedUptimeDetails = () => {
 			<Stack gap={theme.spacing(10)}>
 				<Breadcrumbs list={BREADCRUMBS} />
 				<GenericFallback>
-					<Typography>There is no check history for this monitor yet.</Typography>
+					<Typography>{t("distributedUptimeDetailsNoMonitorHistory")}</Typography>
 				</GenericFallback>
 			</Stack>
 		);
diff --git a/src/Pages/DistributedUptime/Monitors/index.jsx b/src/Pages/DistributedUptime/Monitors/index.jsx
index 41e21130d4..097f0128cf 100644
--- a/src/Pages/DistributedUptime/Monitors/index.jsx
+++ b/src/Pages/DistributedUptime/Monitors/index.jsx
@@ -13,6 +13,7 @@ import { useTheme } from "@mui/material/styles";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors";
 import SkeletonLayout from "./Components/Skeleton";
+import { useTranslation } from "react-i18next";
 // Constants
 const BREADCRUMBS = [{ name: `Distributed Uptime`, path: "/distributed-uptime" }];
 
@@ -24,6 +25,7 @@ const DistributedUptimeMonitors = () => {
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
+	const { t } = useTranslation();
 	const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] =
 		useSubscribeToMonitors(page, rowsPerPage);
 	// Handlers
@@ -48,9 +50,9 @@ const DistributedUptimeMonitors = () => {
 					marginY={theme.spacing(4)}
 					color={theme.palette.primary.contrastTextTertiary}
 				>
-					Network error
+					{t("networkError")}
 				</Typography>
-				<Typography>Please check your connection</Typography>
+				<Typography>{t("checkConnection")}</Typography>
 			</GenericFallback>
 		);
 	}
diff --git a/src/locales/gb.json b/src/locales/gb.json
index cf7711fa84..521d0eb18e 100644
--- a/src/locales/gb.json
+++ b/src/locales/gb.json
@@ -1,12 +1,29 @@
 {
 	"dontHaveAccount": "Don't have account",
+	"https": "HTTPS",
+	"http": "HTTP",
+	"monitor": "monitor",
+	"aboutus": "About Us",
 	"email": "E-mail",
 	"forgotPassword": "Forgot Password",
 	"password": "password",
 	"signUp": "Sign up",
+	"signUP": "Sign Up",
 	"submit": "Submit",
 	"title": "Title",
 	"continue": "Continue",
+	"now": "Now",
+	"delete": "Delete",
+	"configure": "Configure",
+	"networkError": "Network error",
+	"responseTime": "Response time:",
+	"ms": "ms",
+	"bar": "Bar",
+	"area": "Area",
+	"country": "COUNTRY",
+	"city": "CITY",
+	"response": "RESPONSE",
+	"checkConnection": "Please check your connection",
 	"enterEmail": "Enter your email",
 	"authLoginTitle": "Log In",
 	"authLoginEnterPassword": "Enter your password",
@@ -16,11 +33,13 @@
 	"commonBack": "Back",
 	"authForgotPasswordTitle": "Forgot password?",
 	"authForgotPasswordResetPassword": "Reset password",
+	"passwordreset": "Password Reset",
 	"authRegisterAlreadyHaveAccount": "Already have an account?",
 	"commonAppName": "Checkmate",
 	"authLoginEnterEmail": "Enter your email",
 	"authRegisterTitle": "Create an account",
 	"authRegisterStepOneTitle": "Create your account",
+	"authRegisterStepOnePersonalDetails": "Enter your personal details",
 	"authRegisterStepOneDescription": "Enter your details to get started",
 	"authRegisterStepTwoTitle": "Set up your profile",
 	"authRegisterStepTwoDescription": "Tell us more about yourself",
@@ -30,9 +49,10 @@
 	"authForgotPasswordSendInstructions": "Send instructions",
 	"authForgotPasswordBackTo": "Back to",
 	"authCheckEmailTitle": "Check your email",
-	"authCheckEmailDescription": "We sent a password reset link to {{email}}",
+	"authCheckEmailDescription": "We sent a password reset link to",
 	"authCheckEmailResendEmail": "Resend email",
 	"authCheckEmailBackTo": "Back to",
+	"authCheckEmailOpenEmailButton": "Open email app",
 	"goBackTo": "Go back to",
 	"authCheckEmailDidntReceiveEmail": "Didn't receive the email?",
 	"authCheckEmailClickToResend": "Click to resend",
@@ -42,6 +62,7 @@
 	"authSetNewPasswordConfirmPassword": "Confirm password",
 	"confirmPassword": "Confirm your password",
 	"authSetNewPasswordResetPassword": "Reset password",
+	"authNewPasswordConfirmed": "Your password has been successfully reset. Click below to log in magically.",
 	"authSetNewPasswordBackTo": "Back to",
 	"authPasswordMustBeAtLeast": "Must be at least",
 	"authPasswordCharactersLong": "8 characters long",
@@ -66,6 +87,19 @@
 	"distributedRightCategoryTitle": "Monitor",
 	"distributedStatusServerMonitors": "Server Monitors",
 	"distributedStatusServerMonitorsDescription": "Monitor status of related servers",
+	"distributedUptimeCreateSelectURL": "Here you can select the URL of the host, together with the type of monitor.",
+	"distributedUptimeCreateChecks": "Checks to perform",
+	"distributedUptimeCreateChecksDescription": "You can always add or remove checks after adding your site.",
+	"distributedUptimeCreateIncidentNotification": "Incident notifications",
+	"distributedUptimeCreateIncidentDescription": "When there is an incident, notify users.",
+	"distributedUptimeCreateAdvancedSettings": "Advanced settings",
+	"distributedUptimeDetailsNoMonitorHistory": "There is no check history for this monitor yet.",
+	"distributedUptimeDetailsFooterHeading": "Made with ❤️ by UpRock & Bluewave Labs",
+	"distributedUptimeDetailsFooterBuilt": "Built on",
+	"distributedUptimeDetailsFooterSolana": "Solana",
+	"distributedUptimeDetailsMonitorHeader": "Distributed Uptime Monitoring powered by DePIN",
+	"distributedUptimeDetailsStatusHeaderUptime": "Uptime:",
+	"distributedUptimeDetailsStatusHeaderLastUpdate": "Last updated",
 	
 	"settingsGeneralSettings": "General settings",
 	"settingsDisplayTimezone": "Display timezone",


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/locales/gb.json (2)</summary><blockquote>

`3-3`: **Solid Addition for the About Page!**  
The new key `"aboutus": "About Us",` boldly lands on the scene. Just a heads-up: consider checking if the naming convention (e.g., camelCase vs. lowercase) aligns with the rest of our keys to keep our code looking as smooth as a fresh pair of skates.

---

`35-35`: **Caution: Placeholder Removal Alert!**  
Changing `"authCheckEmailDescription"` from `"We sent a password reset link to {{email}}"` to `"We sent a password reset link to"` removes the dynamic placeholder. Ensure that the component rendering this text still properly injects the email address if needed; otherwise, this might surprise users like unexpected stomach-churning spaghetti.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between fec89bc680ef8540b4c95116a62aa72602bc52c7 and 6835671e0d4b41dc8798ac43bbe9b6a274a9c253.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `src/Pages/About/index.jsx` (1 hunks)
* `src/Pages/Auth/CheckEmail.jsx` (5 hunks)
* `src/Pages/Auth/ForgotPassword.jsx` (5 hunks)
* `src/Pages/Auth/NewPasswordConfirmed.jsx` (3 hunks)
* `src/locales/gb.json` (4 hunks)

</details>

<details>
<summary>🔇 Additional comments (24)</summary><blockquote>

<details>
<summary>src/Pages/About/index.jsx (3)</summary>

`4-4`: **Internationalization implementation looks good!**

Nice job importing the `useTranslation` hook from react-i18next - crucial first step toward making the app ready for localization.

---

`7-8`: **LGTM - Properly extracting the translation function**

You've correctly extracted the `t` function from the useTranslation hook. The empty line after it improves readability too.

---

`12-12`: **Good implementation of translation key**

Successfully replaced the hardcoded "About Us" string with the translation key. Mom's spaghetti would be proud of this clean implementation.

</details>
<details>
<summary>src/Pages/Auth/ForgotPassword.jsx (5)</summary>

`14-14`: **Well-placed import for i18n**

Clean import of the useTranslation hook, keeping related dependencies together.

---

`33-34`: **Good hook implementation with proper spacing**

The translation hook is well-implemented with appropriate spacing for readability.

---

`168-168`: **Successful text replacement with translation key**

Properly replaced the hardcoded title with a translation key. Knees weak, arms are heavy, but your code's ready!

---

`201-201`: **Good button text internationalization**

Successfully replaced the static button text with a translation key.

---

`210-219`: **Color adjustment and translation keys look good**

You've successfully replaced hardcoded strings with translation keys and updated the color from primary to accent. The changes are consistent with the app's new styling direction.

</details>
<details>
<summary>src/Pages/Auth/NewPasswordConfirmed.jsx (6)</summary>

`11-11`: **Added i18n import correctly**

Good job importing the useTranslation hook.

---

`18-18`: **Clean hook implementation**

The translation hook is properly implemented.

---

`102-102`: **Good title internationalization**

Successfully replaced hardcoded "Password reset" with a translation key.

---

`104-104`: **Good implementation of a complex translation key**

Successfully migrated the password confirmation message to use the "authNewPasswordConfirmed" translation key.

---

`115-115`: **Button text properly internationalized**

Good job replacing the "Continue" text with a translation key.

---

`123-132`: **Text and link properly internationalized**

The footer text and login link have been correctly migrated to use translation keys. There's vomit on his sweater already, but your code is clean and ready!

</details>
<details>
<summary>src/Pages/Auth/CheckEmail.jsx (7)</summary>

`8-8`: **Good import for i18n**

Added the useTranslation import in the proper place with the other imports.

---

`19-19`: **Translation hook properly implemented**

The useTranslation hook is correctly implemented and follows the same pattern as other components.

---

`166-166`: **Title properly internationalized**

Successfully replaced the hardcoded title with the translation key.

---

`168-168`: **Description text properly internationalized**

Good job maintaining the space after the translated text to ensure proper formatting with the email address.

---

`186-186`: **Button text properly internationalized with new key**

Successfully implemented the new "authCheckEmailOpenEmailButton" translation key.

---

`189-202`: **Good localization and color update**

Successfully replaced the text with translation keys and updated the color from primary to accent for consistency with other auth screens. Mom's spaghetti approves of this consistent styling!

---

`210-219`: **Footer text properly internationalized with consistent styling**

Good job replacing hardcoded text with translation keys and updating the color to accent, maintaining consistency with other auth screens.

</details>
<details>
<summary>src/locales/gb.json (3)</summary>

`20-20`: **Password Reset Key is On Point!**  
The addition of `"passwordreset": "Password Reset",` is a crisp move. This key effectively captures the intended message and fits nicely with the overall migration.

---

`38-38`: **Email App Button Key Added—Rock On!**  
The `"authCheckEmailOpenEmailButton": "Open email app",` key is a neat and clear addition for user interaction. It’s straightforward and keeps the interface as smooth as a well-played verse.

---

`48-48`: **New Password Confirmation Message is Lit!**  
The key `"authNewPasswordConfirmed": "Your password has been successfully reset. Click below to log in magically."` delivers a fun and clear confirmation message. It embodies that magical pop that reassures users—just like a perfectly executed rap verse.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-07T19:15:48Z
user: login: Br0wnHammer
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-07T19:16:19Z
user: login: llamapreview[bot]
body: # Auto Pull Request Review from LlamaPReview

## 1. Overview
### 1.1 PR Summary
- **Business value and requirements alignment**: This PR introduces internationalization (i18n) support for the authentication and about pages, enhancing the application's adaptability to different languages. It aligns with the requirement to make the application more accessible and user-friendly for a global audience.
- **Key components modified**: `About`, `Auth/CheckEmail`, `Auth/ForgotPassword`, and `Auth/NewPasswordConfirmed` pages.
- **Impact assessment**: The changes touch multiple components and pages, indicating a system-wide impact. They could potentially affect user experience and navigation flow across the application.
- **System dependencies and integration impacts**: The PR modifies several components and pages, which could introduce new bugs or instability if not thoroughly tested. Additionally, it introduces potential risks related to translation accuracy and edge cases, which should be thoroughly tested.

## 2. Detailed Technical Analysis
### 2.1 Code Logic Deep-Dive
#### Core Logic Changes
- **src/Pages/About/index.jsx**
  - **Submitted PR Code**:
```jsx
    import React from 'react';
    import AppBar from '../../Components/Common/AppBar';
    import Footer from '../../Components/Common/Footer';
    import { useTranslation } from "react-i18next";

    const AboutUs = () => {
      const { t } = useTranslation();

      return (
        <div>
          <AppBar />
          <h1>{t("aboutus")}</h1>
          <Footer />
        </div>
      );
    };

    export default AboutUs;
```
  - **Analysis**:
    - The `AboutUs` component now uses i18n to display the title, which is a good change. However, there's no explicit error handling for translation fetching. If the translation key is not found or the translation fails to load, the component might display an empty string or throw an error.
  - **LlamaPReview Suggested Improvements**:
```jsx
    import React from 'react';
    import AppBar from '../../Components/Common/AppBar';
    import Footer from '../../Components/Common/Footer';
    import { useTranslation } from "react-i18next";
    import { useEffect, useState } from 'react';

    const AboutUs = () => {
      const { t, i18n } = useTranslation();
      const [title, setTitle] = useState("");

      useEffect(() => {
        i18n
          .t("aboutus")
          .then((translation) => setTitle(translation))
          .catch((error) => console.error("Error fetching translation:", error));
      }, [i18n]);

      return (
        <div>
          <AppBar />
          <h1>{title}</h1>
          <Footer />
        </div>
      );
    };

    export default AboutUs;
```
  - **Improvement rationale**: Adding a fallback title and error handling ensures that the component displays a title even if the translation fails to load or is incorrect.

- **src/Pages/Auth/CheckEmail.jsx**
  - **Submitted PR Code**:
```jsx
    // ... (previous code)
    import { useTranslation } from "react-i18next";
    // ... (previous code)

    const CheckEmail = () => {
      const theme = useTheme();
      const navigate = useNavigate();
      const dispatch = useDispatch();
      const { t } = useTranslation();

      // ... (previous code)

      return (
        <Stack className="check-email-page auth">
          // ... (previous code)
          <Typography component="h1">{t("authCheckEmailTitle")}</Typography>
          // ... (previous code)
          <Button
            variant="contained"
            color="accent"
            onClick={openMail}
            sx={{
              width: "100%",
              maxWidth: 400,
            }}
          >
            {t("authCheckEmailOpenEmailButton")}
          </Button>
          // ... (previous code)
        </Stack>
      );
    };

    export default CheckEmail;
```
  - **Analysis**:
    - The `CheckEmail` component now uses i18n for the title and button text, which is a good change. However, there's no explicit error handling for translation fetching. If the translation key is not found or the translation fails to load, the component might display an empty string or throw an error.
  - **LlamaPReview Suggested Improvements**:
```jsx
    // ... (previous code)
    import { useTranslation } from "react-i18next";
    import { useEffect, useState } from 'react';
    // ... (previous code)

    const CheckEmail = () => {
      const theme = useTheme();
      const navigate = useNavigate();
      const dispatch = useDispatch();
      const { t, i18n } = useTranslation();
      const [title, setTitle] = useState("");
      const [buttonText, setButtonText] = useState("");

      useEffect(() => {
        Promise.all([
          i18n.t("authCheckEmailTitle"),
          i18n.t("authCheckEmailOpenEmailButton"),
        ])
          .then(([translationTitle, translationButton]) => {
            setTitle(translationTitle);
            setButtonText(translationButton);
          })
          .catch((error) => console.error("Error fetching translations:", error));
      }, [i18n]);

      return (
        <Stack className="check-email-page auth">
          // ... (previous code)
          <Typography component="h1">{title}</Typography>
          // ... (previous code)
          <Button
            variant="contained"
            color="accent"
            onClick={openMail}
            sx={{
              width: "100%",
              maxWidth: 400,
            }}
          >
            {buttonText}
          </Button>
          // ... (previous code)
        </Stack>
      );
    };

    export default CheckEmail;
```
  - **Improvement rationale**: Adding fallback values and error handling ensures that the component displays the correct title and button text even if the translations fail to load or are incorrect.

- **src/Pages/Auth/ForgotPassword.jsx**
  - **Submitted PR Code**:
```jsx
    // ... (previous code)
    import { useTranslation } from "react-i18next";
    // ... (previous code)

    const ForgotPassword = () => {
      const navigate = useNavigate();
      const dispatch = useDispatch();
      const theme = useTheme();
      const { t } = useTranslation();

      // ... (previous code)

      return (
        <Stack className="forgot-password-page auth">
          // ... (previous code)
          <Typography component="h1">{t("authForgotPasswordTitle")}</Typography>
          // ... (previous code)
          <Button
            variant="contained"
            color="accent"
            onClick={handleSubmit}
            loading={isLoading}
            disabled={errors.email !== undefined}
            sx={{
              width: "100%",
              mt: theme.spacing(15),
            }}
          >
            {t("continue")}
          </Button>
          // ... (previous code)
        </Stack>
      );
    };

    export default ForgotPassword;
```
  - **Analysis**:
    - The `ForgotPassword` component now uses i18n for the title and button text, which is a good change. However, there's no explicit error handling for translation fetching. If the translation key is not found or the translation fails to load, the component might display an empty string or throw an error.
  - **LlamaPReview Suggested Improvements**:
```jsx
    // ... (previous code)
    import { useTranslation } from "react-i18next";
    import { useEffect, useState } from 'react';
    // ... (previous code)

    const ForgotPassword = () => {
      const navigate = useNavigate();
      const dispatch = useDispatch();
      const theme = useTheme();
      const { t, i18n } = useTranslation();
      const [title, setTitle] = useState("");
      const [buttonText, setButtonText] = useState("");

      useEffect(() => {
        Promise.all([
          i18n.t("authForgotPasswordTitle"),
          i18n.t("continue"),
        ])
          .then(([translationTitle, translationButton]) => {
            setTitle(translationTitle);
            setButtonText(translationButton);
          })
          .catch((error) => console.error("Error fetching translations:", error));
      }, [i18n]);

      return (
        <Stack className="forgot-password-page auth">
          // ... (previous code)
          <Typography component="h1">{title}</Typography>
          // ... (previous code)
          <Button
            variant="contained"
            color="accent"
            onClick={handleSubmit}
            loading={isLoading}
            disabled={errors.email !== undefined}
            sx={{
              width: "100%",
              mt: theme.spacing(15),
            }}
          >
            {buttonText}
          </Button>
          // ... (previous code)
        </Stack>
      );
    };

    export default ForgotPassword;
```
  - **Improvement rationale**: Adding fallback values and error handling ensures that the component displays the correct title and button text even if the translations fail to load or are incorrect.

- **src/Pages/Auth/NewPasswordConfirmed.jsx**
  - **Submitted PR Code**:
```jsx
    // ... (previous code)
    import { useTranslation } from "react-i18next";
    // ... (previous code)

    const NewPasswordConfirmed = () => {
      const theme = useTheme();
      const navigate = useNavigate();
      const dispatch = useDispatch();
      const { t } = useTranslation();

      // ... (previous code)

      return (
        <Stack className="password-confirmed-page auth">
          // ... (previous code)
          <Typography component="h1">{t("passwordreset")}</Typography>
          // ... (previous code)
          <Typography mb={theme.spacing(2)}>
            {t("authNewPasswordConfirmed")}
          </Typography>
          // ... (previous code)
          <Button
            variant="contained"
            onClick={() => navigate("/uptime")}
            sx={{
              width: "100%",
              maxWidth: 400,
            }}
          >
            {t("continue")}
          </Button>
          // ... (previous code)
        </Stack>
      );
    };

    export default NewPasswordConfirmed;
```
  - **Analysis**:
    - The `NewPasswordConfirmed` component now uses i18n for the title, description, and button text, which is a good change. However, there's no explicit error handling for translation fetching. If the translation key is not found or the translation fails to load, the component might display an empty string or throw an error.
  - **LlamaPReview Suggested Improvements**:
```jsx
    // ... (previous code)
    import { useTranslation } from "react-i18next";
    import { useEffect, useState } from 'react';
    // ... (previous code)

    const NewPasswordConfirmed = () => {
      const theme = useTheme();
      const navigate = useNavigate();
      const dispatch = useDispatch();
      const { t, i18n } = useTranslation();
      const [title, setTitle] = useState("");
      const [description, setDescription] = useState("");
      const [buttonText, setButtonText] = useState("");

      useEffect(() => {
        Promise.all([
          i18n.t("passwordreset"),
          i18n.t("authNewPasswordConfirmed"),
          i18n.t("continue"),
        ])
          .then(([translationTitle, translationDescription, translationButton]) => {
            setTitle(translationTitle);
            setDescription(translationDescription);
            setButtonText(translationButton);
          })
          .catch((error) => console.error("Error fetching translations:", error));
      }, [i18n]);

      return (
        <Stack className="password-confirmed-page auth">
          // ... (previous code)
          <Typography component="h1">{title}</Typography>
          // ... (previous code)
          <Typography mb={theme.spacing(2)}>{description}</Typography>
          // ... (previous code)
          <Button
            variant="contained"
            onClick={() => navigate("/uptime")}
            sx={{
              width: "100%",
              maxWidth: 400,
            }}
          >
            {buttonText}
          </Button>
          // ... (previous code)
        </Stack>
      );
    };

    export default NewPasswordConfirmed;
```
  - **Improvement rationale**: Adding fallback values and error handling ensures that the component displays the correct title, description, and button text even if the translations fail to load or are incorrect.

- **src/locales/gb.json**
  - **Submitted PR Code**:
```json
    {
      "dontHaveAccount": "Don't have account",
      "aboutus": "About Us",
      "email": "E-mail",
      "forgotPassword": "Forgot Password",
      "password": "password",
      "signUp": "Sign up",
      "submit": "Submit",
      "title": "Title",
      "continue": "Continue",
      "enterEmail": "Enter your email",
      "authLoginTitle": "Log In",
      "authLoginEnterPassword": "Enter your password",
      "commonPassword": "Password",
      "createPassword": "Create your password",
      "createAPassword": "Create a password",
      "commonBack": "Back",
      "authForgotPasswordTitle": "Forgot password?",
      "authForgotPasswordResetPassword": "Reset password",
      "passwordreset": "Password Reset",
      "authRegisterAlreadyHaveAccount": "Already have an account?",
      "commonAppName": "Checkmate",
      "authLoginEnterEmail": "Enter your email",
      "authRegisterTitle": "Create an account",
      "authRegisterStepOneTitle": "Create your account",
      "authRegisterStepOneDescription": "Enter your details to get started",
      "authRegisterStepTwoTitle": "Set up your profile",
      "authRegisterStepTwoDescription": "Tell us more about yourself",
      "authRegisterStepThreeTitle": "Almost done!",
      "authRegisterStepThreeDescription": "Review your information",
      "authForgotPasswordDescription": "No worries, we'll send you reset instructions.",
      "authForgotPasswordSendInstructions": "Send instructions",
      "authForgotPasswordBackTo": "Back to",
      "authCheckEmailTitle": "Check your email",
      "authCheckEmailDescription": "We sent a password reset link to",
      "authCheckEmailResendEmail": "Resend email",
      "authCheckEmailBackTo": "Back to",
      "authCheckEmailOpenEmailButton": "Open email app",
      "goBackTo": "Go back to",
      "authCheckEmailDidntReceiveEmail": "Didn't receive the email?",
      "authCheckEmailClickToResend": "Click to resend",
      "authSetNewPasswordTitle": "Set new password",
      "authSetNewPasswordDescription": "Your new password must be different from previously used passwords.",
      "authSetNewPasswordNewPassword": "New password",
      "authSetNewPasswordConfirmPassword": "Confirm password",
      "confirmPassword": "Confirm your password",
      "authSetNewPasswordResetPassword": "Reset password",
      "authNewPasswordConfirmed": "Your password has been successfully reset. Click below to log in magically.",
      "authSetNewPasswordBackTo": "Back to",
      "authPasswordMustBeAtLeast": "Must be at least",
      "authPasswordCharactersLong": "8 characters long",
      "authPasswordMustContainAtLeast": "Must contain at least",
      "authPasswordSpecialCharacter": "one special character",
      "authPasswordOneNumber": "one number",
      "authPasswordUpperCharacter": "one upper character",
      "authPasswordLowerCharacter": "one lower character",
      "authPasswordConfirmAndPassword": "Confirm password and password",
      "authPasswordMustMatch": "must match"
    }
```
  - **Analysis**:
    - The `gb.json` translation file now includes new keys for the added or modified translations, which is a good change. However, there's no explicit error handling for translation fetching. If the translation key is not found or the translation fails to load, the component might display an empty string or throw an error.
  - **LlamaPReview Suggested Improvements**:
    - No improvements suggested for the translation file itself, as it only contains the translations and does not execute any logic.

### 2.2 Cross-cutting Concerns 
- **Data flow analysis**: Not applicable in this PR, as it only modifies translations and does not introduce new data flows.
- **State management implications**: Not applicable in this PR, as it only modifies translations and does not introduce new state management requirements.
- **Error propagation paths**: Not applicable in this PR, as it only modifies translations and does not introduce new error propagation paths.
- **Edge case handling across components**: Not applicable in this PR, as it only modifies translations and does not introduce new edge cases.

### 2.3 Algorithm & Data Structure Analysis 
- **Complexity analysis**: Not applicable in this PR, as it only modifies translations and does not introduce new algorithms or data structures.
- **Performance implications**: Not applicable in this PR, as it only modifies translations and does not introduce new performance considerations.
- **Memory usage considerations**: Not applicable in this PR, as it only modifies translations and does not introduce new memory usage considerations.

### 2.4 Implementation Quality 
- **Code organization and structure**: Not applicable in this PR, as it only modifies translations and does not introduce new code organization or structure requirements.
- **Design patterns usage**: Not applicable in this PR, as it only modifies translations and does not introduce new design patterns.
- **Error handling approach**: Not applicable in this PR, as it only modifies translations and does not introduce new error handling requirements.
- **Resource management**: Not applicable in this PR, as it only modifies translations and does not introduce new resource management requirements.

## 3. Critical Findings 
<details>
<summary>Potential Issues</summary>

- **🔴 Critical Issues**
  - **Description**: The PR does not include any explicit error handling for translation fetching. If the translation key is not found or the translation fails to load, the component might display an empty string or throw an error.
  - **Impact**: Users might be confused or unable to understand or interact with the application correctly if the translations are incorrect or missing.
  - **Recommendation**: Add explicit error handling for translation fetching to ensure that the component behaves correctly even if the translation fails to load or is incorrect.

- **🟡 Warnings**
  - **Description**: The PR introduces potential risks related to translation accuracy and edge cases, which should be thoroughly tested.
  - **Potential risks**: Inaccurate translations can lead to user confusion or broken functionality. Unhandled edge cases in translated strings could result in display issues or incorrect behavior.
  - **Suggested improvements**:
    - Thoroughly validate all translations to ensure they are accurate, grammatically correct, and convey the intended meaning.
    - Test the application with various edge cases, such as empty or null values, to ensure the translations handle them correctly.
    - Ensure that translations are consistent across the application and maintain the same tone and style.

</details>

## 4. Security Assessment 
<details>
<summary>Security Assessment</summary>

- **Authentication/Authorization impacts**: The PR does not directly address authentication or authorization features. However, ensuring that all translated strings are secure and do not expose sensitive information is essential.
- **Data handling concerns**: The PR does not introduce new data handling requirements. However, ensuring that all translated strings are secure and do not expose sensitive information is essential.
- **Input validation**: The PR does not introduce new input validation requirements. However, ensuring that all translated strings are secure and do not expose sensitive information is essential.
- **Security best practices**: The PR does not introduce new security best practices. However, ensuring that all translated strings are secure and do not expose sensitive information is essential.
- **Potential security risks**: Inaccurate translations or missing translations could potentially expose sensitive information or lead to security vulnerabilities.
- **Mitigation strategies**: Thoroughly validate all translations to ensure they are accurate, grammatically correct, and convey the intended meaning. Additionally, ensure that all translated strings are secure and do not expose sensitive information.
- **Security testing requirements**: Include security testing as part of the overall testing strategy to ensure that all translated strings are secure and do not expose sensitive information.

</details>

## 5. Testing Strategy 
<details>
<summary>Testing Strategy</summary>

### 5.1 Test Coverage
- **Unit test analysis**: Not applicable in this PR, as it only modifies translations and does not introduce new unit tests.
- **Integration test requirements**: The PR introduces potential risks related to translation accuracy and edge cases, which should be thoroughly tested. Integration tests should cover various edge cases and ensure that the translations handle them correctly.
- **Edge cases coverage**: The PR introduces potential risks related to translation accuracy and edge cases, which should be thoroughly tested. Edge cases should cover various scenarios, such as empty or null values, to ensure that the translations handle them correctly.

### 5.2 Test Recommendations
#### Suggested Test Cases
```jsx
  // Example test case for checking email component with empty value
  it('should handle empty email value', () => {
    // Arrange
    const { getByText } = render(<CheckEmail />);
    const emailInput = getByText('Enter your email');

    // Act
    fireEvent.change(emailInput, { target: { value: '' } });

    // Assert
    expect(emailInput).toHaveValue('');
  });
```
- **Coverage improvements**: Ensure that all translations are covered by tests, including edge cases and potential error scenarios.
- **Performance testing needs**: Not applicable in this PR, as it only modifies translations and does not introduce new performance considerations.

</details>

## 6. Documentation & Maintenance 
<details>
<summary>Documentation & Maintenance</summary>

- **Documentation updates needed**: The PR introduces new translations, which should be documented in the application's documentation.
- **Long-term maintenance considerations**: The PR introduces potential risks related to translation accuracy and edge cases, which should be thoroughly tested and maintained to ensure the application remains secure and functional.
- **Technical debt and monitoring requirements**: The PR introduces potential risks related to translation accuracy and edge cases, which should be monitored to ensure the application remains secure and functional.

</details>

## 7. Deployment & Operations 
<details>
<summary>Deployment & Operations</summary>

- **Deployment impact and strategy**: The PR modifies several components and pages, which could introduce new bugs or instability if not thoroughly tested. A thorough testing and deployment strategy should be implemented to minimize the risk of deployment failures.
- **Key operational considerations**: The PR introduces potential risks related to translation accuracy and edge cases, which should be monitored to ensure the application remains secure and functional.

</details>

## 8. Summary & Recommendations
### 8.1 Key Action Items
1. **Add explicit error handling for translation fetching** to ensure that the component behaves correctly even if the translation fails to load or is incorrect.
2. **Thoroughly validate all translations** to ensure they are accurate, grammatically correct, and convey the intended meaning.
3. **Test the application with various edge cases** to ensure the translations handle them correctly.
4. **Ensure that translations are consistent across the application** and maintain the same tone and style.
5. **Include security testing as part of the overall testing strategy** to ensure that all translated strings are secure and do not expose sensitive information.

### 8.2 Future Considerations
- **Technical evolution path**: As the application grows and supports more languages, consider implementing a more robust i18n solution that supports dynamic translation updates and easier maintenance.
- **Business capability evolution**: As the application's user base grows and diversifies, consider expanding language support to accommodate more users and improve accessibility.
- **System integration impacts**: As the application integrates with other systems or services, consider the impact of translations on those integrations and ensure compatibility.

---
💡 **Help Shape LlamaPReview**
How's this review format working for you? [Vote in our Github Discussion Polls](https://github.com/JetXu-LLM/LlamaPReview-site/discussions/9) to help us improve your review experience!
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-07T19:17:01Z
user: login: ajhollid
body: This all looks fine to me, but @Cihatata will go over this as he is our il8n guy :+1:   Thanks for your contribution!
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-08T23:52:49Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🔭 Outside diff range comments (3)</summary><blockquote>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx (1)</summary><blockquote>

`39-40`: _⚠️ Potential issue_

**Missed hardcoded string "Response Times".**

There's still a hardcoded string "Response Times" that hasn't been internationalized. To maintain consistency with the PR's objective, this should also be replaced with a translation key.

```diff
-				header="Response Times"
+				header={t("responseTimes")}
```

</blockquote></details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx (1)</summary><blockquote>

`89-92`: _⚠️ Potential issue_

**Missing prop validation for elementToCapture**

The `elementToCapture` prop is being used on line 80 but isn't included in the PropTypes validation.


```diff
StatusHeader.propTypes = {
	monitor: PropTypes.object,
	connectionStatus: PropTypes.string,
+	elementToCapture: PropTypes.object,
};
```

</blockquote></details>
<details>
<summary>src/Pages/Auth/Register/StepOne/index.jsx (1)</summary><blockquote>

`65-88`: _🛠️ Refactor suggestion_

**Some form field labels and placeholders are still hardcoded**

There are still some hardcoded strings in the TextInput components that should be internationalized:
- "Name" (line 67)
- "Surname" (line 79) 
- Placeholder texts "Jordan" and "Ellis" (lines 70, 82)


```diff
<TextInput
	id="register-firstname-input"
-	label="Name"
+	label={t("authRegisterName")}
	isRequired={true}
-	placeholder="Jordan"
+	placeholder={t("authRegisterNamePlaceholder")}
	autoComplete="given-name"
	value={form.firstName}
	onChange={onChange}
	error={errors.firstName ? true : false}
	helperText={errors.firstName}
	ref={inputRef}
/>
<TextInput
	id="register-lastname-input"
-	label="Surname"
+	label={t("authRegisterSurname")}
	isRequired={true}
-	placeholder="Ellis"
+	placeholder={t("authRegisterSurnamePlaceholder")}
	autoComplete="family-name"
	value={form.lastName}
	onChange={onChange}
	error={errors.lastName ? true : false}
	helperText={errors.lastName}
	ref={inputRef}
/>
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 73-73: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
 Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with


(lint/complexity/noUselessTernary)

---

[error] 85-85: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
 Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with


(lint/complexity/noUselessTernary)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (5)</summary><blockquote>

<details>
<summary>src/Pages/Auth/Register/Register.jsx (1)</summary><blockquote>

`38-38`: **The translation key naming convention seems inconsistent.**

The translation key `signUP` uses an unusual capitalization pattern with "UP" in all caps. Most translation keys follow camelCase (signUp) or kebab-case (sign-up). Consider standardizing this for better maintainability.

```diff
-					<Typography component="h1">{t("signUP")}</Typography>
+					<Typography component="h1">{t("signUp")}</Typography>
```

</blockquote></details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx (1)</summary><blockquote>

`10-16`: **Consider internationalizing the chatbot messages**

The MESSAGES array contains hardcoded English strings that could potentially be internationalized as well.


You could consider moving these messages to the translation files and using translation keys instead:

```diff
-const MESSAGES = [
-	"I've checked the network status, and we're seeing excellent performance across all regions.",
-	"The network is stable and functioning optimally. All connections are active and stable.",
-	"I've reviewed the network status, and everything looks great. No issues detected.",
-	"The network is up and running smoothly. All connections are active and stable.",
-	"I've checked the network status, and everything is looking good. No issues detected.",
-];

+const MESSAGE_KEYS = [
+	"chatbotMessage1",
+	"chatbotMessage2", 
+	"chatbotMessage3",
+	"chatbotMessage4",
+	"chatbotMessage5"
+];
```

Then update line 45 to:

```diff
-<Typography>{MESSAGES[Math.floor(Math.random() * MESSAGES.length)]}</Typography>
+<Typography>{t(MESSAGE_KEYS[Math.floor(Math.random() * MESSAGE_KEYS.length)])}</Typography>
```

</blockquote></details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx (1)</summary><blockquote>

`3-3`: **Unused import detected**

The 'Image' component is imported but never used in this file.

```diff
-import Image from "../../../../../Components/Image";
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 ESLint</summary>

[error] 3-3: 'Image' is defined but never used.

(no-unused-vars)

</details>

</details>

</blockquote></details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx (1)</summary><blockquote>

`11-11`: **Missing PropTypes validations**

The component is missing prop validations for 'data', 'width', and 'connectionStatus'. Additionally, the 'width' prop is defined but never used in the component.

Add PropTypes validations and remove or use the 'width' prop:

```diff
+import PropTypes from 'prop-types';

const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
  // ... component implementation ...
};

+DeviceTicker.propTypes = {
+  data: PropTypes.array.isRequired,
+  connectionStatus: PropTypes.string,
+  width: PropTypes.string
+};
```

If you're not using the 'width' prop, consider removing it:

```diff
-const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
+const DeviceTicker = ({ data, connectionStatus }) => {
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 ESLint</summary>

[error] 11-11: 'data' is missing in props validation

(react/prop-types)

---

[error] 11-11: 'width' is missing in props validation

(react/prop-types)

---

[error] 11-11: 'width' is assigned a value but never used.

(no-unused-vars)

---

[error] 11-11: 'connectionStatus' is missing in props validation

(react/prop-types)

</details>

</details>

</blockquote></details>
<details>
<summary>src/Pages/DistributedUptime/Create/index.jsx (1)</summary><blockquote>

`339-340`: **Missing i18n for action button**

The "Create monitor" and "Configure monitor" texts in the button at the bottom of the form are still hardcoded. These should also be internationalized for consistency.

```diff
- {isCreate ? "Create monitor" : "Configure monitor"}
+ {isCreate ? t("createMonitor") : t("configureMonitor")}
```

Don't forget to add these new keys to the locale file:
```json
"createMonitor": "Create monitor",
"configureMonitor": "Configure monitor"
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 57469a2510431e29217ef038875ae7a4bd136b3f and d40507ee360ea193358ff9e39382ce830271a766.

</details>

<details>
<summary>📒 Files selected for processing (14)</summary>

* `src/Pages/Auth/Register/Register.jsx` (2 hunks)
* `src/Pages/Auth/Register/StepOne/index.jsx` (5 hunks)
* `src/Pages/DistributedUptime/Create/index.jsx` (7 hunks)
* `src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx` (3 hunks)
* `src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx` (3 hunks)
* `src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx` (3 hunks)
* `src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx` (2 hunks)
* `src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx` (2 hunks)
* `src/Pages/DistributedUptime/Details/Components/Footer/index.jsx` (1 hunks)
* `src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx` (1 hunks)
* `src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx` (2 hunks)
* `src/Pages/DistributedUptime/Details/index.jsx` (4 hunks)
* `src/Pages/DistributedUptime/Monitors/index.jsx` (3 hunks)
* `src/locales/gb.json` (5 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 ESLint</summary>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx</summary>

[error] 3-3: 'Image' is defined but never used.

(no-unused-vars)

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx</summary>

[error] 14-14: 'elementToCapture' is missing in props validation

(react/prop-types)

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx</summary>

[error] 11-11: 'data' is missing in props validation

(react/prop-types)

---

[error] 11-11: 'width' is missing in props validation

(react/prop-types)

---

[error] 11-11: 'width' is assigned a value but never used.

(no-unused-vars)

---

[error] 11-11: 'connectionStatus' is missing in props validation

(react/prop-types)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (30)</summary><blockquote>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx (1)</summary>

`4-4`: **LGTM! The internationalization implementation looks clean.**

The code changes properly implement i18n support by importing the useTranslation hook, initializing it, and replacing the hardcoded string with a translation key. This follows best practices for React internationalization.



Also applies to: 8-8, 14-14

</details>
<details>
<summary>src/Pages/Auth/Register/Register.jsx (1)</summary>

`70-70`: **Good spacing fix to prevent text concatenation issues.**

Adding the space character after the translation ensures proper spacing between the translated text and subsequent elements, which is important for readability across different languages.

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx (2)</summary>

`11-15`: **LGTM! Proper i18n implementation.**

The useTranslation hook is correctly imported and initialized.

---

`29-29`: **Chart type labels properly internationalized.**

The hardcoded "Bar" and "Area" strings have been correctly replaced with their corresponding translation keys.



Also applies to: 35-35

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx (2)</summary>

`7-7`: **LGTM! Proper i18n setup.**

The useTranslation hook is correctly imported and initialized.



Also applies to: 12-12

---

`57-57`: **Tooltip content properly internationalized.**

The hardcoded "Response time:" and "ms" strings have been correctly replaced with their corresponding translation keys.



Also applies to: 65-65

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx (1)</summary>

`12-12`: **Great job implementing i18n for the StatusHeader component!**

The translation hook integration looks clean and the hardcoded strings have been properly replaced with translation keys.



Also applies to: 16-16, 64-64, 71-71

</details>
<details>
<summary>src/Pages/DistributedUptime/Monitors/index.jsx (1)</summary>

`16-16`: **Solid implementation of i18n for error messages!**

Your translation implementation for the network error messages looks good. Nice work replacing these hardcoded strings with translation keys.



Also applies to: 28-28, 53-55

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx (1)</summary>

`8-8`: **Good job implementing i18n for the ChatBot component!**

The translation hook is properly integrated and the "Now" string has been replaced with a translation key.



Also applies to: 20-20, 42-42

</details>
<details>
<summary>src/Pages/Auth/Register/StepOne/index.jsx (1)</summary>

`7-7`: **Good implementation of i18n for the Register StepOne component!**

The translation hook integration looks good and you've replaced most of the hardcoded strings with translation keys.



Also applies to: 32-32, 48-49, 112-112, 128-128

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/index.jsx (1)</summary>

`25-25`: **Nice internationalization implementation!**

The translation hook has been properly integrated and all hardcoded strings have been replaced with translation keys. This makes the component more maintainable and ready for localization.



Also applies to: 36-36, 60-60, 62-62, 75-75

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/Footer/index.jsx (1)</summary>

`4-4`: **Good job on internationalizing the Footer component!**

All text elements are now properly translated using the i18n framework. The translation keys follow a consistent naming pattern with the parent component's name as a prefix.



Also applies to: 8-8, 15-15, 23-23, 28-28

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx (1)</summary>

`2-2`: **Successfully internationalized the button labels!**

The implementation of the translation hook is correct, and button labels are now properly translated.



Also applies to: 10-10, 15-15, 29-29, 49-49

</details>
<details>
<summary>src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx (1)</summary>

`9-9`: **Well-implemented internationalization in the table!**

Good job replacing all the hardcoded strings with translation keys. The table headers and measurement units are now properly internationalized.



Also applies to: 13-13, 49-49, 52-52, 55-55, 79-79

</details>
<details>
<summary>src/Pages/DistributedUptime/Create/index.jsx (8)</summary>

`22-22`: **Good addition of i18n support!**

The import of `useTranslation` from react-i18next is a crucial first step in internationalizing the app. Nice job making this change to support multiple languages.

---

`45-45`: **Properly initialized translation hook!**

The translation hook is correctly set up here, making `t` function available throughout the component.

---

`196-196`: **Successfully replaced hardcoded string with i18n key!**

Good job replacing the hardcoded "monitor" text with the translation key.

---

`201-203`: **Internationalized section headers and descriptions!**

You've successfully replaced the hardcoded strings with their internationalized versions. This will make the UI more accessible for users in different locales.

---

`237-240`: **Great job on internationalizing these UI elements!**

The section header and description text are now properly internationalized. This maintains consistency with the rest of the application.

---

`264-265`: **Protocol selection buttons properly internationalized!**

The HTTP and HTTPS button labels are now correctly using translation keys.



Also applies to: 271-272

---

`296-299`: **Successfully internationalized notification section!**

The incident notifications header and description are now properly using translation keys.

---

`315-315`: **Advanced settings header internationalized!**

The header for the advanced settings section is now properly using a translation key.

</details>
<details>
<summary>src/locales/gb.json (8)</summary>

`3-6`: **Essential i18n keys added successfully!**

The keys for "https", "http", "monitor", and "aboutus" have been properly added to the locale file.

---

`15-26`: **Good addition of UI element translations!**

These new keys will help internationalize various UI elements throughout the application.

---

`36-36`: **Password reset key added successfully!**

The key for "passwordreset" has been properly added to the locale file.

---

`42-42`: **Registration step header added successfully!**

The key for the personal details step has been properly added.

---

`55-55`: **Added email app button text!**

The key for the "Open email app" button has been properly added.

---

`65-65`: **Added password reset confirmation message!**

The key for the password reset confirmation has been properly added.

---

`90-103`: **Comprehensive distributed uptime translations added!**

You've added a thorough set of translations for the distributed uptime monitoring UI elements. Good job on providing complete coverage for this feature.

---

`52-52`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify email placeholder removal!**

The placeholder {{email}} has been removed from the "authCheckEmailDescription" value. This change needs to be reflected in the component that uses this key.

---

🌐 Web query:

```web
What's the proper way to handle dynamic values in react-i18next translations?
```

💡 Result:

Handling dynamic values in **react-i18next** is streamlined through **interpolation**, **pluralization**, and the **Trans component**. These features allow seamless integration of variables, React elements, and contextual logic into translated content. Here's how to implement them effectively:

---

### 1. **Basic Interpolation with `t()`  
Inject dynamic values like user names, numbers, or dates into translations using the `t` function and `{{placeholders}}`:

**Translation File**:
```json
{
  "greeting": "Hello, {{name}}!",
  "articles": "You have {{count}} new articles."
}
```

**Component**:
```jsx
import { useTranslation } from 'react-i18next';

const Greeting = ({ name }) => {
  const { t } = useTranslation();
  return (
    <div>
      <p>{t('greeting', { name })}</p>
      <p>{t('articles', { count: 5 })}</p>
    </div>
  );
};
```
- **Result**: `Hello, Alice! You have 5 new articles.` [2][4][8]

---

### 2. **Pluralization**  
Use the `count` property to handle singular/plural forms dynamically:

**Translation File**:
```json
{
  "apple": "{{count}} apple |||| {{count}} apples"
}
```

**Component**:
```jsx
<p>{t('apple', { count: 3 })}</p> // Output: "3 apples"
```
- Supports languages with complex plural rules (e.g., Arabic has 6 plural forms). [4][7]

---

### 3. **The `<Trans>` Component**  
For translations containing **React elements** (e.g., bold text, links), use `<Trans>`:

**Translation File**:
```json
{
  "welcome": "Welcome to <1>our platform</1>!"
}
```

**Component**:
```jsx
import { Trans } from 'react-i18next';

const Welcome = () => (
  <Trans i18nKey="welcome">
    Welcome to <strong>our platform</strong>!
  </Trans>
);
```
- Numeric markers like `<1>` map to the order of nested elements. [3][6]

---

### 4. **Dynamic Keys and Namespaces**  
Load translations dynamically or handle keys programmatically:

```jsx
const dynamicKey = 'error.' + errorCode;
<p>{t(dynamicKey, { defaultValue: 'Unknown error' })}</p>
```

For namespaced translations:
```jsx
const { t } = useTranslation('admin', { keyPrefix: 'dashboard' });
// Accesses keys under "admin:dashboard" in translation files. [7][4]
```

---

### 5. **Advanced Formatting**  
**Dates/Numbers**:
```jsx
import { useTranslation } from 'react-i18next';
import { format } from 'date-fns';

const DateDisplay = () => {
  const { t, i18n } = useTranslation();
  const today = new Date();
  
  return (
    <p>{t('date', { value: today, formatParams: { value: { weekday: 'long' } } })}</p>
  );
};
```
Configure date/number formats in `i18next.init`:
```javascript
i18n.init({
  interpolation: {
    format: (value, format, lng) => {
      if (value instanceof Date) return formatDate(value, format, lng);
      return value;
    }
  }
});
```
[2][4][6]

---

### Best Practices
- **Security**: Enable `escapeValue: true` in non-React contexts to prevent XSS attacks. React automatically escapes content, so disable it with `escapeValue: false` in React apps [6][8].
- **Fallbacks**: Use `defaultValue` for missing keys or `fallbackLng` for missing translations [7].
- **Dynamic Imports**: Load translations asynchronously with `i18next-http-backend` for performance [6].

By leveraging these methods, you can create flexible, dynamic translations that adapt to user input, locale-specific formatting, and complex UI elements.

Citations:

- 1: https://www.dhiwise.com/post/react-i18next-simplifying-internationalization-in-react
- 2: https://poeditor.com/blog/react-localization-i18next/
- 3: https://react.i18next.com/latest/trans-component
- 4: https://hygraph.com/blog/react-internationalization
- 5: https://graphqleditor.com/blog/i18next-maps-and-react-dynamic-import/
- 6: https://phrase.com/blog/posts/localizing-react-apps-with-i18next/
- 7: https://www.i18next.com/translation-function/essentials
- 8: https://www.i18next.com/translation-function/interpolation
- 9: https://github.com/i18next/react-i18next/issues/547

---



</details>

**ACTION REQUIRED: Confirm component updates for the email translation key**

The translation in **src/locales/gb.json** (line 52) now reads:

```json
"authCheckEmailDescription": "We sent a password reset link to",
```

This means the previously used dynamic placeholder (`{{email}}`) has been removed. Please verify that the component using this key has been updated accordingly. If the component still supplies an email value for interpolation, it needs to be adjusted—either by removing the extra parameter or by reintroducing a placeholder using react-i18next’s recommended practices (e.g. via the `t()` function or `<Trans>` component).

Let's make sure our translations hit the stage as smoothly as mom’s spaghetti!

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-09T06:10:36Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🔭 Outside diff range comments (2)</summary><blockquote>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx (2)</summary><blockquote>

`23-25`: _🛠️ Refactor suggestion_

**MSG_MAP strings should also be internationalized.**

The status messages in MSG_MAP are still hardcoded. These should also be moved to translation keys for full i18n support.

```diff
const MSG_MAP = {
-	up: "All Systems Operational",
-	down: "Last Check Failed",
+	up: t("distributedUptimeDetailsStatusHeaderSystemsUp"),
+	down: t("distributedUptimeDetailsStatusHeaderSystemsDown"),
};
```

---

`89-92`: _🛠️ Refactor suggestion_

**Add missing propType validation for elementToCapture.**

The ESLint analysis correctly flags that 'elementToCapture' is missing in props validation. Please add it to maintain consistent prop validation.

```diff
StatusHeader.propTypes = {
	monitor: PropTypes.object,
	connectionStatus: PropTypes.string,
+	elementToCapture: PropTypes.object,
};
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx (1)</summary><blockquote>

`73-75`: **Internationalize the "seconds ago" suffix.**

The suffix "seconds ago" is still hardcoded in the LastUpdate component. This should also be translated.

```diff
<LastUpdate
-	suffix={"seconds ago"}
+	suffix={t("distributedUptimeDetailsStatusHeaderSecondsAgo")}
	lastUpdateTime={monitor?.timeSinceLastCheck}
/>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: .coderabbit.yaml**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between d40507ee360ea193358ff9e39382ce830271a766 and a5c724ca0d8d612c04884dfe9346f5fb141f9be8.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 ESLint</summary>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx</summary>

[error] 14-14: 'elementToCapture' is missing in props validation

(react/prop-types)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx (2)</summary>

`12-16`: <details>
<summary>✅ Verification successful</summary>

**Good internationalization setup, but validate with additional context.**

The added i18n setup looks good, however, ensure all colleagues on the team understand these changes. This setup is essential for the internationalization effort.


---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the translation key exists in the locale file
grep -r "distributedUptimeDetailsStatusHeaderUptime" src/locales/
grep -r "distributedUptimeDetailsStatusHeaderLastUpdate" src/locales/
```

Length of output: 300

---



</details>

**Internationalization Setup Verified – Translation Keys Confirmed**

Great job on the i18n integration! The translation keys "distributedUptimeDetailsStatusHeaderUptime" and "distributedUptimeDetailsStatusHeaderLastUpdate" have been confirmed in `src/locales/gb.json`. Please ensure the team is aware of these changes, so everyone’s on the same page, just like spinnin’ those sick beats. Keep it up, and remember: you only get one shot, so don't miss your chance to share these improvements with the crew!

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 ESLint</summary>

[error] 14-14: 'elementToCapture' is missing in props validation

(react/prop-types)

</details>

</details>

---

`64-64`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify data property change from uptimePercentage to totalUptime.**

You've changed more than just the strings - I notice you've replaced `monitor.uptimePercentage` with `monitor.totalUptime`. These could be different values! Make sure this was intentional and not an oversight during the i18n changes.

---

🏁 Script executed:

```shell
#!/bin/bash
# Search for other uses of uptimePercentage and totalUptime to understand the difference
rg "uptimePercentage" --type js
rg "totalUptime" --type js
```

Length of output: 1728

---



</details>

**Review Verification: Validate Property Name Change**

I ran searches across the codebase and found that while `uptimePercentage` is broadly used (for example, in `src/Hooks/useMonitorUtils.js`, several Infrastructure components, and the Monitors Table), the `totalUptime` property appears exclusively in the distributed uptime status header. Given its isolated usage, please verify that the switch to `monitor.totalUptime` was an intentional decision—and that it correctly represents the required uptime value. If this change is deliberate, consider updating documentation or code comments to clarify the distinction between the two properties.

- **Action Item:** Confirm with the backend logic or product owner that `totalUptime` is the intended value for this component.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-09T17:50:44Z

Review comments:
diff_hunk: @@ -181,22 +183,22 @@ const CheckEmail = () => {
 							maxWidth: 400,
 						}}
 					>
-						Open email app
+						{t("authCheckEmailOpenEmailButton")}
 					</Button>
 					<Typography sx={{ alignSelf: "center", mt: theme.spacing(6) }}>
-						Didn&apos;t receive the email?{" "}
+						{t("authCheckEmailDidntReceiveEmail")}{" "}
 						<Typography
 							component="span"
 							onClick={resendToken}
 							sx={{
-								color: theme.palette.primary.main,
+								color: theme.palette.accent.main,
path: src/Pages/Auth/CheckEmail.jsx
user: login: Br0wnHammer
body: Why the said color change was implemented.
<img width="646" alt="Screenshot 2025-03-08 at 12 29 37 AM" src="https://github.com/user-attachments/assets/5896cd9d-58b1-46a7-bbb0-bc17b2ec0904" />

created_at: 2025-03-07T19:16:19Z
author_association: MEMBER
diff_hunk: @@ -181,22 +183,22 @@ const CheckEmail = () => {
 							maxWidth: 400,
 						}}
 					>
-						Open email app
+						{t("authCheckEmailOpenEmailButton")}
 					</Button>
 					<Typography sx={{ alignSelf: "center", mt: theme.spacing(6) }}>
-						Didn&apos;t receive the email?{" "}
+						{t("authCheckEmailDidntReceiveEmail")}{" "}
 						<Typography
 							component="span"
 							onClick={resendToken}
 							sx={{
-								color: theme.palette.primary.main,
+								color: theme.palette.accent.main,
path: src/Pages/Auth/CheckEmail.jsx
user: login: ajhollid
body: This is fine, but next time please open a separate PR for separate issues.  PRs should be focused only on one issue at a time.
created_at: 2025-03-08T23:52:11Z
author_association: COLLABORATOR
diff_hunk: @@ -16,6 +17,7 @@ const MESSAGES = [
 
 const ChatBot = ({ sx }) => {
 	const theme = useTheme();
path: src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing prop validation for the sx prop**

The `sx` prop is being used in the component but isn't defined with PropTypes validation.


```diff
+import PropTypes from "prop-types";

const ChatBot = ({ sx }) => {
	const theme = useTheme();
	const { t } = useTranslation(); 
	return (
		// ...component implementation
	);
};

+ChatBot.propTypes = {
+	sx: PropTypes.object
+};

export default ChatBot;
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import PropTypes from "prop-types";
import React from "react";
import { useTheme } from "@mui/material/styles";
import { useTranslation } from "react-i18next";

const ChatBot = ({ sx }) => {
	const theme = useTheme();
	const { t } = useTranslation(); 
	return (
		// ...component implementation
	);
};

ChatBot.propTypes = {
	sx: PropTypes.object
};

export default ChatBot;
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 ESLint</summary>

[error] 18-18: 'sx' is missing in props validation

(react/prop-types)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-09T06:10:36Z
author_association: NONE
diff_hunk: @@ -1,12 +1,29 @@
 {
 	"dontHaveAccount": "Don't have account",
+	"https": "HTTPS",
+	"http": "HTTP",
+	"monitor": "monitor",
+	"aboutus": "About Us",
 	"email": "E-mail",
 	"forgotPassword": "Forgot Password",
 	"password": "password",
 	"signUp": "Sign up",
+	"signUP": "Sign Up",
path: src/locales/gb.json
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Potential confusion with similar keys**

There are two very similar keys "signUp" and "signUP" with different casing. This could lead to confusion and potential bugs when devs try to use these keys.

Consider standardizing on one format to maintain consistency:
```diff
  "signUp": "Sign up",
- "signUP": "Sign Up",
+ "signUpButton": "Sign Up",
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
	"signUp": "Sign up",
	"signUpButton": "Sign Up",
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-09T06:10:36Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-07T19:15:45Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
This pull request adds internationalization support to multiple front-end components. The changes introduce the `useTranslation` hook from the `react-i18next` library across various pages, including About, CheckEmail, ForgotPassword, and NewPasswordConfirmed. Static text strings have been replaced with dynamic translation keys, and the locale file (`src/locales/gb.json`) has been updated with new and modified key-value pairs. Additionally, design adjustments, such as colour updates, have been made to enhance user experience.

## Changes
| File(s) | Change Summary |
|---------|----------------|
| `src/Pages/About/index.jsx` | Added `useTranslation` import; replaced static header "About Us" with `{t("aboutus")}` for dynamic translation. |
| `src/Pages/Auth/CheckEmail.jsx`, `src/Pages/Auth/ForgotPassword.jsx`, `src/Pages/Auth/NewPasswordConfirmed.jsx` | Integrated `useTranslation` hook; replaced various static texts (e.g., "Check your email", "Forgot password?", "Password reset", etc.) with translation keys using `t()`; updated text colours from `theme.palette.primary.main` to `theme.palette.accent.main` where applicable. |
| `src/Pages/Auth/Register/Register.jsx`, `src/Pages/Auth/Register/StepOne/index.jsx` | Added `useTranslation` import; replaced static text "Sign Up" and other strings with translatable versions using `t()`. |
| `src/Pages/DistributedUptime/Create/index.jsx`, `src/Pages/DistributedUptime/Details/Components/Chatbot/index.jsx`, `src/Pages/DistributedUptime/Details/Components/ControlsHeader/index.jsx`, `src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx`, `src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx`, `src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx`, `src/Pages/DistributedUptime/Details/Components/Footer/index.jsx`, `src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx`, `src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx`, `src/Pages/DistributedUptime/Details/index.jsx`, `src/Pages/DistributedUptime/Monitors/index.jsx` | Integrated `useTranslation` hook; replaced various static texts with translation keys, enhancing localization support across components. |
| `src/locales/gb.json` | Added new keys (e.g., `"aboutus"`, `"passwordreset"`, `"authCheckEmailOpenEmailButton"`, `"authNewPasswordConfirmed"`) and modified existing keys for improved localization. |

## Sequence Diagram(s)
```mermaid
sequenceDiagram
    participant U as User
    participant C as Component
    participant T as useTranslation Hook
    participant L as Locale File (gb.json)

    U->>C: Request page render
    C->>T: Invoke useTranslation()
    T->>L: Fetch translation for key
    L-->>T: Return translated string
    T-->>C: Provide translation function `t()`
    C->>U: Render page with dynamic text
```

## Possibly related PRs
- **bluewave-labs/Checkmate#1711**: This PR implements the `useTranslation` hook for dynamic text translation in the AboutUs component, directly related to the changes in the main PR.
- **bluewave-labs/Checkmate#1797**: The changes in this PR involve the addition of new localization keys for different components, similar to the modifications made in the main PR.

## Suggested reviewers
- **ajhollid**: Suggested reviewer for the changes related to internationalization support.

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=bluewave-labs/Checkmate&utm_content=1889):

> ‼️ **IMPORTANT**
> Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: Br0wnHammer
created_at: 2025-03-08T17:21:38Z
body: @gorkem-bwl, can you add the keys to the POEditor?
author_association: MEMBER
user: login: Cihatata
created_at: 2025-03-08T19:57:06Z
body: Within the scope of this work, we must also add i18n support to the files under the account and Distributed Update directories. @Br0wnHammer 

There doesn't seem to be any other problem. Thank you for contribution
author_association: CONTRIBUTOR
user: login: Br0wnHammer
created_at: 2025-03-08T20:04:42Z
body: Hey @Cihatata, Account has no scope for the use of i18n. I will add Distributed Uptime dirs.
author_association: MEMBER
user: login: gorkem-bwl
created_at: 2025-03-08T20:04:55Z
body: > @gorkem-bwl, can you add the keys to the POEditor?

Sure, once you modify your PR to include those files, I'll do right away. 
author_association: CONTRIBUTOR
user: login: gorkem-bwl
created_at: 2025-03-08T23:26:17Z
body: > Hey @Cihatata, Account has no scope for the use of i18n. I will add Distributed Uptime dirs.

Hi @Br0wnHammer - this is the scope for this issue.

`SCOPE: About, Account, Auth, DistributedUptime Directories`

Would be great if you can add Account as well :) 
author_association: CONTRIBUTOR
user: login: Br0wnHammer
created_at: 2025-03-09T04:48:45Z
body: > > Hey @Cihatata, Account has no scope for the use of i18n. I will add Distributed Uptime dirs.
> 
> Hi @Br0wnHammer - this is the scope for this issue.
> 
> `SCOPE: About, Account, Auth, DistributedUptime Directories`
> 
> Would be great if you can add Account as well :)

Hey @gorkem-bwl , What I meant was that there are no hardcoded strings in account.
author_association: MEMBER
user: login: gorkem-bwl
created_at: 2025-03-09T05:57:00Z
body: > > > Hey @Cihatata, Account has no scope for the use of i18n. I will add Distributed Uptime dirs.
> > 
> > 
> > Hi @Br0wnHammer - this is the scope for this issue.
> > `SCOPE: About, Account, Auth, DistributedUptime Directories`
> > Would be great if you can add Account as well :)
> 
> Hey @gorkem-bwl , What I meant was that there are no hardcoded strings in account.

Got it, then we are good to go here. CC @ajhollid 
author_association: CONTRIBUTOR
user: login: Br0wnHammer
created_at: 2025-03-09T06:08:44Z
body: Additional Keys:

```
    "https": "HTTPS",
    "http": "HTTP",
    "monitor": "monitor",     "signUP": "Sign Up",
    "now": "Now",
    "delete": "Delete",
    "configure": "Configure",
    "networkError": "Network error",
    "responseTime": "Response time:",
    "ms": "ms",
    "bar": "Bar",
    "area": "Area",
    "country": "COUNTRY",
    "city": "CITY",
    "response": "RESPONSE",
    "checkConnection": "Please check your connection",
    "authRegisterStepOnePersonalDetails": "Enter your personal details",
    "distributedUptimeCreateSelectURL": "Here you can select the URL of the host, together with the type of monitor.",
    "distributedUptimeCreateChecks": "Checks to perform",
    "distributedUptimeCreateChecksDescription": "You can always add or remove checks after adding your site.",
    "distributedUptimeCreateIncidentNotification": "Incident notifications",
    "distributedUptimeCreateIncidentDescription": "When there is an incident, notify users.",
    "distributedUptimeCreateAdvancedSettings": "Advanced settings",
    "distributedUptimeDetailsNoMonitorHistory": "There is no check history for this monitor yet.",
    "distributedUptimeDetailsFooterHeading": "Made with ❤️ by UpRock & Bluewave Labs",
    "distributedUptimeDetailsFooterBuilt": "Built on",
    "distributedUptimeDetailsFooterSolana": "Solana",
    "distributedUptimeDetailsMonitorHeader": "Distributed Uptime Monitoring powered by DePIN",
    "distributedUptimeDetailsStatusHeaderUptime": "Uptime:",
    "distributedUptimeDetailsStatusHeaderLastUpdate": "Last updated",

```
author_association: MEMBER
user: login: ajhollid
created_at: 2025-03-09T15:49:49Z
body: @Br0wnHammer can you resolve merge conflicts please?  @Cihatata Can you do a quick review please?
author_association: COLLABORATOR
user: login: Br0wnHammer
created_at: 2025-03-09T17:50:32Z
body: > @Br0wnHammer can you resolve merge conflicts please? @Cihatata Can you do a quick review please?

Done on my part. @ajhollid 
author_association: MEMBER
user: login: Cihatata
created_at: 2025-03-10T06:52:09Z
body: Thank you for your contributions! Everything looks great to me. We can merge it. @ajhollid @Br0wnHammer 
author_association: CONTRIBUTOR