Skip to content

Commit 7a69be6

Browse files
wbglaeserwbglaeser
committed
update depiction of language choice
1 parent 848b594 commit 7a69be6

6 files changed

Lines changed: 94 additions & 47 deletions

File tree

‎public/assets/images/country-flags/english.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎public/assets/images/country-flags/german.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/ui/language/useTranslation.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { useLanguageStore } from '@/ui/storage/useLanguageStore';
33
import translations from './translations';
44

55
export const LANG_OPTIONS = [
6-
{ code: "de", short: "DE", label: "Deutsch" },
7-
{ code: "de_es", short: "DE+E", label: "Deutsch (Einfache Sprache)" },
6+
{ code: "de", short: "DE", label: "Deutsch", icon: `${process.env.PUBLIC_URL}/assets/images/country-flags/german.svg`},
7+
{ code: "de_es", short: "DE+E", label: "Einfache Sprache", icon: `${process.env.PUBLIC_URL}/assets/images/country-flags/german.svg` },
88
// { code: "de_ls", short: "DE+L", label: "Deutsch (Leichte Sprache)" },
9-
{ code: "en", short: "EN", label: "English" },
9+
{ code: "en", short: "EN", label: "English", icon: `${process.env.PUBLIC_URL}/assets/images/country-flags/english.svg`},
1010
];
1111

1212
export const pickLang = (obj, lang, fallback) => {

‎src/ui/shared-components/LanguageDropdown.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import { Select, MenuItem, Typography } from "@mui/material";
3+
import { HBox } from "@/ui/shared-components/LayoutBoxes";
4+
import { LANG_OPTIONS } from "@/ui/language/useTranslation";
5+
import { useLanguageStore } from '@/ui/storage/useLanguageStore';
6+
7+
const LanguageDropdown = ({ isApp }) => {
8+
const language = useLanguageStore((state) => state.language);
9+
const setLanguage = useLanguageStore((state) => state.setLanguage);
10+
11+
const handleLanguageChange = (event) => {
12+
setLanguage(event.target.value);
13+
}
14+
15+
return (
16+
<HBox alignItems="center">
17+
<Select
18+
value={language}
19+
variant="standard"
20+
onChange={handleLanguageChange}
21+
disableUnderline
22+
IconComponent={() => null}
23+
sx={{
24+
backgroundColor: "white !important",
25+
border: `1px solid ${isApp ? "white" : "black"}`,
26+
borderRadius: "16px",
27+
padding: "10px 12px",
28+
color: isApp ? "white" : "black",
29+
30+
"& .MuiSelect-select": {
31+
display: "flex",
32+
alignItems: "center",
33+
gap: 1,
34+
minWidth: 0,
35+
pr: "0 !important",
36+
},
37+
"& .MuiSelect-select:focus": { backgroundColor: "transparent !important" },
38+
}}
39+
>
40+
{LANG_OPTIONS.map((opt) => (
41+
<MenuItem key={opt.code} value={opt.code}>
42+
<HBox sx={{ gap: 1, alignItems: "center" }}>
43+
<img
44+
src={opt.icon}
45+
alt={opt.label}
46+
width={28}
47+
height={24}
48+
style={{ display: "block", borderRadius: "2px" }}
49+
/>
50+
<Typography variant="body2" sx={{ color: isApp ? "white" : "black" }}>
51+
{opt.label}
52+
</Typography>
53+
</HBox>
54+
</MenuItem>
55+
))}
56+
</Select>
57+
</HBox>
58+
);
59+
}
60+
61+
export default LanguageDropdown;

‎src/ui/shared-components/header/views/HeaderBarDesktop.js‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import React, { useEffect, useState } from 'react';
2-
import useTranslation, { LANG_OPTIONS } from "@/ui/language/useTranslation";
2+
import useTranslation from "@/ui/language/useTranslation";
33
import { Link } from "react-router-dom";
44
import { HBox } from '@/ui/shared-components/LayoutBoxes';
55
import LogoBar from '@/ui/shared-components/LogoBar';
66
import LandingPageHollowButtonDesktop from '@/ui/screens/landing-page/components/LandingPageButtonDesktop';
77
import RegularButton from '@/ui/shared-components/buttons/RegularButton';
8-
import { useLanguageStore } from '@/ui/storage/useLanguageStore';
9-
import { Select, MenuItem } from "@mui/material";
8+
import LanguageDropdown from '@/ui/shared-components/LanguageDropdown';
109

1110
const HeaderBarDesktop = ({ isApp }) => {
12-
const language = useLanguageStore((state) => state.language);
13-
const setLanguage = useLanguageStore((state) => state.setLanguage);
1411
const { t } = useTranslation();
1512

1613
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < 1200);
@@ -24,10 +21,6 @@ const HeaderBarDesktop = ({ isApp }) => {
2421
return () => window.removeEventListener('resize', handleResize);
2522
}, []);
2623

