diff options
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/common/components/LocalizationProvider.js | 8 | ||||
| -rw-r--r-- | modern/src/login/LoginPage.js | 5 |
3 files changed, 10 insertions, 4 deletions
diff --git a/modern/package.json b/modern/package.json index 7988d78b..0faec5e7 100644 --- a/modern/package.json +++ b/modern/package.json @@ -20,7 +20,6 @@ "maplibre-gl": "^3.0.1", "moment": "^2.29.4", "react": "^18.2.0", - "react-country-flag": "3.1.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-mui-dropzone": "^4.0.6", 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)} {it.name} </MenuItem> |