From 7646d11ea0b153318055c35e19ebb8d8a111e04d Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Thu, 19 Feb 2026 10:34:22 -0500
Subject: [PATCH] fix: align radio buttons with label text and increase rate
 limits font size

- Remove default Radio padding and use explicit margin-right for
  consistent alignment with the first line of label text
- Use RadioGroup gap for consistent spacing between options
- Switch rate limits text from body2 to default (body1) to match
  other settings section descriptions
---
 .../src/Pages/Settings/SettingsGlobalping.jsx | 78 +++++++------------
 1 file changed, 28 insertions(+), 50 deletions(-)

diff --git a/client/src/Pages/Settings/SettingsGlobalping.jsx b/client/src/Pages/Settings/SettingsGlobalping.jsx
index d62f72c6d..c97f14631 100644
--- a/client/src/Pages/Settings/SettingsGlobalping.jsx
+++ b/client/src/Pages/Settings/SettingsGlobalping.jsx
@@ -100,52 +100,30 @@ const SettingsGlobalping = ({
 							<RadioGroup
 								value={String(field.value ?? 6)}
 								onChange={(e) => field.onChange(Number(e.target.value))}
+								sx={{ gap: theme.spacing(4) }}
 							>
-								<FormControlLabel
-									value="3"
-									control={<Radio sx={{ mt: theme.spacing(2) }} />}
-									label={
-										<Box sx={{ py: theme.spacing(2) }}>
-											<Typography fontWeight={500}>
-												{t("pages.settings.globalpingSettings.tier3Label")}
-											</Typography>
-											<Typography variant="body2" color="text.secondary">
-												{t("pages.settings.globalpingSettings.tier3Description")}
-											</Typography>
-										</Box>
-									}
-									sx={{ mb: theme.spacing(2), alignItems: "flex-start" }}
-								/>
-								<FormControlLabel
-									value="6"
-									control={<Radio sx={{ mt: theme.spacing(2) }} />}
-									label={
-										<Box sx={{ py: theme.spacing(2) }}>
-											<Typography fontWeight={500}>
-												{t("pages.settings.globalpingSettings.tier6Label")}
-											</Typography>
-											<Typography variant="body2" color="text.secondary">
-												{t("pages.settings.globalpingSettings.tier6Description")}
-											</Typography>
-										</Box>
-									}
-									sx={{ mb: theme.spacing(2), alignItems: "flex-start" }}
-								/>
-								<FormControlLabel
-									value="15"
-									control={<Radio sx={{ mt: theme.spacing(2) }} />}
-									label={
-										<Box sx={{ py: theme.spacing(2) }}>
-											<Typography fontWeight={500}>
-												{t("pages.settings.globalpingSettings.tier15Label")}
-											</Typography>
-											<Typography variant="body2" color="text.secondary">
-												{t("pages.settings.globalpingSettings.tier15Description")}
-											</Typography>
-										</Box>
-									}
-									sx={{ alignItems: "flex-start" }}
-								/>
+								{[
+									{ value: "3", labelKey: "tier3Label", descKey: "tier3Description" },
+									{ value: "6", labelKey: "tier6Label", descKey: "tier6Description" },
+									{ value: "15", labelKey: "tier15Label", descKey: "tier15Description" },
+								].map((tier) => (
+									<FormControlLabel
+										key={tier.value}
+										value={tier.value}
+										control={<Radio sx={{ p: 0, mr: theme.spacing(4) }} />}
+										label={
+											<Box>
+												<Typography fontWeight={500} lineHeight={1.5}>
+													{t(`pages.settings.globalpingSettings.${tier.labelKey}`)}
+												</Typography>
+												<Typography variant="body2" color="text.secondary">
+													{t(`pages.settings.globalpingSettings.${tier.descKey}`)}
+												</Typography>
+											</Box>
+										}
+										sx={{ alignItems: "flex-start", m: 0 }}
+									/>
+								))}
 							</RadioGroup>
 						)}
 					/>
@@ -164,21 +142,21 @@ const SettingsGlobalping = ({
 					>
 						{t("pages.settings.globalpingSettings.rateLimitsTitle")}
 					</Typography>
-					<Typography variant="body2" sx={{ mb: theme.spacing(4) }}>
+					<Typography sx={{ mb: theme.spacing(4) }}>
 						{t("pages.settings.globalpingSettings.rateLimitsDescription")}
 					</Typography>
 					<Box component="ul" sx={{ m: 0, pl: theme.spacing(8) }}>
-						<Typography component="li" variant="body2" sx={{ mb: theme.spacing(2) }}>
+						<Typography component="li" sx={{ mb: theme.spacing(2) }}>
 							{t("pages.settings.globalpingSettings.rateLimitNoAuth")}
 						</Typography>
-						<Typography component="li" variant="body2" sx={{ mb: theme.spacing(2) }}>
+						<Typography component="li" sx={{ mb: theme.spacing(2) }}>
 							{t("pages.settings.globalpingSettings.rateLimitAuth")}
 						</Typography>
-						<Typography component="li" variant="body2">
+						<Typography component="li">
 							{t("pages.settings.globalpingSettings.rateLimitSponsor")}
 						</Typography>
 					</Box>
-					<Typography variant="body2" color="text.secondary" sx={{ mt: theme.spacing(4), fontStyle: "italic" }}>
+					<Typography color="text.secondary" sx={{ mt: theme.spacing(4), fontStyle: "italic" }}>
 						{t("pages.settings.globalpingSettings.rateLimitsNote")}
 					</Typography>
 				</Box>