Merge pull request #2358 from bluewave-labs/fix/languages

fix:revert gb to en, add language specific flag fixes

.github/scripts/download-translations.js

@@ -76,8 +76,7 @@ async function downloadTranslations() {
 
       // Determine the output filename based on language
       const normalizedLanguage = normalizeLanguageCode(language);
-      const filename =
-        normalizedLanguage === "en" ? "gb.json" : `${normalizedLanguage}.json`;
+      const filename = `${normalizedLanguage}.json`;
       const outputPath = path.join(process.cwd(), "temp", filename);
       await fs.writeJson(outputPath, formattedTranslations, { spaces: 2 });
 

client/src/Components/LanguageSelector.jsx

@@ -21,107 +21,44 @@ const LanguageSelector = () => {
 			value={language}
 			onChange={handleChange}
 			size="small"
-			sx={{
-				height: 28,
-				width: 64,
-				backgroundColor: theme.palette.primary.main,
-				color: theme.palette.primary.contrastText,
-				borderRadius: theme.shape.borderRadius,
-				fontSize: 10,
-				"& .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.primary.lowContrast,
-					borderRadius: theme.shape.borderRadius,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.primary.lowContrast,
-				},
-				"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.primary.lowContrast,
-				},
-				"& .MuiSvgIcon-root": {
-					color: theme.palette.primary.contrastText,
-					width: 16,
-					height: 16,
-					right: 4,
-					top: "calc(50% - 8px)",
-				},
-				"& .MuiSelect-select": {
-					padding: "2px 20px 2px 8px",
-					display: "flex",
-					alignItems: "center",
-					fontSize: 10,
-				},
-			}}
-			MenuProps={{
-				PaperProps: {
-					sx: {
-						backgroundColor: theme.palette.primary.main,
-						borderRadius: theme.shape.borderRadius,
-						marginTop: 1,
-						width: 64,
-						"& .MuiMenuItem-root": {
-							padding: "2px 8px",
-							minHeight: 28,
-							fontSize: 10,
-						},
-					},
-				},
-				anchorOrigin: {
-					vertical: "bottom",
-					horizontal: "left",
-				},
-				transformOrigin: {
-					vertical: "top",
-					horizontal: "left",
-				},
-			}}
+			sx={{ minWidth: 80 }}
 		>
 			{languages.map((lang) => {
-				const flag = lang ? `fi fi-${lang}` : null;
+				let parsedLang = lang === "en" ? "gb" : lang;
+
+				// Fix for Czech
+				if (parsedLang === "cs") {
+					parsedLang = "cz";
+				}
+				if (parsedLang.includes("-")) {
+					parsedLang = parsedLang.split("-")[1].toLowerCase();
+					console.log("parsedLang", parsedLang);
+				}
+
+				const flag = parsedLang ? `fi fi-${parsedLang}` : null;
 
 				return (
 					<MenuItem
 						key={lang}
 						value={lang}
-						sx={{
-							color: theme.palette.primary.contrastText,
-							"&:hover": {
-								backgroundColor: theme.palette.primary.lowContrast,
-							},
-							"&.Mui-selected": {
-								backgroundColor: theme.palette.primary.lowContrast,
-								"&:hover": {
-									backgroundColor: theme.palette.primary.lowContrast,
-								},
-							},
-						}}
 					>
 						<Stack
 							direction="row"
-							spacing={2}
+							spacing={theme.spacing(2)}
 							alignItems="center"
-							ml={0.5}
 						>
 							<Box
 								component="span"
 								sx={{
-									width: 16,
-									height: 12,
 									display: "flex",
 									alignItems: "center",
-									"& img": {
-										width: "100%",
-										height: "100%",
-										objectFit: "cover",
-										borderRadius: 0.5,
-									},
 								}}
 							>
 								{flag && <span className={flag} />}
 							</Box>
 							<Box
 								component="span"
-								sx={{ textTransform: "uppercase", fontSize: 10 }}
+								sx={{ textTransform: "uppercase" }}
 							>
 								{lang}
 							</Box>

client/src/Utils/i18n.js

@@ -3,7 +3,7 @@ import { initReactI18next } from "react-i18next";
 import { setLanguage } from "../Features/UI/uiSlice";
 import store from "../store";
 
-const primaryLanguage = "gb";
+const primaryLanguage = "en";
 
 const translations = import.meta.glob("../locales/*.json", { eager: true });