27-
const handleLanguageChange = (event) => {
28-
setLanguage(event.target.value);
29-
}
30-
3124
return (
3225
<HBox sx={{
3326
justifyContent: 'space-between',
@@ -41,27 +34,19 @@ const HeaderBarDesktop = ({ isApp }) => {
4134
</HBox>
4235
<HBox justifyContent={'flex-end'} alignItems={'center'}>
4336
<HBox gap={5}>
44-
{!isApp ?
45-
<RegularButton
37+
{!isApp ?
38+
<RegularButton
4639
text={isSmallScreen ? 'home.global.actionButtonShort' : 'home.global.actionButton'}
47-
variant={'blackOutlined'}
48-
link='/user-routing'
40+
variant={'blackOutlined'}
41+
link='/user-routing'
4942
/> : null}
5043
<LandingPageHollowButtonDesktop isApp={isApp} text={t('home.menu.catalog')} to={'/eligibility-overview'} />
5144
<LandingPageHollowButtonDesktop isApp={isApp} text={t('home.menu.improve')} to={'/#feedback'} />
5245
<LandingPageHollowButtonDesktop isApp={isApp} text={t('home.menu.aboutUs')} to={"/#about-us"} />
53-
<HBox alignItems="center" gap={1} sx={{ color: isApp ? 'white' : 'black' }}>
54-
<Select value={language} onChange={handleLanguageChange}>
55-
{LANG_OPTIONS.map(opt => (
56-
<MenuItem key={opt.code} value={opt.code}>
57-
{opt.label}
58-
</MenuItem>
59-
))}
60-
</Select>
61-
</HBox>
46+
<LanguageDropdown isApp={isApp} />
6247
</HBox>
6348
</HBox>
64-
</HBox>
49+
</HBox >
6550
)
6651
}
6752

‎src/ui/shared-components/header/views/HeaderBarMobile.js‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
import React, { useState } from 'react';
22
import MenuIcon from '@mui/icons-material/Menu';
3-
import { IconButton, MenuItem, Select } from '@mui/material';
3+
import { IconButton } from '@mui/material';
44
import { Link } from 'react-router-dom';
55
import LogoBar from "@/ui/shared-components/LogoBar";
6-
import { useLanguageStore } from '@/ui/storage/useLanguageStore';
7-
import useTranslation, { LANG_OPTIONS } from "@/ui/language/useTranslation";
6+
import useTranslation from "@/ui/language/useTranslation";
87
import { HBox, VBox } from "@/ui/shared-components/LayoutBoxes";
98
import LandingPageHollowButtonMobile from '@/ui/screens/landing-page/components/LandingPageButtonMobile';
109
import LandingPageButton from '@/ui/screens/landing-page/sections/top-section/components/LandingPageButton';
10+
import LanguageDropdown from '../../LanguageDropdown';
1111

1212
const HeaderBarMobile = ({ isApp }) => {
1313
const [showDropdown, setShowDropdown] = useState(false);
14-
const language = useLanguageStore((state) => state.language);
15-
const setLanguage = useLanguageStore((state) => state.setLanguage);
1614
const { t } = useTranslation();
1715
const color = isApp ? 'white.main' : 'black.main';
1816

19-
const handleLanguageChange = (event) => {
20-
setLanguage(event.target.value);
21-
};
22-
2317
return (
2418
<VBox sx={{
2519
alignItems: 'center',
@@ -52,18 +46,7 @@ const HeaderBarMobile = ({ isApp }) => {
5246
<LandingPageHollowButtonMobile isApp={isApp} setShowDropdown={setShowDropdown} text={t('home.menu.aboutUs')} to={"/#about-us"} />
5347
</VBox>
5448
<LandingPageButton />
55-
<HBox alignItems="center" gap={1}>
56-
<Select
57-
value={language}
58-
onChange={handleLanguageChange}
59-
>
60-
{LANG_OPTIONS.map(opt => (
61-
<MenuItem key={opt.code} value={opt.code}>
62-
{opt.label}
63-
</MenuItem>
64-
))}
65-
</Select>
66-
</HBox>
49+
<LanguageDropdown isApp={isApp} />
6750
</VBox>)
6851
}
6952
</VBox>

0 commit comments

Comments
 (0)