feat(webapp): add the language name in the selector

edenia · Nov 23, 2023 · 2e874e1 · 2e874e1
1 parent c7e79d3
commit 2e874e1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git 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}
       >
-        <span>{i18n.language.substring(0, 2).toUpperCase()}</span>
+        <span>{generalConfig.languagesLabels[i18n.language.substring(0, 2)]}</span>
       </Button>
       <div
         className={clsx(classes.hideElement, {

diff --git a/webapp/src/components/Header/styles.js b/webapp/src/components/Header/styles.js
@@ -8,9 +8,10 @@ export default (theme) => ({
   },
   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
@@ -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': '中文',
+}