Use emojis for flags

2 files changed, 10 insertions, 3 deletions

diff --git a/modern/src/common/components/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js
index 226f1be2..a6a14859 100644
--- a/modern/src/common/components/LocalizationProvider.js
+++ b/modern/src/common/components/LocalizationProvider.js
@@ -186,3 +186,11 @@ export const useTranslationKeys = (predicate) => {
   const { data } = context.languages[context.language];
   return Object.keys(data).filter(predicate);
 };
+
+export const getFlagEmoji = (countryCode) => {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+};
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index 8a64bebf..3ccb954f 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -3,7 +3,6 @@ import moment from 'moment';
 import {
   useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress,
 } from '@mui/material';
-import ReactCountryFlag from 'react-country-flag';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -11,7 +10,7 @@ import { useTheme } from '@mui/material/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { sessionActions } from '../store';
-import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
+import { useLocalization, useTranslation, getFlagEmoji } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
 import usePersistedState from '../common/util/usePersistedState';
 import { handleLoginTokenListeners, nativeEnvironment, nativePostMessage } from '../common/components/NativeInterface';
@@ -212,7 +211,7 @@ const LoginPage = () => {
               <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}>
                 {languageList.map((it) => (
                   <MenuItem key={it.code} value={it.code}>
-                    <ReactCountryFlag countryCode={it.countryCode} />
+                    {getFlagEmoji(it.countryCode)}
                     &nbsp;&nbsp;
                     {it.name}
                   </MenuItem>