einfache sprache behind feature flag

Author: wbglaeser

src/ui/language/useTranslation.js

@@ -1,14 +1,19 @@
 import { useCallback } from 'react';
 import { useLanguageStore } from '@/ui/storage/useLanguageStore';
 import translations from './translations';
+import featureFlags from "@/featureFlags";
 
-export const LANG_OPTIONS = [
+const LANG_OPTIONS_RAW = [
     { code: "de", short: "DE", label: "Deutsch", icon: `${process.env.PUBLIC_URL}/assets/images/country-flags/german.svg`},
     { code: "de_es", short: "DE+E", label: "Einfache Sprache", icon: `${process.env.PUBLIC_URL}/assets/images/country-flags/german.svg` },
     // { code: "de_ls", short: "DE+L", label: "Deutsch (Leichte Sprache)" },
     { code: "en", short: "EN", label: "English", icon: `${process.env.PUBLIC_URL}/assets/images/country-flags/english.svg`},
 ];
 
+export const LANG_OPTIONS = featureFlags.bielefunke
+    ? LANG_OPTIONS_RAW
+    : LANG_OPTIONS_RAW.filter(opt => opt.code !== "de_es");
+
 export const pickLang = (obj, lang, fallback) => {
     if (!obj || typeof obj !== "object") return fallback;
     if (obj[lang] !== undefined) return obj[lang];

src/ui/shared-components/LanguageDropdown.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Select, MenuItem, Typography } from "@mui/material";
+import { Select, MenuItem, Typography, Box } from "@mui/material";
 import { HBox } from "@/ui/shared-components/LayoutBoxes";
 import { LANG_OPTIONS } from "@/ui/language/useTranslation";
 import { useLanguageStore } from '@/ui/storage/useLanguageStore';
@@ -40,13 +40,21 @@ const LanguageDropdown = ({ isApp }) => {
                 {LANG_OPTIONS.map((opt) => (
                     <MenuItem key={opt.code} value={opt.code}>
                         <HBox sx={{ gap: 1, alignItems: "center" }}>
-                            <img
-                                src={opt.icon}
-                                alt={opt.label}
-                                width={28}
-                                height={24}
-                                style={{ display: "block", borderRadius: "2px", opacity: 0.75 }}
-                            />
+                            <Box
+                                sx={{
+                                    width: 28,
+                                    borderRadius: "4px",
+                                    overflow: "hidden",
+                                }}
+                            >
+                                <img
+                                    src={opt.icon}
+                                    alt={opt.label}
+                                    width="100%"
+                                    height="100%"
+                                    style={{ display: "block", opacity: 0.75 }}
+                                />
+                            </Box>
                             <Typography variant="body2" sx={{ color: isApp ? "white" : "black" }}>
                                 {opt.label}
                             </Typography>