From 2e874e1c8498d6a54ce090d8fb5180fac8e21342 Mon Sep 17 00:00:00 2001
From: Torresmorah <torresmorah@gmail.com>
Date: Thu, 23 Nov 2023 10:58:41 -0600
Subject: [PATCH] feat(webapp): add the language name in the selector

---
 webapp/src/components/Header/index.js  | 4 ++--
 webapp/src/components/Header/styles.js | 9 +++++----
 webapp/src/config/general.js           | 6 ++++++
 3 files changed, 13 insertions(+), 6 deletions(-)

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}
       >
-        <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
index fde12444..7eb72a76 100644
--- 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
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': '中文',
+}