Replace emoji character by real flag emoji

components/soumet/ajoute-tradiksyon.js

@@ -55,7 +55,7 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
         aria-haspopup='true'
         onClick={handleClick}
       >
-        Ajouter une traduction 🇫🇷 🇬🇧 🇪🇸
+        Ajouter une traduction 🇫🇷 🇬🇧 🇪🇸
       </Button>
       <StyledMenu
         keepMounted
@@ -64,9 +64,9 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
         open={Boolean(anchorElement)}
         onClose={handleClose}
       >
-        <StyledMenuItem id='fr' onClick={handleClose}>&#127467;&#127479; Français</StyledMenuItem>
+        <StyledMenuItem id='fr' onClick={handleClose}>🇫🇷 Français</StyledMenuItem>
-        <StyledMenuItem id='en' onClick={handleClose}>&#127468;&#127463; English</StyledMenuItem>
+        <StyledMenuItem id='en' onClick={handleClose}>🇬🇧 English</StyledMenuItem>
-        <StyledMenuItem id='es' onClick={handleClose}>&#127466;&#127480; Español</StyledMenuItem>
+        <StyledMenuItem id='es' onClick={handleClose}>🇪🇸 Español</StyledMenuItem>
       </StyledMenu>
     </div>
   )

components/teks/teks-drawer.js

@@ -135,15 +135,15 @@ const langToArray = anTeks => {
     const {francais, english, espagnol} = anTeks.tradiksyon
 
     if (francais) {
-      langArray.push({title: 'Traduction', emoji: '🇫🇷', lang: francais})
+      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
     }
 
     if (english) {
-      langArray.push({title: 'Translation', emoji: '🇬🇧', lang: english})
+      langArray.push({title: 'Translation', flag: 'en', lang: english})
     }
 
     if (espagnol) {
-      langArray.push({title: 'Traducción', emoji: '🇪🇸', lang: espagnol})
+      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
     }
   }
 
@@ -321,11 +321,25 @@ export default function TeksDrawer({teks, anTeks, komante}) {
                   </Typography>
                 </div>
               </Grid>
-              {langArray.map(({title, emoji, lang}) => (
+              {langArray.map(({title, flag, lang}) => (
                 <Grid key={title} item xs={12} md={6}>
                   <div className={classes.gridText}>
                     <Typography align='center' className={classes.text} variant='h4'>
-                      <span dangerouslySetInnerHTML={{__html: emoji}} /> {title}
+                      {flag === 'fr' && (
+                        <span>
+                          🇫🇷
+                        </span>
+                      )}
+                      {flag === 'en' && (
+                        <span>
+                          🇬🇧
+                        </span>
+                      )}
+                      {flag === 'es' && (
+                        <span>
+                          🇪🇸
+                        </span>
+                      )} {title}
                     </Typography>
                     <Typography paragraph align='justify' component='span'>
                       {formatJsonString(lang)}