diff --git a/webapp/src/components/Header/index.js b/webapp/src/components/Header/index.js
index a9211208..0bd583af 100644
--- a/webapp/src/components/Header/index.js
+++ b/webapp/src/components/Header/index.js
@@ -27,7 +27,7 @@ const useStyles = makeStyles(styles)
const languages = generalConfig.languages.map((language) => ({
value: language,
- label: language.toUpperCase(),
+ label: generalConfig.languagesLabels[language] || language.toUpperCase(),
}))
const HeaderLogo = () => {
@@ -71,7 +71,7 @@ const LanguageMenu = () => {
onBlur={closeMenu}
className={classes.btnLanguage}
>
- {i18n.language.substring(0, 2).toUpperCase()}
+ {generalConfig.languagesLabels[i18n.language.substring(0, 2)]}
({
},
btnLanguage: {
fontWeight: '600 !important',
+ wordBreak: 'keep-all',
[theme.breakpoints.down('sm')]: {
minWidth: 'auto !important',
- width: '36px',
+ width: '50px',
'& .MuiButton-startIcon': {
margin: '0 !important',
},
@@ -166,12 +167,12 @@ export default (theme) => ({
},
languageMenu: {
'& > div': {
- maxWidth: 50,
- width: 50,
+ maxWidth: 80,
+ width: 80,
maxHeight: 1000,
opacity: 1,
top: 25,
- left: 'calc(100% - 65px)',
+ left: 'calc(100% - 80px)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
diff --git a/webapp/src/config/general.js b/webapp/src/config/general.js
index cb6f445f..786802b5 100644
--- a/webapp/src/config/general.js
+++ b/webapp/src/config/general.js
@@ -33,3 +33,9 @@ export const healthLights = Object.freeze({
export const defaultLanguage = 'en'
export const languageResources = resources
export const languages = Object.keys(resources)
+export const languagesLabels = {
+ 'es': 'Español',
+ 'en': 'English',
+ 'ko': '한국인',
+ 'zh': '中文',
+}